iOS webview与js交互

        WebView是显示网页的主要控件，在实际工作共经常会用到，尤其是当需要与用户有交互的时候，就会用到js，对于不太熟悉js的同事来说可能有点蒙，我们今天就来总结一下webview与js交互功能。

iOS12以后的版本不在支持UIWebView，用WebKit库来代替了，我们在这里只讨论WKWebView。我们先来看下WebKit常用的几个类：

• WKWebViewConfiguration配置webview的一些属性

• WKUserScript注入js脚本

• WKUserContentController与js交互的代理

• WKPreferences一些偏好设置

• WKWebView显示网页H5

我们通过一个demo来看下。文章最后附上demo链接。

xcode版本：Version 10.1 (10B61)         语言：swift 4.2

• 原生控件调用js函数

        let config = WKWebViewConfiguration();
        let preferences = WKPreferences();
        preferences.javaScriptEnabled = true;
        preferences.javaScriptCanOpenWindowsAutomatically = false;
        preferences.minimumFontSize = 16;
        config.preferences = preferences;
        
        let userContent = WKUserContentController();
        userContent.add(self, name: "jsFunc");
        config.userContentController = userContent;
        
        webView = WKWebView(frame: self.view.bounds, configuration: config);
        let url = Bundle.main.url(forResource: "TestHTML", withExtension: "html", subdirectory: "html");
        webView.load(URLRequest(url: url!));
        view.addSubview(webView);

首先创建一个web网页，我们打开执行脚本属性javaScriptEnabled设置为true，然后创建一个原生的按钮

        let buttn = UIButton(frame: .init(x: 20, y: self.view.frame.height - 100, width: self.view.frame.width - 40, height: 40));
        buttn.setTitle("原生按钮 添加文字", for: .normal);
        buttn.backgroundColor = UIColor.orange;
        buttn.addTarget(self, action: #selector(sendMesageJS), for: .touchUpInside);
        view.addSubview(buttn);

 调用如下函数：

 

    @objc func sendMesageJS() -> Void {
        webView.evaluateJavaScript("insertTextToHTML()") { (result, error) in
            
        };
    }

接下来我们看html网页和js:

先创建一个HTML网页：

	
		
		
		
		

	

	

		网页按钮 发送js消息


	

然后在创建一个js脚本：

function insertTextToHTML(){
    var body = document.getElementsByTagName('body');
    let p = document.createElement('p');
    p.innerText = "我是来自swift调用";
    body[0].appendChild(p);
    
}

我们swift的button也就是原生的按钮调用的函数必须和注册到js的函数是一直的我们这个函数也可以动态注册，如下的写法：

    func registerJS() -> String {
        let js = """

function insertTextToHTML(){
    var body = document.getElementsByTagName('body');
    let p = document.createElement('p');
    p.innerText = "通过注册 我是来自swift调用";
    body[0].appendChild(p);
    
}
""";
        return js;
        
    }

在配置webview上加上下面一句：

let js = WKUserScript(source: registerJS(), injectionTime: .atDocumentEnd, forMainFrameOnly: false);
userContent.addUserScript(js);

我们就可以直接用我们注册到js的函数了。

• js发送消息。

我们配置webview的时候有userContent.add(self, name: "jsFunc");这么一段代码，这个是注册一个方法的名字。我们再来看js代码:

function jsSendMessage() {
    window.webkit.messageHandlers.jsFunc.postMessage("js发送消息给Swift");
}

这一段是js代码。我们必须保证window.webkit.messageHandlers.jsFunc.postMessage的函数名字必须和注册时的名字一样，这样我们才能正确的发送消息。

我们需要实现WKUserContentController代理如下：

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        
        let mesg =  message.body as! String;
        let alert = UIAlertController(title: "提示", message: "swift收到js的信息：\n\(mesg)", preferredStyle: .alert);
        alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { (action) in
            
        }));
        present(alert, animated: true) {
            
        };
    }

这样就可以js发送给swift，swift也可以正确接收了。

如果有不懂的地方欢迎来讨论。成功的路上永远不缺少努力的人。

最后放上demo地址