一、前言 近日,有朋友问我关于WKWebView与JS的交互问题,可我之前一直使用的是UIWebView,也不曾做过WKWebView的交互啊!...接下来大家一块学习下WKWebView是怎么实现原生代码和JS交互的。...//点击确认按钮的相应事件,需要执行completionHandler,这样js才能继续执行 参数 message为 js 方法 alert() 中的 func...('h1')[0].innerText"; //执行JS [webView evaluateJavaScript:js completionHandler:^(id _Nullable...JavaScriptCore 大体是由 4 个类以及 1 个协议组成的: JSContext 是 JS 执行上下文,你可以把它理解为 JS 运行的环境。
创建WKWebView lazy var webView: WKWebView = { // 创建WKPreferences let preferences = WKPreferences...WKWebView调用JS: func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)...JS调用WKWebView: func userContentController(_ userContentController: WKUserContentController, didReceive...view.addSubview(webView) webView.loadHTMLString(html, baseURL: nil) } // 加载完毕以后执行...文件 let filePath = Bundle.main.path(forResource: path, ofType: "js") // js文件内容 var script:
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的使用: 1、初始化 webView初始化:WKPreferences, WKUserContentController -> WKWebViewConfiguration ->... WKWebView 这里添加了三个代理,代理方法会在下面实现。...decisionHandler(.allow) // .allow or .calcel } // MARK: - 服务器重定向 func webView(_ webView: WKWebView...didReceiveServerRedirectForProvisionalNavigation") } // MARK: - 加载完成 func webView(_ webView: WKWebView...交互了: // MARK: - 加载完成 func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)
看网上关于它的博客也是有许多的了,从各个方面总结一下这个WKWebView看网上说它主要是为了和JS做好交互产生的,我们也会相应的尝试一下。就先从它基本的说起!...一:和UIWebView相比它的不同处 1:和JS更好的做交互,也支持H5的一些新特性 2:加载进度条(下面会演示) 3:性能高,加载变得更快更可靠 二:从加载一张网页开始 1:使用这个WKWebView...didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error { NSLog(@"页面加载失败"); } // 接收到服务器重新配置请求之后再执行...www.baidu.com"]) { actionPolicy = WKNavigationActionPolicyCancel; } // 必须这样执行...// 在原生得到结果后,需要回调给JS,通过completionHandler 回调给JS // completionHandler 回调的参数和返回值都是空 -(void)webView:(WKWebView
前言 由于目前UIWebView 已经被抛弃了,因此推荐使用WKWebView的WKScriptMessageHandler实现iOS与JS交互 WKWebView是Apple在iOS8推出的Webkit...:在-viewWillAppear:方法中执行add 监听,在-viewWillDisappear:方法中执行remove 监听。...JS 通过WKWebView的-evaluateJavaScript:completionHandler:方法来实现 WKWebView的-evaluateJavaScript:completionHandler...:方法可以执行JS代码。...但只有在整个webView加载完成之后调用此方法才会有响应 2.1 执行JS iOS使用WKWebView的-evaluateJavaScript:completionHandler:方法执行拼接好的JS
1.导出一个函数 如果使用 加载一个js 文件,如果加载的js 是一个自执行文件,那么会出现错误。...src="/test.js"> 使用标签会进行加载和执行,由于没有加载依赖函数bluer,控制台会出现以下问题: test.js:2 Uncaught....js 是cdn, 可能出现域名不同的情况,会有跨域问题,而且eval执行也会存在某些问题。...并且是在不阻塞 document 的 onload 事件的情况下请求资源。具体是使用。...使用 Image 当preload 方式发现不兼容(caniuse 查询)时,可以使用Image来实现,Image对象的src 属性可以设置资源url,通过这个方式我们可以提前拉取资源。
问题最近用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
/u010105969/article/details/53189934),可当时用来展示网页的控件是UIWebView,而在iOS8之后苹果推出了WKWebView,此控件也能用来显示网页,可与JS的交互却与...在点击前三个按钮的时候会调用方法: // 警告框 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString...如果点击第四个conform按钮会调用方法: // 确认框 - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage...如果点击最后一个input按钮会调用方法: // 输入框 - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt...注意:在利用UIWebView展示网页的时候我们如果要想与JS进行交互那么我们就得获取JS代码中的方法名,而我们在使用WKWebView的时候就不用了。
问题 最近用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
app.js if (that.userInfoReadyCallback) { that.userInfoReadyCallback(res) } 在调用页面里 if () {} else {
然后js 里调用handlerName 这个别名,WebViewJavascriptBridge最终会执行block 里的Native 实现。...data); responseCallback('js执行过了'); }) // 如果要有其他Native 调用的js 功能,在这里按照上面的格式添加。...执行wvjbscheme://__BRIDGE_LOADED__,然后在WKWebView 的navigationDelegate方法中拦截该URL ,然后往HMTL中注入js。...内容 NSString *js = WebViewJavascriptBridge_js(); // 执行Native 的API,实现将js 注入 到HMTL中。...执行js 的API 与 UIWebView 有些不同,WKWebView 用的是{-evaluateJavaScript: completionHandler:},这个API 不会立刻返回执行结果,js
WKWebView WKWebView是现代 WebKit API 在 iOS 8 和 OS X Yosemite 应用中的核心部分。...WKWebView与js交互 所谓轻应用,简单的来说就是原生应用集成了html页面入口,还能通过js与native实现交互,例如:通过js调用native封装好的viewController实现扫描与对应反馈功能...decisionHandler { //允许跳转 decisionHandler(WKNavigationResponsePolicyAllow); return; } 在发送请求之前,决定是否跳转<处理js...fromWebView:webView]; }else{ //forward } decisionHandler(WKNavigationActionPolicyAllow); } 处理js...selfdidReceivedNotificationDictionary:responseDictfromWebView:webView]; } }else{ } } decidePolicyForNavigationAction能读取到由js
不知道大家有没有问过自己,finally方法会在什么时候不执行呢?那我们下面来看看finally到底会不会不执行。...1.finally的含义 finally的真正含义是指从try代码块出来才一定会执行相应的finally代码块。...虚拟机中,执行main方法的线程就是一个非守护线程,垃圾回收则是另一个守护线程,main执行完,程序就中止了,而不管垃圾回收线程是否中止。...而且,即使其进入了try代码块,finally代码块也不会被执行。 总结 finally代码块并非一定执行,在不进入try代码块或者程序被中止时就不会执行。...所以写代码一定不要想当然,可能你认为绝对不会执行的代码,有时候它还真会执行,什么时候我们都要带着批判思维(熟话说:带脑子)进行程序的开发。
UIImageView 会截获touch事件,导致touchesBegan: withEvent:/touchesMoved: withEvent:/touchesEnded: withEvent: 等方法不执行
JS为什么是单线程的? JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。...process1 删除了该dom,而process2 编辑了该dom,同时下达2个矛盾的命令,浏览器究竟该如何执行呢? 2 JS为什么需要异步?...如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。 对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验 3 JS单线程又是如何实现异步的呢? ...是通过的事件循环(event loop),理解了event loop机制,就理解了JS的执行机制。...,而是延迟了一段时间,满足一定条件后才去执行的,这类代码,我们叫异步代码。
JS 是单线程 JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。...这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。 2....于是,JS 中出现了同步任务和异步任务。 同步 前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。...JS中所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。 ...JS执行机制(事件循环) ? ? 4.
JS执行机制 以下代码执行的结果是什么?...console.log(1); setTimeout(function () { console.log(3); }, 0); console.log(2); 1.1 JS 是单线程...单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。...于是,JS 中出现了同步任务和异步任务。 同步 前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。...他们的本质区别: 这条流水线上各个流程的执行顺序不同。 1.3 JS执行机制(事件循环) 1. 先执行执行栈中的同步任务。 2. 异步任务(回调函数)放入任务队列中。 3.
JS 是单线程 JavaScript语言的一大特点就是单线程,也就是说,同-个时间只能做一件事。...这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。 2....于是,JS 中出现了同步任务和异步任务。 同步 前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。...JS中所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。 ...JS执行机制(事件循环) ? ? 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop) .
javascript给人的直观感受是,从上往下执行,但实际上却不是这样的,先看个例子 1. console.log(test); 2. var test = "你好"; 3. console.log(...因为javascript执行时,在同一个作用域内是先编译再执行 编译的时候会编译 function 和 var 这两个关键词定义的变量,编译完成后从上往下执行并向变量赋值 所以执行第1行时, var test...已经执行过了,所以test不会报错,而test2就会报错 需要注意的是,对 var test 执行编译时,只是先定义了 test 这个变量,并不会把 "你好" 这个值赋给test,而是到第2行时才给test...赋值的,这就是为什么第1行的执行结果是 undefined 对于上面的例子,可以这样理解 //先编译 var 定义的变量 1. var test; //编译完成后,从上到下执行代码 2. console.log...//执行结果是"你好" function test() { console.log("你好"); } 模拟编译执行过程 //找到 function 定义的部分进行编译 //以函数名作为变量名,同时用函数赋值
领取专属 10元无门槛券
手把手带您无忧上云