一、前言 近日,有朋友问我关于WKWebView与JS的交互问题,可我之前一直使用的是UIWebView,也不曾做过WKWebView的交互啊!...接下来大家一块学习下WKWebView是怎么实现原生代码和JS交互的。...-> Void) 五、WKWebView与JS的交互使用 首页创建html文件,代码如下: JS交互 body {...做交互调用产生了划时代的影响。
WKWebView 适用于iOS8之后的系统 引用 #import 1.OC调用JS NSString *jsmethod = [NSString stringWithFormat...:@"mymethd(\"%@\")",data]; //data(NSDate)为要传给js的数据 [self.wkWebView evaluateJavaScript:jsmethod...completionHandler:^(id _Nullable result, NSError * _Nullable error) { // result js返回值 }];...2.JS调用OC (1)遵循代理 @interface SharecgiteViewController ()...交互,在页面推出的时候,调用 WKUserContentController *controller = self.wkWebView.configuration.userContentController
WKWebView 这里添加了三个代理,代理方法会在下面实现。...) { print("进程被终止: webViewWebContentProcessDidTerminate") } } 3、WKUIDelegate: 一些UI展示和交互需要App这边来做...,交互的结果却得反馈给JS: extension MOWKWebViewController: WKUIDelegate { func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage...: 客户下单啦~"); } catch (e) { console.log(e); } } 二、与JS的交互 其实上面的代理实现的已经差不多了...交互了: // MARK: - 加载完成 func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)
看网上关于它的博客也是有许多的了,从各个方面总结一下这个WKWebView看网上说它主要是为了和JS做好交互产生的,我们也会相应的尝试一下。就先从它基本的说起!...一:和UIWebView相比它的不同处 1:和JS更好的做交互,也支持H5的一些新特性 2:加载进度条(下面会演示) 3:性能高,加载变得更快更可靠 二:从加载一张网页开始 1:使用这个WKWebView...的简单交互 先看看 WKUIDelegate里面的代理方法都是用来做什么的,我们一个一个的解释这几个代理方法; // 创建方法,这个就不在多说了,重点放在下面几个 -(nullable WKWebView...2.JS端调用alert时所传的数据可以通过message,打印message信息读取出JS端给你的信息。...// 在原生得到结果后,需要回调给JS,通过completionHandler 回调给JS // completionHandler 回调的参数和返回值都是空 -(void)webView:(WKWebView
前言 由于目前UIWebView 已经被抛弃了,因此推荐使用WKWebView的WKScriptMessageHandler实现iOS与JS交互 WKWebView是Apple在iOS8推出的Webkit...:方法可以执行JS代码。...但只有在整个webView加载完成之后调用此方法才会有响应 2.1 执行JS iOS使用WKWebView的-evaluateJavaScript:completionHandler:方法执行拼接好的JS...see also iOS利用JSExport协议实现与JS的交互 & android 和js的交互 https://blog.csdn.net/z929118967/article/details/77963082...同层渲染不仅解决了原生组件的层级问题,同时也让原生组件有了更丰富的展示和交互的能力。
https://blog.csdn.net/u010105969/article/details/53541088 之前已经写过一个篇OC与JS交互的博客了(博客地址:http://blog.csdn.net.../u010105969/article/details/53189934),可当时用来展示网页的控件是UIWebView,而在iOS8之后苹果推出了WKWebView,此控件也能用来显示网页,可与JS的交互却与...如果点击第四个conform按钮会调用方法: // 确认框 - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage...如果点击最后一个input按钮会调用方法: // 输入框 - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt...注意:在利用UIWebView展示网页的时候我们如果要想与JS进行交互那么我们就得获取JS代码中的方法名,而我们在使用WKWebView的时候就不用了。
WKWebView WKWebView是现代 WebKit API 在 iOS 8 和 OS X Yosemite 应用中的核心部分。...WKWebView与js交互 所谓轻应用,简单的来说就是原生应用集成了html页面入口,还能通过js与native实现交互,例如:通过js调用native封装好的viewController实现扫描与对应反馈功能...与native交互代码> - (void)webView:(WKWebView*)webView decidePolicyForNavigationAction:(WKNavigationAction...fromWebView:webView]; }else{ //forward } decisionHandler(WKNavigationActionPolicyAllow); } 处理js...发送的请求,如果以某个jsbridge为scheme的则为交互信息 - (void)dispatchNotification:(NSString*)notificationString fromWebView
,需要说明的是由于我们使用的是需要和JS进行交互的webView,所以需要在ViewController中声明两个代理WKNavigationDelegate,WKScriptMessageHandler...,前者是用来处理webView加载视图的各种情况的,后者是主要用来处理交互事件的。...document.documentElement.style.webkitUserSelect='none';" completionHandler:nil]; 值得注意的是,这里其实是通过调用webView直接使用JS...重点:JS交互 ---- WKWebView的交互方法和之前的UIWebView其实本质上没有什么太大的差别,都是通过发送方法名找到对应的方法执行对应的操作。...self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"mjxLogin"]; } 对监听的处理的代理 //用来接收js
与Swift交互起一个名字:callbackHandler,WKWebView给Swift发消息的时候会用到 // 此句要求实现WKScriptMessageHandler协议 configuration.userContentController.add...WKWebView调用JS: func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)...JS调用WKWebView: func userContentController(_ userContentController: WKUserContentController, didReceive...与Swift交互起一个名字:callbackHandler,WKWebView给Swift发消息的时候会用到 // 此句要求实现WKScriptMessageHandler协议...交互" view.addSubview(webView) webView.loadHTMLString(html, baseURL: nil)
LeeWkWebView 起因 之前lz公众号写个关于UIWebView的JS与App通信的文章,但是最新iOS审核规定需要替换掉UIWebView使用WKWebView才可以过审。...但是之前有大量UIWebView交互的地方,怎么办?...于是根据原有的交互经验抽离出来了LeeWKWebView……当然了希望大家能够喜欢,多多提意见 [3hhn7sh2so.png] 使用 pod 'LeeWkWebView',:git=>'git@github.com...:skeyboy/LeeWkWebView.git' 之前不完善有了简单的介绍,今天就完善一下 为了方便js调用识别我们为我们的句柄起了名字--npc mWbHelper = [WKWebViewHelper...啦 我们以加载本的一个HTML为例 NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; WKWebView
,客户端与 Web端的交互也越来越频繁。...,并分别结合 UIWebView以及 WKWebView做了一下交互总结。...分别使用 UIWebView 以及 WKWebView 实现效果如下: JavaScriptCore 类库里面有12个类(还有两个是负责导入相关类的头文件以及一个关于WebKit的宏定义);在基本的交互过程中...没关系,WKWebView提供给了我们非常便利的交互,不详细说了!...这样子,基于JavaScriptCore的UIWebView以及WKWebView交互就算圆满完成啦!
5,WKWebView可以和JS直接互调函数,交互更方便;而UIWebView则需要依靠WebViewJavaScriptBridge第三方库来协助处理与JS的交互,实现起来较繁琐。...WKWebView的用法 ? WKWebView API WKWebView对象可以显示交互式Web内容,例如应用内浏览器。你可以使用WKWebView类将web内容嵌入到你的应用程序中。...用户可以在网页视图中交互地选择内容的粒度级别。 WKSelectionGranularity。枚举类型,交互式创建和修改选择的粒度。...7,本文主要介绍了如何通过WKWebView来展示一个页面,其实,WKWebView不仅仅只有展示的功能,它还能够和Native进行交互。而且iOS中的web应用,起重点就是与Native进行交互。...我们可以通过JSCore或者JSBridge来在native中执行JS代码,并且在JS中去回调Native的相关函数。 现在很火热的跨平台以及热修复技术,都是基于JS与Native通信来实现的。
// 导航代理 @property (nullable, nonatomic, weak) id navigationDelegate; // 用户交互代理...WKUserContentController内容交互控制器 我们要通过JS与webview内容交互,就需要到这个类了,它的所有属性及方法说明如下: // 只读属性,所有添加的WKUserScript都在这里可以获取到...WKUserContentController是用于与JS交互的类,而所注入的JS是WKUserScript对象。...它的所有属性和方法如下: // JS源代码 @property (nonatomic, readonly, copy) NSString *source; // JS注入时间 @property (...*)webView NS_AVAILABLE(10_11, 9_0); // 调用JS的alert()方法 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage
问题最近用WKWebView读取PDF文件出现字体异常、电子图章不显示的问题,后来查找很多解决方案,最后决定用PDF.js的方式来实现解决方案参考https://www.jianshu.com/p/ded81b392d4d...demo能接入PDF,但部分字体在真机上还是接入异常,后来使用gulp generic-legacy生成generic-legacy稳定包之后,对Safari进行兼容后,终于能修复字体异常的问题PDF.js.../www.jianshu.com/p/fd5f248a8158https://www.jianshu.com/p/ded81b392d4dhttps://github.com/mozilla/pdf.js
问题 最近用WKWebView读取PDF文件出现字体异常、电子图章不显示的问题,后来查找很多解决方案,最后决定用PDF.js的方式来实现 解决方案 参考https://www.jianshu.com/...能接入PDF,但部分字体在真机上还是接入异常,后来使用 gulp generic-legacy 生成generic-legacy稳定包之后,对Safari进行兼容后,终于能修复字体异常的问题 PDF.js...}]; }); demo地址:https://github.com/freesan44/PDFJSReader 参考: https://github.com/mozilla/pdf.js...www.jianshu.com/p/fd5f248a8158 https://www.jianshu.com/p/ded81b392d4d https://github.com/mozilla/pdf.js
OC传值给JS的代码: // 页面加载完成之后调用 - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *...传值需要再网页加载完成之后进行,当初我传值给JS的是用户的登录状态,JS需要拿到用户的登录状态去进行收藏的操作。...JS中的方法,里面的参数是传递给JS的数据。...当初在做这块的时候iOS这边打印的一直是null,写JS的哥们也一直说没有接收到数据,(他说我的代码有问题,我说他的代码有问题),最后才发现JS接收到的数据不能输出打印,只能进行判断。...再次提醒:这种OC给JS传参数的方式实际就是OC调用JS方法,传的值是JS方法的一个参数。 好了,博客很短,代码很简单,希望帮到那些在找OC传值给JS方法的童鞋们。
1.OC与JS交互之UIWebView 创建一个UIWebView 并加载 _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20,...调用OC 一,js里面直接调用方法 方法1 ?...的时候给JS传的参数 [function callWithArguments:@[a,b,c]]; 2.OC与JS交互之WKWebView 创建一个WKWebView 并加载 self.webView...config.preferences.minimumFontSize = 10; //是否支持JavaScript config.preferences.javaScriptEnabled = YES; //不通过用户交互...evaluateJavaScript:@"setname('张三')" completionHandler:nil]; //此处 setname为JS定义的方法名, 内部 ‘张三’为传给JS的参数。
上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用,这一篇来介绍一下WKWebView 又是如何通过WebViewJavascriptBridge...WKWebView 下使用WebViewJavascriptBridge来实现JS 与OC 的互相调用,也是通过拦截URL来实现的。...下面开始介绍WKWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用。...执行js 的API 与 UIWebView 有些不同,WKWebView 用的是{-evaluateJavaScript: completionHandler:},这个API 不会立刻返回执行结果,js...后的回调:%@",responseData); }]; } WKWebView 通过WebViewJavascriptBridge实现js 与Native 的交互,到这里就已经完成了。
PS:大家都知道现在一个安卓项目里面有一些比较悬的画面,比如说一个炫酷的导航页,或者抽奖大转盘等,这些可以用安卓自身的知识来实现,也可以用JS来实现这些动画,然后安卓直接拿来用,这期间也是免不了有一些交互...,今天这篇文章就是让大家知道,怎么使用安卓与html联动,并且实现交互,这就用到了webview,webview可以嵌入很多页面,比如说webview.loadUrl("http://www.baidu.com...com.android.htmlfileprovider/sdcard/test.html"); // webview.addJavascriptInterface(this,"android");//添加js... 这是测试版本js与android交互 <!
获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置js...可用,参数:布尔值 在判断是否支持js的时候,不要用alert(),默认不起作用,可以先用document.write()测试 调用WebView对象的addJavascriptInterface(obj..., interfaceName)方法,添加js接口,参数:Object对象,String接口名称(这个对象在js中的别名) 定义一个内部类MyJavascript 定义一个方法showToast(),显示吐司...交互 new MyJavascript().showToast("111"); websettings.setJavaScriptEnabled(true);...交互 显示吐司 <button onClick="showProgressDialog
领取专属 10元无门槛券
手把手带您无忧上云