JS和webView的交互

JSContext的交互方式最为简单快捷:

1.申明一个JSContext对象

self.jsRunner = [[JSContext alloc] init];

2.在原生中定义申明一个JS函数方法(JS代码函数中可以使用)

self.jsRunner[@"action1"] = ^(int value){

printf("啦啦啦\n");

};

self.jsRunner[@"action2"] = ^(JSValue *value){

NSLog(@"%@",value);

};

3.通过执行JS代码的方式执行自己定义的函数(热更新通过加载自定义好的JS函数专门来转移实现原生消息发送相关函数,而后通过下载JS文件然后执行预定的代码尝试或达到替代原生代码过程)

[self.jsRunner evaluateScript:@"action1(10);"];

[self.jsRunner evaluateScript:@"action2([1,2,3,\‘你好哦\‘]);function testAction(){return 99;};"];

JSValue *result = [self.jsRunner evaluateScript:@"testAction();"];

NSLog(@"返回的结果:%@",result);

在UIWebView中获得JSContext,在代理OnFinshload函数中通过

self.jsRunner =[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

获得

在WKWebView中

You cannot obtain the context, because layout and javascript is handled on another process.

Instead, add scripts to your webview configuration, and set your view controller (or another object) as the script message handler.

- (void)setupWKWebView
{
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    // 设置偏好设置
    config.preferences = [[WKPreferences alloc] init];
    // 默认为0
    config.preferences.minimumFontSize = 10;
    // 默认认为YES
    config.preferences.javaScriptEnabled = YES;
    // 在iOS上默认为NO,表示不能自动通过窗口打开
    config.preferences.javaScriptCanOpenWindowsAutomatically = NO;
    config.processPool = [[WKProcessPool alloc] init];
    config.userContentController = [[WKUserContentController alloc] init];
    //注意在这里注入JS对象名称 "JSObjec"
    [config.userContentController addScriptMessageHandler:self name:@"JSObjec"];

    self.showWebView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
    self.showWebView.navigationDelegate = self;
    [self.view addSubview:self.showWebView];

    NSURL *path = [NSURL fileURLWithPath:网页文件路径];
    [self.showWebView loadRequest:[NSURLRequest requestWithURL:path]];
}

Now, send messages from JavaScript like so:

//在JS函数代码中调用
//这里的内容差不多全部一样 只是调用的方法有区别 一定要注意区分
                //这个是用UIWebView时调用的方法 JSObjec.getCall(callInfo);
                //下面是用WKWebView调用的方法
                window.webkit.messageHandlers.JSObjec.postMessage(callInfo);
//当执行到上述语句是将回调下面这个函数
Your script message handler will receive a callback:

- (void)userContentController:(WKUserContentController *)userContentController
                            didReceiveScriptMessage:(WKScriptMessage *)message
{
    NSLog(@"%@", message.body);
}
普通的实现方式:通过WebView调用页面中的JS函数,获得返回值通过代理链接截获,执行原生代码

原文地址:https://www.cnblogs.com/yuxiaoyiyou/p/8607919.html

时间: 2024-11-01 10:19:42

JS和webView的交互的相关文章

js与webview 常用交互代码

常用js交互 css常用参数::: 是否允许用户选择元素的内容,选择值包括:     auto:用户可以选择元素内的内容     none:用户不能选择任何内容     text:用户只能选择元素内的文本 常用JS语句::: 1. //禁用用户选择 [self.webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"]; 2.//禁用

WebView与JS的几种交互

http://www.jianshu.com/p/0042d8eb67c0 最近整理了一下原生与H5之间的交互方式,简单的做个总结.OC端与JS的交互,大致有这几种:拦截协议.JavaScriptCore库.WKWebView.自定义NSURLProtocol拦截.WebViewJavascriptBridge. JavaScriptCore一个iOS7引进的标准库,iOS7以前也有开发者自行导入使用.Web端也比较容易统一. WebViewJavascriptBridge是一个第三方库,其原理

与webView进行交互,webView小记

本文转载至 http://www.verydemo.com/demo_c101_i46895.html 一.与webView进行交互,调用web页面中的需要传参的函数时,参数需要带单引号,或者双引号(双引号需要进行转义在转义字符前加\),在传递json字符串时不需要加单引号或双引号. 1 -(void)webViewDidFinishLoad:(UIWebView *)webView 2 { 3     NSString *sendJsStr=[NSString stringWithFormat

js与原生的交互

一.与安卓的交互 Android与js通过WebView互相调用方法,实际上是: Android去调用JS的代码 JS去调用Android的代码 二者沟通的桥梁是WebView 对于android调用JS代码的方法有2种: 1. 通过WebView的loadUrl() 2. 通过WebView的evaluateJavascript() 对于JS调用Android代码的方法有3种: 1. 通过WebView的addJavascriptInterface()进行对象映射 2. 通过 WebViewC

Android混合开发之WebViewJavascriptBridge实现JS与java安全交互

前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与java互相调用的需求.它就是WebViewJavascriptBridge. 学习动机: 先看下之前的解决办法:Android混合开发之WebView与Javascript交互 最近棒棒安全的一个市场推广来我们公司推广他们的产品,当时也没太引起我的注意,后来这个市场推广人员把我们的app的进行了他们

浅谈Android之webView及交互

记得有一段时间安卓的webview挺火的,很多都喜欢用h5来开发页面.不过相对于原声安卓,webview的缺点显而易见,慢,耗电,用户体验不好.或许对开发人员还好,因为可以跨平台(ios,安卓都能用),而且开发难度也不是很大.安卓本身的webview是基于webkit浏览器的,而如果用过支付宝或者微信其实就能发现,他们肯定是进行了很多改进,把网页一下拉就能看到xxx提供技术支持. 下面这段代码介绍了webview的简单用法,以及如何通过安卓通过post方法去访问一个webview. import

js 与 ios Android交互

一.android 交互 1.js调用webview 在android API Level 17及以上的版本中,就会出现js调用不了android的代码,这是版本兼容的问题,需要在调用的方法上面加一个注解:@JavascriptInterface,这个注解需要导入一个包:import android.webkit.JavascriptInterface; public void onCreate(Bundle savedInstanceState) { //给js设置调用的方法 this.app

atitit.js 与c# java交互html5化的原理与总结.doc

atitit.js 与c# java交互html5化的原理与总结.doc 1. 实现html5化界面的要解决的策略1 1.1. Js交互1 1.2. 动态参数个数1 1.3. 事件监听2 2. sendNSCommand2 2.1.1. --------nativeswing的实现2 3. 注册js 事件后台函数3 4. 后台c#3 5. 参考4 1. 实现html5化界面的要解决的策略 1.1. Js交互 Firefox与Chrome也提供了external对象,例如,他们都默认的实现了ope

Js与WebView交互需注意的

一.Java代码 1.webView的设置 webView.getSettings().setDefaultTextEncodingName("utf-8"); webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("http://shaoml.oicp.net/mt_app_int/weixin/around.jsp?mobile=" + phone + "&token