iOS H5 代码注入 window.webkit.messageHandlers.log.postMessage - Objective-C 实现

本文介绍如何使用 Objective-C 在 iOS 中通过 WKWebView 注入 JavaScript 代码，并执行 window.webkit.messageHandlers.log.postMessage 方法，实现 H5 与原生代码之间的交互。

1. H5 代码示例

以下是一个简单的 H5 代码示例，演示了如何使用 AJAX 发送请求：

function ajax(options) {
    //创建一个ajax对象
    var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");
    //数据的处理 {a:1,b:2} a=1&b=2;
    var str = "";
    for (var key in options.data) {
        str += "&" + key + "=" + options.data[key];
    }
    str = str.slice(1)
    if (options.type == "get") {
        var url = options.url + "?" + str;
        xhr.open("get", url);
        xhr.send();
    } else if (options.type == "post") {
        xhr.open("post", options.url);
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send(str)
    }
    //监听
    xhr.onreadystatechange = function () {
        //当请求成功的时候
        if (xhr.readyState == 4 && xhr.status == 200) {
            var d = xhr.responseText;
            //将请求的数据传递给成功回调函数
            options.success && options.success(d)
        } else if (xhr.status != 200) {
            //当失败的时候将服务器的状态传递给失败的回调函数
            options.error && options.error(xhr.status);
        }
    }
}

2. Objective-C 代码注入

在 Objective-C 中，可以通过 WKWebView 的`evaluateJavaScript:completionHandler:`方法来注入 JavaScript 代码并执行。

1. 找到对应的`WKWebView`实例，假设为`webView`。
2. 创建一个 JavaScript 字符串，该字符串包含要注入的代码。代码语句为`window.webkit.messageHandlers.log.postMessage`。
3. 使用`evaluateJavaScript:completionHandler:`方法执行 JavaScript 代码，并在回调中处理结果。

具体代码如下：

NSString *script = @"window.webkit.messageHandlers.log.postMessage";
[webView evaluateJavaScript:script completionHandler:^(id _Nullable result, NSError * _Nullable error) {
if (error) {
NSLog(@"JavaScript execution error: %@", error);
} else {
NSLog(@"JavaScript executed successfully");
}
}];

注意：以上代码仅仅是注入了 JavaScript 代码，具体的`postMessage`方法需要在 JavaScript 中进行实现，并在调用时传递相应的参数。

3. 总结

本文介绍了如何在 iOS 中通过 WKWebView 注入 JavaScript 代码，并执行 window.webkit.messageHandlers.log.postMessage 方法，实现 H5 与原生代码之间的交互。这是一种常用的技术，可以用于在 H5 页面中调用原生功能，例如获取设备信息、打开相机等。