【资料图】
NSString *jsStr = @"执行的JS代码";[webView stringByEvaluatingJavaScriptFromString:jsStr];WKWebView调用方式:
[webView evaluateJavaScript:@"执行的JS代码" completionHandler:^(id _Nullable response, NSError * _Nullable error) {}];JS调用原生的方式JS调用原生的常见解决方案如下：一、UIWebView使用JavaScriptCore注入和Scheme拦截方式二、WKWebView使用WKScriptMessageHandler注入和Scheme拦截方式三、使用第三方框架WebViewJavascriptBridge调用UIWebView使用JavaScriptCore注入和Scheme拦截方式JavaScriptCore注入1.注入API将Native的相关接口注入到JS的Context（window）的对象中，一般来说这个对象内的方法名与Native相关方法名是相同的，Web端就可以直接在全局window下使用这个暴露的全局JS对象，进而调用原生端的方法。UIWebView的JavaScriptCore注入方式:1.原生新建类继承自NSObject（如AppJSModel）。2.h文件中声明一个代理并遵循JSExport，代理内的方法和js定义的方法名一致。3.m文件中实现代理中对应的方法，可以在方法内处理事件或通知代理。原生类实现：#importH5端调用：#import @protocol JSNativeProtocol - (NSDictionary *)QRCodeScan:(NSDictionary *)param;@end@interface AppJSModel : NSObject @end#import "AppJSModel.h"@implementation AppJSModel- (NSDictionary *)QRCodeScan:(NSDictionary *)param { NSLog(@"param: %@",param); return @{@"name":@"jack"};}@end
import "./App.css";import { useState } from "react";function OriginalWebViewApp() { const[name, setName] = useState("") // 0.公共 //原生发消息给JS，JS的回调 window.qrResult = (res)=>{ setName(res) return "-------: "+res } // scheme拦截 const localPostion = () => { window.location.href = "position://localPosition?name=jack&age=20" } // 2.UIWebView的交互 //js发消息给原生 const qrActionOnAppModel = () => { const res = window.appModel.QRCodeScan({"name":"value"}) alert(res.name) } const showAlert = () => { window.showAlert() } return ( ------------------公共------------------ 原生执行代码的结果：{name} ------------------UIWebView------------------ )}export default OriginalWebViewApp原生方法注入到JS上下文中:- (void)webViewDidFinishLoad:(UIWebView *)webView { JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; AppJSModel *jsModel = [AppJSModel new]; jsContext[@"appModel"] = jsModel; jsContext[@"showAlert"] = ^(){ dispatch_async(dispatch_get_main_queue(), ^{ UIAlertController* alert = [UIAlertController alertControllerWithTitle:@"请输入支付信息" message:@"" preferredStyle:UIAlertControllerStyleAlert]; UIAlertAction* defaultAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil]; [alert addAction:defaultAction]; UIAlertAction* cancleAction = [UIAlertAction actionWithTitle:@"Cancle" style:UIAlertActionStyleCancel handler:nil]; [alert addAction:cancleAction]; [alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) { textField.placeholder=@"请输入用户名"; }]; [alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) { textField.placeholder=@"请输入支付密码"; textField.secureTextEntry=YES; }]; [self presentViewController:alert animated:YES completion:nil]; }); };}Scheme拦截
原生方法执行完后，回调给js结果- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { if ([request.URL.scheme isEqualToString:@"position"]) { //自定义处理定位scheme JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; NSString *jsCode = @"qrResult("杭州，之江")"; [jsContext evaluateScript:jsCode]; return NO; } return YES;}WKWebView使用WKScriptMessageHandler注入和Scheme拦截方式WKScriptMessageHandler注入1.首先iOS与JS约定好使用相同的方法名进行通信，如 QRCodeScan:2.然后iOS 使用 WKUserContentController 的 -addScriptMessageHandler:name:方法监听 name 为 QRCodeScan 的消息；3.JS通过 window.webkit.messageHandlers. QRCodeScan.postMessage() 的方式对QRCodeScan 方法发送消息；4.iOS在-userContentController:didReceiveScriptMessage:方法中读取 name 为 QRCodeScan 的消息数据 message.body。H5页面中JS与原生设置下面代码为React代码实现：import "./App.css";import { useState } from "react";function OriginalWebViewApp() { const[name, setName] = useState("") // 0.公共 //原生发消息给JS，JS的回调 window.qrResult = (res)=>{ setName(res) return "-------: "+res } // scheme拦截 const localPostion = () => { window.location.href = "position://localPosition?name=jack&age=20" } // 1.WKWebView的交互 //js发消息给原生 const qrAction = () => { window.webkit.messageHandlers.QRCodeScan.postMessage({"name":"value"}) } return ( ------------------公共------------------ 原生执行代码的结果：{name} ------------------WKWebView------------------ )}export default OriginalWebViewAppiOS原生页面设置override func viewDidLoad() { super.viewDidLoad() // WKWebViewConfiguration: 用于配置WKWebView的属性和行为, 常见的操作有 let webViewConfiguration = WKWebViewConfiguration() //1.配置WKUserContentController,管理WKUserScript(cookie脚本)和WKScriptMessageHandler原生与JS的交互 let userContentController = WKUserContentController() webViewConfiguration.userContentController = userContentController //添加WKScriptMessageHandler脚本处理 userContentController.add(self, name: "QRCodeScan") //添加WKUserScript，injectionTime注入时机为atDocumentStart页面加载时在，forMainFrameOnly不只在主框架中注入，所有的框架都注入。 let cookieScript = WKUserScript(source: "document.cookie = "cookieName=cookieValue; domain=example.com; path=/";", injectionTime: .atDocumentStart, forMainFrameOnly: false) userContentController.addUserScript(cookieScript) //2.自定义处理网络，处理Scheme为position的定位网络操作 webViewConfiguration.setURLSchemeHandler(self, forURLScheme: "position") //3.偏好配置WKPreferences,设置网页缩放，字体 let preferences = WKPreferences() preferences.minimumFontSize = 10 if #available(iOS 14, *) { let webpagePreferences = WKWebpagePreferences() webpagePreferences.allowsContentJavaScript = true webViewConfiguration.defaultWebpagePreferences = webpagePreferences } else { preferences.javaScriptEnabled = true } preferences.javaScriptCanOpenWindowsAutomatically = true webViewConfiguration.preferences = preferences //4.多媒体设置，设置视频自动播放，画中画，逐步渲染 webViewConfiguration.allowsInlineMediaPlayback = true webViewConfiguration.allowsPictureInPictureMediaPlayback = true webViewConfiguration.allowsAirPlayForMediaPlayback = true webViewConfiguration.suppressesIncrementalRendering = true //5.cookie设置 //WKWebView中HTTPCookieStorage.shared单例默认管理着所有的cookie，一般无需我们做额外的操作，如果想单独添加一个cookie,可以把创建的cookie放置到HTTPCookieStorage.shared中即可。 //创建cookie对象 let properties = [ HTTPCookiePropertyKey.name: "cookieName", HTTPCookiePropertyKey.value: "cookieValue", HTTPCookiePropertyKey.domain: "example.com", HTTPCookiePropertyKey.path: "/", HTTPCookiePropertyKey.expires: NSDate(timeIntervalSinceNow: 31556926) ] as [HTTPCookiePropertyKey : Any] let cookie = HTTPCookie(properties: properties)! // 将cookie添加到cookie storage中 HTTPCookieStorage.shared.setCookie(cookie) webView = WKWebView(frame: .zero, configuration: webViewConfiguration) webView.uiDelegate = self webView.navigationDelegate = self self.view.addSubview(webView) loadURL(urlString: "http://localhost:3000/")}JS与原生交互代理//WKScriptMessageHandlerextension H5WKWebViewContainerController { func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { if message.name == "QRCodeScan" { print(message) //JS回调，原生处理完后，通知JS结果 //原生给js的回调事件 会通过”原生调用js“方式放入到js执行环境的messageQueue中 let script = "qrResult("jack")" message.webView?.evaluateJavaScript(script,completionHandler: { res, _ in print(res) }) } }}Scheme拦截// 自定义处理网络请求Scheme// WKURLSchemeHandler 的 Delegateextension H5WKWebViewContainerController { func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) { if urlSchemeTask.request.url?.scheme == "position" { //自定义处理定位scheme webView.evaluateJavaScript("qrResult("杭州，之江")") } print(webView) } func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask) { print(webView) }}使用第三方框架WebViewJavascriptBridge调用WebViewJavascriptBridge是一个原生与JS交互的工具，使用简单，设计巧妙，是一个进行Hybird开发必不可少的工具。WebViewJavascriptBridge的使用方式很简单，首先创建一个WKWebView变量，然后根据WKWebView变量创建WebViewJavascriptBridge属性。然后就可以使用WebViewJavascriptBridge属性提供的API进行与H5的交互了。在JS上下文中注册OC原生方法：- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler；调用JS上下文中已经存在的方法：
- (void)callHandler:(NSString *)handlerName data:(id)data
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. WKWebView *wkWebView = [[WKWebView alloc] initWithFrame:self.view.frame]; wkWebView.navigationDelegate = self; [self.view addSubview:wkWebView]; [WebViewJavascriptBridge enableLogging]; self.bridge = [WebViewJavascriptBridge bridgeForWebView:wkWebView]; // 在JS上下文中注册callOC方法 [self.bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"收到了JS的调用"); responseCallback(@"Object-C Received"); }]; // iOS调用JS [self.bridge callHandler:@"testJavascriptHandler" data:@{@"state":@"before ready"}]; NSURLRequest *req = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://localhost:3000/"]]; [wkWebView loadRequest:req];}h5中，在JS上下文中注册处理方法import React from "react"function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); } window.WVJBCallbacks = [callback]; var WVJBIframe = document.createElement("iframe"); WVJBIframe.style.display = "none"; WVJBIframe.src = "https://__bridge_loaded__"; document.documentElement.appendChild(WVJBIframe); setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)}function WebViewJavaScriptBridgeApp() { return ( ---------WebViewJavaScript--------- { setupWebViewJavascriptBridge(function(bridge) { var uniqueId = 1 function log(message, data) { var log = document.getElementById("log") var el = document.createElement("div") el.className = "logLine" el.innerHTML = uniqueId++ + ". " + message + ":
" + JSON.stringify(data) if (log.children.length) { log.insertBefore(el, log.children[0]) } else { log.appendChild(el) } } bridge.registerHandler("testJavascriptHandler", function(data, responseCallback) { log("ObjC called testJavascriptHandler with", data) var responseData = { "Javascript Says":"Right back atcha!" } log("JS responding with", responseData) if (responseCallback !== undefined) { responseCallback(responseData) } }) document.body.appendChild(document.createElement("br")) if (document.getElementById("buttons") === null) { setTimeout(function() { document.getElementById("buttons").innerHTML = "" var callbackButton = document.getElementById("buttons").appendChild(document.createElement("button")) callbackButton.innerHTML = "js 调用 OC方法" callbackButton.onclick = function(e) { e.preventDefault() log("JS calling handler "testObjcCallback"") bridge.callHandler("testObjcCallback", {"foo": "bar"}, function(response) { log("JS got response", response) }) } },0) } }) } )}export default WebViewJavaScriptBridgeAppWKWebViewJavascriptBridge核心知识点分析WebViewJavascriptBridge对象结构WebViewJavascriptBridge对象如下：window.WebViewJavascriptBridge = { // 保存js注册的处理函数：messageHandlers[handlerName] = handler; registerHandler: registerHandler, //JS调用OC方法 callHandler: callHandler, disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout, //JS调用OC的消息队列 _fetchQueue: _fetchQueue, //JS处理OC过来的方法调用。 _handleMessageFromObjC: _handleMessageFromObjC};它的内部结构中有一个队列：JS调用OC的队列_fetchQueue，不过_fetchQueue是一个函数变量，这个函数的返回值才是真正的js调用OC的消息队列。function _fetchQueue() { var messageQueueString = JSON.stringify(sendMessageQueue); sendMessageQueue = []; return messageQueueString;}消息队列的设计模式是与JS运行机制有关的，JS引擎执行的关键是消息队列和事件循环，详情可以阅读文章：[JS引擎中的线程，事件循环，上下文] https://www.cnblogs.com/zhou--fei/p/17452687.html消息队列中保存的message结构消息队列中保存的是一组message字典序列化后的字符串，message消息中保存着方法名handlerName，参数data，回调方法callbackId一个消息的创建方式如下：NSMutableDictionary* message = [NSMutableDictionary dictionary];message[@"data"] = data; NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId];self.responseCallbacks[callbackId] = [responseCallback copy];message[@"callbackId"] = callbackId;message[@"handlerName"] = handlerName;在原生与JS的交互中，当发送完消息时只会把对应的回调方法和回调方法ID在各自全局变量中以key,value的方式保存。原生调用JS时保存如下：
@interface WebViewJavascriptBridgeBase : NSObject// 在成员变量中定义字段responseCallbacks@property (strong, nonatomic) NSMutableDictionary* responseCallbacks;@end//发送消息时，保存回调ID：回调函数键值对。- (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName { NSMutableDictionary* message = [NSMutableDictionary dictionary]; if (data) { message[@"data"] = data; } if (responseCallback) { NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId]; self.responseCallbacks[callbackId] = [responseCallback copy]; message[@"callbackId"] = callbackId; } if (handlerName) { message[@"handlerName"] = handlerName; } [self _queueMessage:message];}JS对原生发送消息时，保存如下：// 在JS全局上下文中定义对象responseCallbacksvar responseCallbacks = {};function _doSend(message, responseCallback) { if (responseCallback) { var callbackId = "cb_"+(uniqueId++)+"_"+new Date().getTime(); //保存回调id:回调方法，键值对 responseCallbacks[callbackId] = responseCallback; message["callbackId"] = callbackId; } sendMessageQueue.push(message); messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + "://" + QUEUE_HAS_MESSAGE;}WebViewJavascriptBridge的Scheme拦截WebViewJavascriptBridge对象是原生向JS注入的，而WebViewJavascriptBridge对象向JS注入采用的方式是Scheme拦截。当h5中发送"__bridge_loaded__"Scheme跳转时，则会在原生触发WebViewJavascriptBridge对象相关数据的注入[_base injectJavascriptFile]。- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { if (webView != _webView) { return; } NSURL *url = navigationAction.request.URL; __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate; if ([_base isWebViewJavascriptBridgeURL:url]) { if ([_base isBridgeLoadedURL:url]) { //iOS原生进行js交互环境注入 [_base injectJavascriptFile]; } else if ([_base isQueueMessageURL:url]) { [self WKFlushMessageQueue]; } else { [_base logUnkownMessage:url]; } decisionHandler(WKNavigationActionPolicyCancel); return; } if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:decidePolicyForNavigationAction:decisionHandler:)]) { [_webViewDelegate webView:webView decidePolicyForNavigationAction:navigationAction decisionHandler:decisionHandler]; } else { decisionHandler(WKNavigationActionPolicyAllow); }}另外其他与消息发送无关的调用也采用的Scheme拦截，如消息队列的刷新。另外
iOS代码Demo地址：https://github.com/zhfei/MixContainerH5代码Demo地址：https://github.com/zhfei/ReactBasicKnowledgeH5页面使用的是React框架生成的Demo，下载后执行：cd h5-demonpm installnpm start就可以在线调试了参考文章：https://juejin.cn/post/7097845525587689486https://blog.csdn.net/ws1836300/article/details/119182057
关键词：
