iOS与网页JS交互实践：JavaScriptCore详解

“IOS与网页JS交互详解及实例” 在移动应用开发中，特别是在大中型电商类APP中，HTML网页已经不再局限于简单的展示功能，而是需要与原生应用的iOS代码进行交互，以便实现更丰富的功能，如点击网页元素跳转至原生页面等。本文主要介绍了三种常用且高效的Objective-C (OC)与JavaScript (JS)交互方法，以满足这样的需求。 第一种方法是通过JavaScriptCore.framework框架实现JS给OC传值。这一技术方案常用于网页中的点击事件处理，当用户触发某一操作时，将事件相关的参数传递给OC。例如，在类似携程APP的旅游应用中，用户点击网页上的景点图片或名称，可以触发原生应用跳转到对应的景点详情页面。 实现这一功能的步骤如下： 1. 在Xcode项目中引入JavaScriptCore.framework静态库。 2. 让你的ViewController遵守UIWebViewDelegate协议。 3. 在`-webViewDidFinishLoad:`方法中设置JSContext，以便能够访问网页中的JavaScript上下文。 4. 在OC代码中，创建一个JS可以调用的block，例如`passValue`，这个block会接收JS传递过来的参数。 5. 在JavaScript端，定义一个函数（如`testClick`），获取需要传递的值（例如从文本框`text1`和`text2`获取），然后调用`passValue`函数将这些值传递给OC。 OC代码示例： ```objc #import <JavaScriptCore/JavaScriptCore.h> // 遵守UIWebViewDelegate @interface ViewController : UIViewController <UIWebViewDelegate> @end @implementation ViewController - (void)viewDidLoad { // 初始化WebView并设置代理 UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; webView.delegate = self; // 加载网页... } - (void)webViewDidFinishLoad:(UIWebView *)webView { JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; context[@"passValue"] = ^ { NSArray *args = [JSContext currentArguments]; for (id obj in args) { NSLog(@"%@", obj); } }; } @end ``` JS代码示例： ```javascript function testClick() { var str1 = document.getElementById("text1").value; var str2 = document.getElementById("text2").value; passValue(str1, str2); } ``` 通过这种方式，OC可以从JS中获取数据，并根据接收到的数据执行相应的原生操作，如导航、更新UI等。这种交互方式对于增强混合应用的功能性和用户体验具有重要意义。