iOS 几种webView与JS交互的方法

UIWebView

1. JS调用原生方法：拦截URL

func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {

        /**
         * 根据对特殊的url做处理，来触发原生的代码
         **/

        if (((request.URL?.description)! as NSString).hasPrefix("pywebview")) {

            /**
             * 原生代码示例：打印了字符串;
             **/

            NSLog("%@", ((request.URL?.description)! as NSString).substringFromIndex(12))

            return false
        }
        return true
    }

HTML 调用

function uiwebviewNSLog() {
            window.location.href = "pywebview://TestPYUIWebviewNSLog";
        }

调用JS方法

/**
             * 调用JS方法
             **/
            webView.stringByEvaluatingJavaScriptFromString("alert('webViewAlertAction')")

2 . JS调用原生方法：JavaScriptCore
iOS 7之后发布的JS与原生交互的框架

        let context = webView.valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") as! JSContext

        /**
         * 注入JS对应的原生对象
         **/
        context.setObject(PYWebViewModel(), forKeyedSubscript:"pywebviewJS")

HTML 调用

        function uiwebviewJSNSLog() {
            pywebviewJS.pyNSLog("TestPYUIWebViewJSNSLog");
        }

调用JS方法

        /**
         * 调用js方法
         **/
        context.evaluateScript("callbackJSAlert('jsAlertAction')");

WKWebView

iOS 8.0 发布，仅支持加载远程URL
iOS 9.0后支持加载本地html

JS调用原生方法：拦截URL

    func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {

        /**
         * 执行JS调用的方法
         **/

        NSLog("%@", message.body.description)
    }

HTML调用

        function wkwebviewNSLog() {
            window.webkit.messageHandlers.pywebviewJS.postMessage('TestPYWKWebViewJSNSLog');
        }

调用JS方法

webView.evaluateJavaScript("callbackJSAlert('jsAlertAction')", completionHandler: nil)

备注
初始化wkwebView时，需要初始化你的配置项，这样才能保证JS可以调用到你的原生代码

let configuretion = WKWebViewConfiguration()
        configuretion.userContentController = WKUserContentController()
        /**
         * 声明JS对象标识
         **/
        configuretion.userContentController.addScriptMessageHandler(self, name: "pywebviewJS")

SFSafariViewController

iOS 9 发布的高度封装的浏览器控件，与系统内的safari浏览器共享数据

        /**
         * 仅仅支持打开远程连接，并且js与原生无法交互
         **/

        self.presentViewController(SFSafariViewController(URL: NSURL(string: "http://www.baidu.com")!), animated: true, completion: nil)

Cordova

Apache提供的一套HTML调用原生代码的框架，支持多个系统，支持自己编写原生插件

JS调用原生方法

1. 编写原生插件，继承CDVPlugin

    func pyNSLog(command:CDVInvokedUrlCommand) -> Void {
        NSLog("%@", command.argumentAtIndex(0) as! String)

        return self.commandDelegate.sendPluginResult(CDVPluginResult(status: CDVCommandStatus_OK), callbackId: command.callbackId)
    }

2 . 编写JS插件

cordova.define("piang-plugin.NSLog", function(require, exports, module) {


var pywebviewJS = {
    pyNSLog:function(message) {
        var paraArr = new Array();
        paraArr.push(message);
        var exec =cordova.require('cordova/exec');
        exec(function(){}, function(){},"PYCDVWebViewNSLog","pyNSLog",paraArr);
    }
};

module.exports = pywebviewJS;

});

3 . 在cordova_plugins.js 中添加插件，声明暴露给外部HTML调用的对象

    {
        "file": "plugins/piang-plugin-webviewNSLog/src/www/ios/pyNSLog.js",
        "id": "piang-plugin.NSLog",
        "pluginId": "piang-plugin",
        "clobbers": [
            "pywebviewJS"
        ]
    },

4 . 在config.xml文件中，关联JS对象与原生类的名称

    <feature name="PYCDVWebViewNSLog">
        <param name="ios-package" value="PYCDVWebViewNSLog" />
    </feature>

HTML调用

        function cdvwebviewNSLog() {
            pywebviewJS.pyNSLog("TestPYCDVWebViewJSNSLog");
        }

调用JS方法

一般采取回调形式，注意对应的JS插件

        exec(function(){}, function(){},"PYCDVWebViewNSLog","pyNSLog",paraArr);
    }

传入的前两个参数，为成功的JS方法和失败的JS方法

return self.commandDelegate.sendPluginResult(CDVPluginResult(status: CDVCommandStatus_OK), callbackId: command.callbackId)

然后根据原生执行的结果，回调不同的结果参数
CDVPluginResult的status，正是标识了此次执行的结果，并且可以传参，具体查看代码或者文档