首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ios oc与js交互原理

iOS中的Objective-C (OC) 与 JavaScript (JS) 交互主要通过两种方式实现:UIWebViewWKWebView,其中 WKWebView 是推荐的方式,因为它提供了更好的性能和更低的内存占用。以下是基于 WKWebView 的交互原理和示例代码。

iOS OC与JS交互原理

  • 基础概念:使用 WKWebViewJavaScriptCore 框架,可以实现 Objective-C 与 JavaScript 之间的双向通信。JavaScriptCore 框架提供了 JSContext 类,它是 JavaScript 的执行环境,允许在原生应用中嵌入 JavaScript 引擎,实现高级的 JS 与原生代码之间的交互。
  • 优势:这种方式使得原生应用与 Web 页面间的数据传递和功能调用更加方便,极大地提升了用户体验。
  • 类型:主要类型包括通过 URL 截取调用 OC 方法,以及使用 JavaScriptCore 框架直接调用 JS 方法。
  • 应用场景:常见于需要原生功能与 Web 页面紧密结合的应用,如混合应用开发、增强现实等。

iOS OC与JS交互实现方式

  • OC 调用 JS:可以通过 WKWebViewevaluateJavaScript:completionHandler: 方法实现。首先,需要创建一个 WKUserContentController 并添加自定义的 JavaScript 代码,然后在 Objective-C 中定义一个方法,该方法可以被注入的 JavaScript 代码调用。
  • JS 调用 OC:在 JavaScript 中,可以通过 window.webkit.messageHandlers 对象来注册原生对象,从而实现调用原生方法。例如,在 Objective-C 中定义的方法可以被 JavaScript 通过 window.webkit.messageHandlers.nativeFunction.postMessage 调用。

示例代码

以下是一个简单的示例,展示了如何在 iOS 中使用 WKWebViewJavaScriptCore 框架实现 OC 与 JS 的交互:

代码语言:txt
复制
// Objective-C 代码
WKWebView *webView = ...;
WKUserContentController *userContentController = [[WKUserContentController alloc] init];
[webView.configuration.userContentController addUserScript:[WKUserScript scriptWithSource:@"window.webkit.messageHandlers.nativeFunction.postMessage('Hello from JS');" language:WKUserScriptLanguageJavaScript injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];

[webView evaluateJavaScript:@"window.webkit.messageHandlers.nativeFunction.postMessage('Hello from OC');" completionHandler:^(id result, NSError *error) {
    if (error) {
        NSLog(@"Error: %@", error);
    } else {
        NSLog(@"Result from JS: %@", result);
    }
}];

// JavaScript 代码
window.webkit.messageHandlers.nativeFunction.postMessage('Hello from JS');

通过上述方法,开发者可以在 iOS 应用中实现与 Web 页面的高效交互,无论是调用原生功能还是传递数据。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iOS开发中OC与JS交互(UIWebView)

https://blog.csdn.net/u010105969/article/details/53189934 之前虽然做过OC与JS交互,但都是比较简单的效果:点击网页中的图片,然后进行图片浏览...现在对OC与JS交互这块也不是很清楚,今天只是把之前的代码贴过来以便今后更好地理解OC与JS的交互。 首先需要往网页中注入JS。注入JS的工作是后台做的。...可好像安卓和iOS还是有区别的,因为之前安卓那边可以实现与JS的交互,而我这边却不能。后台后台修改了代码,我这边也就可以进行交互了。...中的方法名改掉,OC找不到相应方法,这里就会打印异常信息 NSLog(@"异常信息:%@", exceptionValue);     }; } 苹果有了 OC与JS的交互的地址: http://mp.blog.csdn.net/postedit/53541088

3.9K30
  • iOS开发中OC与H5网页交互之OC传值给JS(WKWebView)

    /u010105969/article/details/53541088 本篇博客则是讲了OC传值给JS,代码似乎更简单。...JS接收OC传值的代码: function payResult(str){ if(str == ‘ture’){ alert(‘登录’); } } OC代码中的payResult()方法是...注意:JS能接收到OC传递的数据,但却不能进行输出,需要进行判断,看接收到的数据是不是某个数据。...当初在做这块的时候iOS这边打印的一直是null,写JS的哥们也一直说没有接收到数据,(他说我的代码有问题,我说他的代码有问题),最后才发现JS接收到的数据不能输出打印,只能进行判断。...再次提醒:这种OC给JS传参数的方式实际就是OC调用JS方法,传的值是JS方法的一个参数。 好了,博客很短,代码很简单,希望帮到那些在找OC传值给JS方法的童鞋们。

    5K20

    iOS下JS与OC互相调用(四)--JavaScriptCore

    前面讲完拦截URL的方式实现JS与OC互相调用,终于到JavaScriptCore了。...它是从iOS7开始加入的,用 Objective-C 把 WebKit 的 JavaScript 引擎封装了一下,提供了简单快捷的方式与JavaScript交互。...2、代码操作展示 因为该系列主要是JS与OC互调,所以主要介绍如何用JavaScriptCore实现JS与OC互调。 2.1 创建UIWebView,并加载本地HTML。...先把JS与OC互调部分的介绍完了,这里再补充一些关于JavaScriptCore的相关知识。 在OC中如何往JS环境中添加一个变量,便于后续在JS中使用呢?...WKWebView中如何实现OC与JS交互可以看前面这篇文章:iOS下JS与OC互相调用(三)--MessageHandler UIWebView利用JavaScriptCore来实现交互的示例工程:JS_OC_JavaScriptCore

    2.9K10

    iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge

    WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star。...本文介绍的是在UIWebView中使用WebViewJavascriptBridge来达到JS与OC互相调用的目的。WKWebView使用的是WKWebViewJavascriptBridge。...第四步、完成HMTL必要的JS代码 由于WebViewJavascriptBridge也是拦截URL来实现的调用原生功能,所以有一些代码跟之前iOS下JS与OC互相调用(一)中的HTML JS代码很相似...总结 利用WebViewJavascriptBridge来实现JS与OC的交互的优点: 1、获取参数时,更方便一些,如果参数中有一些特殊符号或者url带参数,能够很好的解析。...也有一些缺点: 1、做一次交互,需要执行的js 与原生的交互步骤较多,至少有两次。 2、需要花较多的时间,理解WebViewJavascriptBridge的原理和使用步骤。

    3.5K50

    iOS小技能:WKWebView与JS的交互

    前言 由于目前UIWebView 已经被抛弃了,因此推荐使用WKWebView的WKScriptMessageHandler实现iOS与JS交互 WKWebView是Apple在iOS8推出的Webkit...框架中的负责网页的渲染与展示的类,相比UIWebView速度更快,占用内存更少,支持更多的HTML特性 I JS调用iOS 使用例子:点击页面图片,调用iOS方法进行图片放大显示 1.1 JS代码: window.webkit.messageHandlers.openImage.postMessage...see also iOS利用JSExport协议实现与JS的交互 & android 和js的交互 https://blog.csdn.net/z929118967/article/details/77963082...因此,「同层渲染」的原生组件与普通的内置组件表现并无二致。 同层渲染不仅解决了原生组件的层级问题,同时也让原生组件有了更丰富的展示和交互的能力。...UIProcess进程:主要负责与 WebContent 进行交互,与 APP 在同一进程中,可以进行 WebView 的功能配置,并接收来自 WebContent 进程的各类消息,配合业务代码执行任务的决策

    7.3K30

    iOS下JS与OC互相调用(一)--UIWebView 拦截URL

    最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换。顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊。...目前我已知的JS 与 OC 交互的处理方式: 1.在JS 中做一次URL跳转,然后在OC中拦截跳转。...我去年也写过一个相互调用的总结:iOS下JS与原生OC互相调用(总结)。 写的比较粗糙,因此准备新开一个目录专题来记录JS 与原生交互的处理方式。...只是记录JS与OC交互的多种方式,大家可以根据实际情况和场景选择适合自己的方式。 ---- 今天就详细的介绍一下使用UIWebView拦截URL 的方式来实现JS与OC 的交互。...UIWebView 拦截URL 我之前就使用的是UIWebView + 拦截URL 的方式实现的JS与OC 交互。 原因是因为要兼容iOS 6。 1.创建UIWebView,并加载本地HTML。

    3.6K40

    iOS下JS与OC互相调用(八)--Cordova详解+实战

    扯两句,可以跳过 由于项目中Cordova相关功能一直是同事在负责,所以也没有仔细的去探究Cordova到底是怎么使用的,又是如何实现JS 与 OC 的交互。...1.新建工程,添加Cordova 关键类 我这里用Xcode 8 新建了一个工程,叫 JS_OC_Cordova,然后将Cordova关键类添加进工程。 有哪些关键类呢?...首先,HTML中需要加载 cordova.js,需要注意该js 文件的路径,因为我的cordova.js与HTML放在同一个文件夹,所以src 是这样写: JS 方法 iOSExec中会调用 另一个JS方法 pokeNative,而这个pokeNative,看到他的代码实现就会发现与UIWebView 开启一个URL 的操作是一样的: function pokeNative...示例工程的github地址:JS_OC_Cordova Have Fun!

    2.7K20
    领券