WKWebView、WebView和JS的交互方式详解

在网页开发中，经常需要在客户端和网页之间进行数据的交互，其中就涉及到了WKWebView、WebView和JavaScript的交互。下面详细讲解一下三者的交互方式。

WKWebView和JavaScript的交互

WKWebView是iOS 8以上版本中，替换UIWebView的新型控件，并且在性能，稳定性，兼容性等方面皆有不小的提升。WKWebView的JavaScript交互主要分为以下几个步骤：

1. 首先需要将WKWebView中的web contentController设置为WKUserContentController，以监听JavaScript的调用。

   let userContentController = WKUserContentController()
   userContentController.add(self, name: "xxx")
   let configuration = WKWebViewConfiguration()
   configuration.userContentController = userContentController
   let webView = WKWebView(frame: self.view.bounds, configuration: configuration)
   

2. 通过add函数向WKUserContentController添加messageHandler，这里的xxx表示JS中调用该接口时所需传递的名称。

   userContentController.add(self, name: "xxx")
   

3. 在WKScriptMessageHandler协议中，实现userContentController手工添加的JS调用方法。

   func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
       if message.name == "xxx" {
           // 收到JS调用
       }
   }
   

4. JS端可以通过window.webkit.messageHandlers.xxx.postMessage('xxxx')方法向原生客户端发送信息，在客户端中，WKScriptMessageHandler协议的接口方法会被调用。

下面是一份Swift的示例代码：

import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {

    override func viewDidLoad() {
        super.viewDidLoad()

        let userContentController = WKUserContentController()
        userContentController.add(self, name: "xxx")
        let configuration = WKWebViewConfiguration()
        configuration.userContentController = userContentController
        let webView = WKWebView(frame: self.view.bounds, configuration: configuration)
        self.view.addSubview(webView)

        let urlStr = "https://www.baidu.com"
        let url = URL(string: urlStr)!
        let request = URLRequest(url: url)
        webView.load(request)
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "xxx" {
            // 收到JS调用
        }
    }
}

WebView和JavaScript的交互

WebView是Android平台上的Web浏览器控件，WebView 和 JavaScript 的交互主要采用Android提供的接口方法：

1. 首先需要启用WebView的JavaScript调用能力。

   webView.setting.javaScriptEnabled = true
   

2. 通过addJavascriptInterface函数向WebView添加Message对象，这样JavaScript代码就可以通过对象方式调用原生应用程序的方法。

   class Message {
       fun show(message: String) {
           // 该方法用来打印传入的消息
       }
   }
   
   webView.addJavascriptInterface(Message(), "native")
   

3. 通过WebView.loadUrl()方法加载包含JavaScript代码的网页，网页代码就可以通过添加的对象“native”方式调用Android客户端。

下面是一份Kotlin的示例代码：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val webView = findViewById<WebView>(R.id.webView)
        webView.settings.javaScriptEnabled = true

        val message = Message()
        webView.addJavascriptInterface(message, "native")

        val url = "file:///android_asset/test.html"
        webView.loadUrl(url)
    }

    private inner class Message {
        @JavascriptInterface
        fun show(message: String) {
            // 该方法用来打印传入的消息
        }
    }
}

JS和原生客户端交互示例

// JS代码
function nativeMethod() {
    window.webkit.messageHandlers.xxx.postMessage('Hello World!')
}

// Swift代码
class ViewController: UIViewController, WKScriptMessageHandler {

    override func viewDidLoad() {
        super.viewDidLoad()

        let userContentController = WKUserContentController()
        userContentController.add(self, name: "xxx")
        let configuration = WKWebViewConfiguration()
        configuration.userContentController = userContentController
        let webView = WKWebView(frame: self.view.bounds, configuration: configuration)
        self.view.addSubview(webView)

        let urlStr = "https://www.baidu.com"
        let url = URL(string: urlStr)!
        let request = URLRequest(url: url)
        webView.load(request)
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "xxx" {
            let alert = UIAlertController(title: nil, message: message.body as? String, preferredStyle: .alert)
            let action = UIAlertAction(title: "OK", style: .default, handler: nil)
            alert.addAction(action)
            self.present(alert, animated: true, completion: nil)
        }
    }
}

// Kotlin代码
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val webView = findViewById<WebView>(R.id.webView)
        webView.settings.javaScriptEnabled = true

        val message = Message()
        webView.addJavascriptInterface(message, "native")

        val url = "file:///android_asset/test.html"
        webView.loadUrl(url)
    }

    private inner class Message {
        @JavascriptInterface
        fun show(message: String) {
            val alertDialog = AlertDialog.Builder(this@MainActivity).create()
            alertDialog.setTitle(null)
            alertDialog.setMessage(message)
            alertDialog.setButton(DialogInterface.BUTTON_POSITIVE, "OK") { _, _ -> }
            alertDialog.show()
        }
    }
}

以上是WKWebView、WebView和JavaScript的交互方式的详细讲解及示例代码。建议开发者们在实际开发中结合自身需要和场景使用相应的交互方式。