swift的WKWebView跟js互动调用js方法和弹出alert打开新窗口禁用手势等教程

今天做公司项目网页程序里面调用手机的截图.跟公司网页端的同事合作完成了功能.

网页端的js给手机端发js方法的代码格式:

可以直接把下面代码复制给你的前端同事

try {
    //使用此方法,会报错,因此使用try-catch
    window.webkit.messageHandlers.方法名.postMessage(发送的消息内容);
} catch(error) {
    console.log('WKWebView post message');
}

例如下面自定义的方法"screenShotCellphone",发送的消息是"1"

try {
    //使用此方法,会报错,因此使用try-catch
    window.webkit.messageHandlers.screenShotCellphone.postMessage("1");
} catch(error) {
    console.log('WKWebView post message');
}

swift端接收js方法需要做的事

给WKWebView添加要捕获js的方法名

如果不添加方法名,下面的代理方法就不能够捕捉到
下面方法在控制器执行一次就行了,放在WKWebView初始化后面,下面添加的方法名字是自定义的js方法screenShotCellphone

wkWebView.configuration.userContentController.add(self, name: "screenShotCellphone") //添加js需要检测的方法

捕获js方法

让控制器遵守协议WKScriptMessageHandler
例如让ViewController遵守协议,写成扩展,当网页里面发送js的screenShotCellphone 方法的时候下面就会被调用.message.name是捕获方法名,message.body是捕获到的方法发送的信息

extension ViewController: WKScriptMessageHandler{
    //userContentController的协议方法:JS调用OC和swift 时会执行此方法
    //   userContentController  webview中配置的userContentController 信息
    //    @param message                JS执行传递的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        //需要用wkWebView.configuration.userContentController.add 添加被检测的方法名字
        print("message=",message)
        print("message.webView=",message.webView)
        print("message.frameInfo=",message.frameInfo)
        print("message.name=",message.name) //方法名  得到"screenShotCellphone"
        print("message.body=",message.body) //参数 ,得到"1"
        
    }

swift端接收js的alert

遵守WKUIDelegate设置代理

wkWebView.uiDelegate = self

在代理方法里面写入接收alert的后续代码

注意,接收到alert以后必须调用completionHandler()方法,否则会报错,一般在点击完 “确定” 或者 "否"按钮以后调用这个方法,告诉系统已经点击完按钮了
下面代码 message是 js传过来的alert信息 runJavaScriptAlertPanelWithMessage是系统的代理方法

extension ViewController : WKUIDelegate{
    //网页alter信息
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        
        print("message=",message)
		//这里写你自己的ios alert方法,我的alert方法是自己封装的就不在这里写了
        completionHandler()// js的alert方法必须调用ios的completionHandler方法,否则报错

    }
}

swift 执行 js.open方法打开新窗口

当网页里面打开新的网页的时候,需要把WKWebView 用load方法再打开新的url.需要下面方法捕获到 js.open方法以后,再继续打开新网页

遵守WKUIDelegate代理

wkWebView.uiDelegate = self

重写代理方法,并且打开新的url

下面代码看着比较长,实际上核心内容就是一句 wkWebView.load(URLRequest(url: url)),就是让wkWebView打开新的网址,其他都是判断

extension ViewController : WKUIDelegate
    //用来接收 js的open方法
    //打开新网页的时候调用下面方法
    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {

        if navigationAction.request.url != nil {
            let url = navigationAction.request.url
            if let urlPath = url?.absoluteString {
                print("urlPath=",urlPath)
                if (urlPath as NSString?)?.range(of: "https://").location != NSNotFound || (urlPath as NSString?)?.range(of: "http://").location != NSNotFound {
                    //如果找到https://或者 http://就打开网页
                    if let url = URL(string: urlPath ) {
                        wkWebView.load(URLRequest(url: url))
                    }
                }
            }
        }
        return nil
    }
}

直接用swift执行js

evaluateJavaScript方法可以直接执行js语句

例如下面代码是通过执行js,禁用WKWebView的缩放手势

 let javascript = "var meta = document.createElement('meta');meta.setAttribute('name', 'viewport');meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');document.getElementsByTagName('head')[0].appendChild(meta);"
 webView.evaluateJavaScript(javascript, completionHandler: nil)