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

uiwebview和js交互

UIWebView 是苹果在iOS开发中提供的一个用于展示网页内容的控件,而JavaScript(JS)是一种在浏览器中执行的脚本语言,用于增强网页的交互性。UIWebView 和 JS 之间的交互主要涉及到在iOS应用中嵌入网页,并实现原生代码与网页脚本之间的通信。

基础概念

  1. UIWebView: 是iOS SDK中的一个类,用于在应用内加载和显示网页内容。
  2. JavaScriptCore: 是iOS中的一个框架,提供了与JavaScript交互的能力。

交互优势

  • 嵌入网页内容,复用现有的网页设计和功能。
  • 实现原生应用与网页内容的无缝交互,提升用户体验。

交互类型

  1. 从UIWebView调用JavaScript: 可以通过stringByEvaluatingJavaScriptFromString:方法执行网页中的JavaScript代码,并获取返回值。
  2. 从JavaScript调用UIWebView中的原生代码: 需要使用WKScriptMessageHandler协议(对于WKWebView,因为UIWebView已废弃)来接收网页发送的消息,并在原生代码中进行处理。

应用场景

  • 在应用中嵌入第三方网页或自定义网页。
  • 实现网页与原生应用之间的数据交换,如登录状态的同步、数据的提交和获取等。

问题与解决方案

问题1: 如何从UIWebView调用JavaScript代码?

解决方案:

代码语言:txt
复制
NSString *jsCode = @"document.getElementById('someElement').innerHTML;";
NSString *result = [webView stringByEvaluatingJavaScriptFromString:jsCode];
NSLog(@"Result from JS: %@", result);

问题2: 如何从JavaScript调用UIWebView中的原生代码?

解决方案: 由于UIWebView已废弃,推荐使用WKWebView。在WKWebView中,可以通过配置WKWebViewConfiguration和实现WKScriptMessageHandler协议来实现。

  1. 配置WKWebView:
代码语言:txt
复制
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKUserContentController *userContentController = [[WKUserContentController alloc] init];
[userContentController addScriptMessageHandler:self name:@"nativeHandler"];
configuration.userContentController = userContentController;
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
[self.view addSubview:webView];
  1. 实现WKScriptMessageHandler协议:
代码语言:txt
复制
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"nativeHandler"]) {
        NSLog(@"Received message from JS: %@", message.body);
        // 处理从JS发送过来的消息
    }
}
  1. 在JavaScript中发送消息:
代码语言:txt
复制
window.webkit.messageHandlers.nativeHandler.postMessage("Hello from JS!");

注意: UIWebView 在iOS 12之后被废弃,建议使用WKWebView来替代,因为WKWebView提供了更好的性能和更现代的API支持。

总结: UIWebView(或推荐的WKWebView)与JS的交互主要通过执行JavaScript代码和接收网页发送的消息来实现。这种交互方式在嵌入网页内容和实现原生与网页之间的通信时非常有用。

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

相关·内容

UIWebView与JS的交互

Github上的WebViewJavascriptBridge 这个用于UIWebView/WebViews和JS交互的封装库。 看sample的时候我容易被各种回调搞晕,我们先看代码。...中,交互的方式只有两种:send 和 callHandle,JS和OC都有这两个方法,所以对应的四种关系是: ?...和JS交互实现本地处理网页图片的下载操作就基本完成了。...这个例子展现了一个完整的过程,基本涉及了JS和OC的各种交互包括OC调用JS、JS调用OC等。如果你有其它的业务需求,也基本按照这个流程就可以依样画葫芦了,唯一不同的也就是业务逻辑了。...Node.JS都可以写服务器了,React Native都可以开发iOS了。学无止境,iOS应该先搞定OC和Swift再去搞前端。 参考:UIWebView与JS的深度交互

3.7K20

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

https://blog.csdn.net/u010105969/article/details/53189934 之前虽然做过OC与JS交互,但都是比较简单的效果:点击网页中的图片,然后进行图片浏览...现在对OC与JS交互这块也不是很清楚,今天只是把之前的代码贴过来以便今后更好地理解OC与JS的交互。 首先需要往网页中注入JS。注入JS的工作是后台做的。...可好像安卓和iOS还是有区别的,因为之前安卓那边可以实现与JS的交互,而我这边却不能。后台后台修改了代码,我这边也就可以进行交互了。...- (void)webViewDidFinishLoad:(UIWebView *)webView{ NSLog(@"加载完成..."); JSContext *context = [_webView...附上利用WKWebView加载网页OC与JS的交互的地址: http://mp.blog.csdn.net/postedit/53541088

3.9K30
  • 【vue随手笔记】Vue与ios UIwebview 和 Android webview 交互

    由于现在hybird 方案暂未获得完美解决,现决定用最原始的方案,将ios的UIwebview 与 Android 的webview做载体,通过加载页面来获得用户的浏览方式。...由于前端使用的是vue框架,所以针对两者交互产生了比较大的麻烦。于是做此笔记,记录一下。 1、原生Android构建 webview 的交互 ?...构建交互.png 注意框出的name,此处是自定义字段,由自己可以控制,在vue中可以直接使用 ?...自定义方法.png 此处自定义一个弹土司的方法,注意方法名称为test 2、原生IOS 构建 webview的交互 ? 初始化UIwebview.png ?...构建交互机制.png UIwebview 构建交互的时候注意test 方法名一定保持一致 3、Vue代码判断触发方法 TEST 交互<

    2.5K30

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

    WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star。...WebViewJavascriptBridge使用讲解 由于WebViewJavascriptBridge在UIWebView和WKWebView下的使用有些许差别,所以就分成两篇文章来讲解WebViewJavascriptBridge...第二步、创建UIWebView和WebViewJavascriptBridge示例。...总结 利用WebViewJavascriptBridge来实现JS与OC的交互的优点: 1、获取参数时,更方便一些,如果参数中有一些特殊符号或者url带参数,能够很好的解析。...也有一些缺点: 1、做一次交互,需要执行的js 与原生的交互步骤较多,至少有两次。 2、需要花较多的时间,理解WebViewJavascriptBridge的原理和使用步骤。

    3.5K50

    用WebViewJavascriptBridge进行JS和app进行交互

    和安卓怎么进行通信,有这样的需求也是很少见的,但是既然存在这样的需求还是需要进行解决的,那么我参考的是这个地址的方案: JsBridge vue调用的问题 这个直接原生js写是没有问题的,但是vue直接调用的时候一直不成功...里面 第二步:在main.js里面引入 import Bridge from '..../config/bridge.js' Vue.prototype....附带几个写得好的交互的例子 https://www.jianshu.com/p/d12ec047ce52 https://www.cnblogs.com/yongbufangqi1988/p/8462275....html PS:这个js不确定是不是一定需要的,如果成功了这个就不用加, 以后我玩的熟了,我会继续更新这个,写的再详细一点,目前可以确定的是如果这个WebViewJavascriptBridge.js

    3.3K10

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

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

    3.6K40

    WebViewJavascriptBridge源码探究--看OC和JS交互过程

    今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下,oc调用js方法我们是知道的,系统提供了stringByEvaluatingJavaScriptFromString...先上图,实现简单的oc和js互相调用的demo, 另外附加一个模拟项目中用到的oc和js互相调用场景: ? 一、然后说说js调用oc方法的原理,它们是如何实现的?库文件三个 ?...我们跟踪下oc控制器加载UIWebView的过程和js调用oc方法过程 1、程序启动,在自定义控制器里,创建一个WebViewJavascriptBridge对象时,会加载WebViewJavascriptBridge.js.txt...2、UIWebView加载我们自定义的html页面TestJSBridge.html, 里面有脚本注册js调用oc方法标识,和oc调用js标识 js过程 从oc内部发起 -- > 调用bridge的callHandler方法,传入需要的参数和自定义注册标识 --> 最后使用UIWebView系统方法stringByEvaluatingJavaScriptFromString

    3.4K50

    WebView 和 JS 交互,如何将 Java 对象和 List 传值给 JS ?

    今天我们来看看,如何将 Java 对象 和 List 集合传值给 JS 调用。...1 如何将 Java 对象实例传值给 JS 其实将我们在 Android 原生中将 Java 对象实例传值给 JS 承认并且可以使用的对象,方法非常简单。我们来举个例子。...直接就可以使用,获取了年龄,名字,和性别属性。那我们该如何声明该对象,才会被 JS 所承认呢? 1.2 Java 对象 来,看看,我们是如何创建 Person 这个实体类的。...wv.loadUrl("javascript:callJS()");这句话的意思就是:调用JS中的方法 callJS()函数方法。 2 Java List如何传给 JS 呢?...其实按道理来说,是不可以将List集合直接传值给 JS 使用,但是既然对象可以传值,JS 可以调用 java 对象,也可以调用 Android 中的方法,那我们就一拆分的形式传过去。

    8.6K100
    领券