开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

iOS UIWebView Javascript - 插入数据 - 接收回调？

iOS UIWebView Javascript - 插入数据 - 接收回调

在iOS应用程序中，使用UIWebView组件可以通过JavaScript在网页中插入数据，并且可以在网页中接收回调。以下是一个简单的步骤来演示如何在iOS应用程序中使用UIWebView实现这一功能。

1.创建一个UIWebView对象并加载网页

首先，需要在Xcode中创建一个UIWebView对象，并加载一个网页。可以使用以下代码来创建和加载UIWebView：

// 创建一个UIWebView对象
UIWebView *webView = [[UIWebView alloc] init];

// 加载网页
[webView loadHTMLString:@"<html><body><h1>Hello, World!</h1></body></html>" baseURL:nil];

上述代码创建了一个UIWebView对象，并加载了一个简单的网页，其中包含一个标题“Hello, World!”。

1.在网页中插入数据

接下来，可以使用JavaScript在网页中插入数据。可以使用以下代码来实现：

// 创建一个script对象
var script = document.createElement('script');

// 设置回调函数
script.onload = function() {
    console.log('数据已插入');
};

// 插入数据
script.text = 'console.log("数据已插入")';
document.body.appendChild(script);

上述代码创建了一个script对象，并设置了一个回调函数。然后，将文本“数据已插入”插入到网页中。

1.接收回调

最后，需要在网页中接收回调。可以使用以下代码来实现：

// 创建一个script对象
var script = document.createElement('script');

// 设置回调函数
script.onload = function() {
    console.log('数据已插入');
};

// 插入数据
script.text = 'console.log("数据已插入")';
document.body.appendChild(script);

上述代码创建了一个script对象，并设置了一个回调函数。然后，将文本“数据已插入”插入到网页中。

1.在iOS应用程序中接收回调

最后，需要在iOS应用程序中接收回调。可以使用以下代码来实现：

// 创建一个UIWebView对象
UIWebView *webView = [[UIWebView alloc] init];

// 加载网页
[webView loadHTMLString:@"<html><body><h1>Hello, World!</h1></body></html>" baseURL:nil];

// 创建一个script对象
var script = document.createElement('script');

// 设置回调函数
script.onload = function() {
    console.log('数据已插入');
};

// 插入数据
script.text = 'console.log("数据已插入")';
document.body.appendChild(script);

上述代码创建了一个UIWebView对象，并加载了一个简单的网页。然后，创建了一个script对象，并设置了一个回调函数。最后，将文本“数据已插入”插入到网页中。

以上就是一个简单的步骤，演示如何在iOS应用程序中使用UIWebView实现JavaScript回调。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

H5和移动端通信

JS调用iOS方法url拦截弹窗拦截（alert、confirm、prompt）JavaScriptCore（只适用于UIWebView）WKScriptMessageHandler（只适用于WKWebView...，iOS8+）Bridge第三方框架（适用于UIWebView和WKWebView）1. url拦截url拦截是在H5请求一个地址后，客户端拦截住这个地址，对地址进行解析处理H5中调用iOS方法代码：弹出登录弹窗(拦截url)iOS中拦截到url代码：- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest...WKScriptMessageHandlerWKScriptMessageHandler是一个协议，iOS中按照协议实现回调方法，在回调方法中可以拿到js发送的消息window.webkit.messageHandlers...JSBridgeJS桥接第三方框架(1)第三方框架DSBridge(2)第三方框架WebViewJavascriptiOS调用JS方法1. UIWebView2. WKWebView1.

1.3K3 0

判断js引擎是javascriptCore或者v8

对比 1，在iOS中通过UIWebView组件的stringByEvaluateJavascriptString:(NSString *)方法来调用。...实现的bridge机制性能堪忧，交互蛋疼； 4）通过UIWebView执行js代码段，有几点限制：由于ios并未给予我们通过UIWebView访问javascript运行时的权限，因此即使通过...stringByEvaluateJavascriptString执行错误的js代码，我们在oc端仍无法获取错误消息，更无从谈起回调函数；不过，这种方式的好处就是没有涉及到内存管理。 ...引擎并在js，oc两层搭建桥接层，并且每层持有2份相同的配置表，每个表中都记录js，oc透出的API，并结合iOS的事件机制完成oc和js的互调；第三种则仍是采用iOS7内置的javascriptCore...下只适配iOS7以上的设备，因此我们不需要针对iOS6及以下设备做兼容（引入第三方的javascriptCore），而且通过使用内置的js引擎和oc进行通信，在c／c++层面的效率将会大大提高（相比较UIWebview

3.4K5 0

WKWebView

在iOS中，加载网页目前有两种控件：UIWebView和WKWebView。...UIWebView自iOS2就有，WKWebView从iOS8.0（2014年9月WWDC）才有，毫无疑问，WKWebView相对UIWebVIew要优秀得多，主要表现在以下几点： 1，WKWebView...2，WKWebView拥有与Safari中相同的Nitro JavaScript引擎，大大提高了页面JS执行速度；但是UIWebView不支持Nitro JavaScript引擎，所以加载较慢。...2，不管是WKWebView还是UIWebView，其实其本质都是一个能够通过网址直接获取到数据流，并将数据流解析渲染出来的组件。...而iOS中的WebKit.framework，就是在WebCore、底层桥接、JSCore引擎等核心模块的基础上，针对iOS平台的项目封装。

6K2 0

iOS WebView 的 Hybrid 框架设计

作为一种混合开发模式，Hybrid APP 底层依赖 Native 端的 Web 容器（UIWebview 和 WKWebview），上层使用前端 Html5、CSS、Javascript 做业务开发，...UIWebView 和 WKWebView 兼容 iOS8 以后苹果推出了一套新的 WKWebView，对于 UIWebView 和 WKWebView 的区别，总结如下： ?...YZWebViewDelegate，UIWebView 和 WKWebView 代理的回调代理。...WebViewJavascriptBridge是一个不错的JavaScript与Native之间双向通信的库，多个厂家包括Facebook在使用，并且新的版本开始支持WKWebView，对了解Native...对于一个公司来说，往往一套底层框架需要服务于多条业务线、多个 APP，这就需要在设计的时候考虑好哪些桥接可以在框架层实现（比如跳转 Web 页面，设置数据，获取数据，Back 事件，Close 事件，Alert

1.7K1 0

H5如何与原生App通信？

容器在IOS客户端中，我们首先要提到的是一个叫UIWebView的容器，苹果对他的介绍是： UIWebView是一个可加载网页的对象，它有浏览记录功能，且对加载的网页内容是可编程的。...说白了UIWebView有类似浏览器的功能，我们使用可以它来打开页面，并做一些定制化的功能，如可以让js调某个方法可以取到手机的GPS信息。...从IOS12开始，苹果正式弃用UIWebView，统一采用WKWebView。...ps: 在将回调绑定在window下时，特别注意要使用bind保持函数内this的原有指向不变 IOS客户端调用H5方法 Native调用Javascript语言，是通过UIWebView组件的stringByEvaluatingJavaScriptFromString...{ let { data } = e.nativeEvent; //... }} /> RN客户端调用H5 postMessage是双向的，所以也可以在RN里发消息，H5里接消息来触发对应的回调

6K2 0

Objective-c与js交互专题

（主要在shouldStartLoadWithRequest回调方法中进行桥接处理）并加以处理后，再往上回调到目标VC中；具体代码如下所示： - (void) _platformSpecificSetup...在此完成注册事件回调，包括注册事件与接收数据事件 handler(message[@"data"], responseCallback); } 3.1.3 js端工作机制 js端通过iFrame...这里为引起混淆，需要解释一下我这里使用的“响应”、“回调”在这个上下文中的定义： (1)响应：接收端给予发送端的应答 (2)回调：发送端收到接收端的应答之后在接收端调用的处理逻辑 3.3...这样也利于IOS与Android两个平台的逻辑统一。...iOS 获取UIWebView上面的按钮点击事件 http://blog.csdn.net/zhangkongzhongyun/article/details/24314007 UIWebView的使用总结

1.7K5 0

JS Bridge 通信原理

拦截 Scheme 仔细思考一下，如果是 JS 和 Java 之间传递数据，我们该怎么做呢？对于前端开发来说，调 Ajax 请求接口是最常见的需求了。...所以基于上面的例子，我们可以把域名和路径当做通信标识，参数里面的 func 当做指令，callback_id 当做回调函数，其他参数当做数据传递。对于不满足条件的 http 请求不应该拦截。...端在 iOS 侧需要区分 UIWebView 和 WKWebView 两种方式。...:foo()", null); } else { webView.loadUrl("javascript:foo()"); } UIWebView 在 iOS 的 UIWebView 里面使用...所以我们需要事先创建好一个 iframe，插入到 DOM 里面，方便后续使用。

4.8K5 0

oc 与 js 互相调用

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。...UIWebView用于在App中嵌入网页内容，通常情况下是html格式的网页，也支持pdf, word等文档。控件优点可跨平台　　开发一次可以部署iOS、Android等平台。...数据通讯复杂　　 UIWebView与App之间进行数据通讯只能通过javascript或者UIWebViewDelegate来进行，客户端想传参数给UIWebView修改网页或者从网页中获取数据都比较复杂...https://www.baidu.com"]]; // 加载请求 [webView loadRequest:request]; [self.view addSubview:webView]; 2.js调oc...onclick="did();">google function did() { window.location.href = 'jsToOC:success'; } 3.oc调js

1.2K1 0

iOS下JS与OC互相调用（四）--JavaScriptCore

它是从iOS7开始加入的，用 Objective-C 把 WebKit 的 JavaScript 引擎封装了一下，提供了简单快捷的方式与JavaScript交互。...在HMTL加载成功的回调方法- (void)webViewDidFinishLoad:(UIWebView *)webView中添加要调用的原生OC方法。...不好的地方：只能使用在iOS 7以上。这点我相信现在基本没有多少应用还兼容iOS 6了吧，我去年在做这个功能的时候，还要兼容iOS 6 ? ? 。...4.通过JSContext将Model类或者Model类的实例插入到JavaScript中。当然，我们也可以给已经存在的类动态添加协议，来使其可以供JS 使用。...WKWebView中如何实现OC与JS交互可以看前面这篇文章：iOS下JS与OC互相调用（三）--MessageHandler UIWebView利用JavaScriptCore来实现交互的示例工程：JS_OC_JavaScriptCore

2.9K1 0

前端工程师所需要了解的WebView

window.prompt(message, value); WebChromeClient.onJsPrompt()就会受到回调。...WebView In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView....在 IOS8 之前，苹果手机的 WebView 使用的 UIWebView，UIWebView长期以来存在某些问题：加载速度慢存在内存泄漏内存占用多，内存优化困难如果内存占用过多还可能因为占用过多被系统...以 React Native 的 iOS 端举例：JavaScript 运行在 JSCore 中，实际上可以与上面的方式一样，利用注入 API 来实现 JavaScript 调用 Native 功能。...不过 React Native 并没有设计成 JavaScript 直接调用 Object-C，而是为了与 Native 开发里事件响应机制一致，设计成需要在 Object-C 去调 JavaScript

1.7K1 0

oc和js交互_js调用api

iOS JS与OC交互本文内容导航 1、`UIWebView` JS 与 OC 交互 1.1 OC 调用 JS 函数 1.1.1 OC 拼接 JS 字符串调用 JS 方法 1.1.2 使用 JSContext...JS 与 OC 交互 UIWebView 在 iOS12 中已经被废弃，同时WKWebView在iOS8中已经出现。...前提当然是自己协商一致 URL 数据格式。...#pragma mark - UIWebViewDelegate // 加载所有请求数据,以及控制是否加载 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest...使用步骤： ① 引入头文件 ② 初始化桥接类实例 ③ （JS 调用 OC）OC中 registerHandler 注册JS方法，使用block传参及回调；（ OC 调用 JS）callHandler

66.6K2 0

iOS-JavaScript交互方案：网页监听APP返回键(goback)+APP监听网页返回键(JS调用OC对象方法)

1.网页监听APP返回键(原生goback) 假设需求：当APP点击原生导航栏左上角返回键时，APP并不返回上级VC，而是让UIWebView返回上级页面。...[self popViewControllerAnimated:YES]; }); } else { // Workaround for iOS7.1... //iosDelegate对象调用的JavaScript方法，必须声明！！！...exceptionValue); }; } iosDelegate对象方法（恭候JS调用） - (void)getCall{ NSLog(@"call"); // 之后在回调JavaScript...history.go(-1); }else if(android){ window.androidDelegate.getCall(); }else if(ios

4.1K3 0

JSBridge深度剖析

Android端 Native调JS native调用js比较简单，只要遵循：”javascript: 方法名(‘参数,需要转为字符串’)”的规则即可。...(大量数据建议用接口方式获取) mWebView.loadUrl(“javascript: 方法名(‘参数,需要转为字符串’)”);函数需在UI线程运行，因为mWebView为UI控件 JS调Native...(大量数据建议用接口方式获取) JS调Native Native中通过引入官方提供的JavaScriptCore库(iOS7以上),然后可以将api绑定到JSContext上(然后Html中JS默认通过...我们前面讲过了原生的WebView/UIWebView控件已经能够和Js实现数据通信了，那为什么还要JSBridge呢？...iOS中,UIWebView有个特性：在UIWebView内发起的所有网络请求，都可以通过delegate函数在Native层得到通知。

3.7K6 0

前端工程师所需要了解的WebView

window.prompt(message, value); WebChromeClient.onJsPrompt()就会受到回调。...WebView In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView....在 IOS8 之前，苹果手机的 WebView 使用的 UIWebView，UIWebView长期以来存在某些问题：加载速度慢存在内存泄漏内存占用多，内存优化困难如果内存占用过多还可能因为占用过多被系统...以 React Native 的 iOS 端举例：JavaScript 运行在 JSCore 中，实际上可以与上面的方式一样，利用注入 API 来实现 JavaScript 调用 Native 功能。...不过 React Native 并没有设计成 JavaScript 直接调用 Object-C，而是为了与 Native 开发里事件响应机制一致，设计成需要在 Object-C 去调 JavaScript

1.4K1 0

前端工程师所需要了解的WebView

window.prompt(message, value); WebChromeClient.onJsPrompt()就会受到回调。...WebView In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView....在 IOS8 之前，苹果手机的 WebView 使用的 UIWebView，UIWebView长期以来存在某些问题：加载速度慢存在内存泄漏内存占用多，内存优化困难如果内存占用过多还可能因为占用过多被系统...以 React Native 的 iOS 端举例：JavaScript 运行在 JSCore 中，实际上可以与上面的方式一样，利用注入 API 来实现 JavaScript 调用 Native 功能。...不过 React Native 并没有设计成 JavaScript 直接调用 Object-C，而是为了与 Native 开发里事件响应机制一致，设计成需要在 Object-C 去调 JavaScript

2.1K3 0

MessageHandler 高级用法一：封装MessageHandler

在iOS中 JS 和原生APP交互有许多种方法 WebViewJavascriptBridge 是我用的比较多的一个库，但是 WebViewJavascriptBridge 中在使用时最大的一个缺点就是...WebViewJavascriptBridge 使用了一个中间代理 setWebViewDelegate 必须将 UIWebView、WKWebView 的代理设置为 WebViewJavascriptBridge...JS 原生交互 WKUserScript 通过configuration.userContentController.addUserScript 便可以添加一个 WKUserScript 对象，从而可以插入需要额外加入的...WKJSHandler' 安装当然现在实现了 JS 和 Native 之间的直接方法的调用，并且实现了参数的传递但是我们并不会满足于此，因为在实际的使用中，我们多数时候需要从Native 中获取一些数据...同样在我们调用 JS 方法后也希望 JS 在处理完毕之后会给我们一个回调我们的需求是 “回调“ 在下一章将会解决一下回调的问题 MessageHandler 高级用法二：原生调用JS 实现回调

2.7K4 0

Hybrid App 应用开发中 9 个必备知识点复习(WebView 调试等)

一、iOS 平台中 UIWebView 与 WKWebView 有什么区别？...参考文章：《UIWebView与WKWebView》 UIWebView 是苹果继承于 UIView 封装的一个加载 web 内容的类,它可以加载任何远端的web数据展示在你的页面上，你可以像浏览器一样前进后退刷新等操作...不过苹果在 iOS8 以后推出了 WKWebView 来加载 Web，并应用于 iOS 和 OSX 中，它取代了 UIWebView 和 WebView ，在两个平台上支持同一套 API。...库加载并使用, UIWebView 中限制了； WKWebView 目前缺少关于页码相关的 API； WKWebView 提供加载网页进度的属性； WKWebView 使用 Safari 相同的 JavaScript...js 的交互；注意：大多数App需要支持 iOS7 以上的版本，而 WKWebView 只在 iOS8 后才能用，所以需要一个兼容性方案，既 iOS7 下用 UIWebView ，iOS8 后用

3.1K0 0

Hybrid App 应用开发中 9 个必备知识点复习

一、iOS 平台中 UIWebView 与 WKWebView 有什么区别？...不过苹果在 iOS8 以后推出了 WKWebView 来加载 Web，并应用于 iOS 和 OSX 中，它取代了 UIWebView 和 WebView ，在两个平台上支持同一套 API。...WKWebView 支持了更多的 HTML5 特性； WKWebView 高效的 app 和 web 信息交换通道； WKWebView 允许 JavaScript 的 Nitro 库加载并使用, UIWebView...：大多数App需要支持 iOS7 以上的版本，而 WKWebView 只在 iOS8 后才能用，所以需要一个兼容性方案，既 iOS7 下用 UIWebView ， iOS8 后用 WKWebView...但是目前 IOS10 以下的系统以及很少了，小结： WKWebView 相较于 UIWebView 在整体上有较大的提升，满足 iOS 上面使用同一套控件的功能，同时对整个内存的开销以及滚动刷新率和

2.3K3 0

UI篇- UIWebView使用大全

有两种方式可根据加载内容获取UIWebView的合适高度，但都需要在网页内容加载完成后才可以，即需要在webViewDidFinishLoad回调中使用。...使用JavaScript - (void)webViewDidFinishLoad:(UIWebView *)webView { CGRect frame = webView.frame; NSString...而且这个 WebViewJavascriptBridge 会劫持掉 - (void)webViewDidFinishLoad:(UIWebView *)webView {}这个回调方法，在当前的VC中不会触发...web的这个回调方法。...UIWebView在 iOS11中的使用。 ? UIWebView 在iOS 11上当顶部的 y值设为 0 时，是依然无法盖住UIStatusBar区域的，但是滚动时就会出现问题了。

2K1 0

Hybrid App 应用开发中 9 个必备知识点复习

一、iOS 平台中 UIWebView 与 WKWebView 有什么区别？...不过苹果在 iOS8 以后推出了 WKWebView 来加载 Web，并应用于 iOS 和 OSX 中，它取代了 UIWebView 和 WebView ，在两个平台上支持同一套 API。...UIWebView 中限制了； WKWebView 目前缺少关于页码相关的 API； WKWebView 提供加载网页进度的属性； WKWebView 使用 Safari 相同的 JavaScript...js 的交互；注意：大多数App需要支持 iOS7 以上的版本，而 WKWebView 只在 iOS8 后才能用，所以需要一个兼容性方案，既 iOS7 下用 UIWebView ， iOS8...但是目前 IOS10 以下的系统以及很少了，小结： WKWebView 相较于 UIWebView 在整体上有较大的提升，满足 iOS 上面使用同一套控件的功能，同时对整个内存的开销以及滚动刷新率和

2.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭