ios开发 WKWebView 与 H5交互

https://blog.csdn.net/wds326598/article/details/105009622/

 

需求:
  需要在手机端用WKWebView加载链接展示html,并且需要与html中按钮做交互
实现:

1.  
   #import "ViewController.h"
2.  
   #import <WebKit/WebKit.h>
3.  
   @interface ViewController ()<WKScriptMessageHandler,WKNavigationDelegate>
4.  
   @property(nonatomic,strong) WKWebView *webView ;
5.  
   @end
6.  
   static NSString *strID = @"pullnewactive";
7.  
   - (void)viewDidLoad {
8.  
   [super viewDidLoad];
9.  
   // Do any additional setup after loading the view.
10.  
    self.title = self.titleName;
11.  
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
12.  
    //strID: H5界面的标识符
13.  
    WKUserContentController * wkUController = [[WKUserContentController alloc] init];
14.  
    [wkUController addScriptMessageHandler:self name:strID];
15.  
    config.userContentController = wkUController;
16.  
    //创建WKWebView
17.  
    self.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight) configuration:config];
18.  
    self.webView.navigationDelegate = self;
19.  
    [self.view addSubview:self.webView];
20.  
    //加载url
21.  
    NSURL * baseUrl = [NSURL URLWithString:self.urlStr];
22.  
    NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:baseUrl];
23.  
    [_webView loadRequest:request];
24.  
    }
25.  
    #pragma mark ------------ WKScriptMessageHandler --------
26.  
    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
27.  
    // NSDictionary * parameter = message.body; 如果带参数可以从parameter获取
28.  
    if([message.name isEqualToString:strID]){//点击按钮执行的方法
29.  
     
30.  
    }
31.  
    }
32.  
    #pragma mark ------------ WKNavigationDelegate ------------
33.  
    //WKWebView自带可以长按保存图片,加上下面代码,可以取消长按保存图片
34.  
    - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
35.  
    //禁止保存图片
36.  
    [self.webView evaluateJavaScript:@"document.documentElement.style.webkitUserSelect='none'" completionHandler:nil];
37.  
    [self.webView evaluateJavaScript:@"document.documentElement.style.webkitTouchCallout='none'" completionHandler:nil];
38.  
     
39.  
    }
40.  
    //移除注册的js方法(注意需要移除)
41.  
    -(void)dealloc{
42.  
    [[_webView configuration].userContentController removeScriptMessageHandlerForName:strID];
43.  
    }
44.  
    //如果H5界面有电话需要添加,拨打电话时调用
45.  
    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
46.  
    NSURL *URL = navigationAction.request.URL;
47.  
    NSString *scheme = [URL scheme];
48.  
    if ([scheme isEqualToString:@"tel"]) {
49.  
    NSString *resourceSpecifier = [URL resourceSpecifier];
50.  
    NSString *callPhone = [NSString stringWithFormat:@"telprompt://%@", resourceSpecifier];
51.  
    /// 防止iOS 10及其之后，拨打电话系统弹出框延迟出现
52.  
    dispatch_async(dispatch_get_global_queue(0, 0), ^{
53.  
    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:callPhone]];
54.  
    });
55.  
    }
56.  
    decisionHandler(WKNavigationActionPolicyAllow);
57.  
    }

HTML中需要在按钮点击事件中实现:

1.  
   //不带参数 (pullnewactive)标识符
2.  
   function jsToOcFunction1(){
3.  
   window.webkit.messageHandlers.pullnewactive.postMessage({});
4.  
   }
5.  
   //带参数 (jsToOcWithPrams)标识符
6.  
   function jsToOcFunction2(){
7.  
   window.webkit.messageHandlers.jsToOcWithPrams.postMessage({"params":"我是参数"});
8.  
   }