这时我们想到了 Cordova ，Cordova 提供了一组与设备相关的 API ，是早期 JS 调用原生代码来实现原生功能的常用方案。...注入 API 基于 Webview 提供的能力，我们可以向 Window 上注入对象或方法。JS 通过这个对象或方法进行调用时，执行对应的逻辑操作，可以直接调用 Native 的方法。...在 4.4 以前，通过 loadUrl 方法，执行一段 JS 代码来实现。在 4.4 以后，可以使用 evaluateJavascript 方法实现。...:@"ZcyJsBridge(ev, data)"] JSBridge 的使用 如何引用 由 H5 引用 在我司移动端初期版本时采用的是该方式，采用本地引入 npm 包的方式进行调用。...这样有利于保持 API 与 Native 的一致性，但是缺点是在 Native 注入的方法和时机都受限，JS 调用 Native 之前需要先判断 JSBridge 是否注入成功 使用规范 H5
除了代理方法和WKWebView的使用不太一样，关于WKWebView更详尽的讲解和用法，还是自行搜索学习，本文重点还是讲解如何实现JS 与OC 互相调用。...1.创建WKWebView，加载本地HTML。 WKWebView的创建有几点不同： 1.初始化多了个configuration参数，当然这个参数我们也可以不传，直接使用默认的设置就好。...如果在HTML中要使用alert等弹窗，就必须得实现UIDelegate的相应代理方法。 3.在iOS 9之前，WKWebView加载本地HTML会有一些问题。...这时候就是OC 调用JS 方法的场景。 WKWebView 提供了一个新的方法evaluateJavaScript:completionHandler:，实现OC 调用JS 等场景。...4.WKWebView中使用弹窗 在上面提到，如果在WKWebView中使用alert、confirm 等弹窗，就得实现WKWebView的WKUIDelegate中相应的代理方法。
前言 由于目前UIWebView 已经被抛弃了，因此推荐使用WKWebView的WKScriptMessageHandler实现iOS与JS交互 WKWebView是Apple在iOS8推出的Webkit...的-evaluateJavaScript:completionHandler:方法来实现 WKWebView的-evaluateJavaScript:completionHandler:方法可以执行JS...但只有在整个webView加载完成之后调用此方法才会有响应 2.1 执行JS iOS使用WKWebView的-evaluateJavaScript:completionHandler:方法执行拼接好的JS...iOS 端使用 WKWebView 进行渲染的，WKWebView 在内部采用的是分层的方式进行渲染，它会将 WebKit 内核生成的 Compositing Layer（合成层）渲染成 iOS 上的一个...WKWebView 这么做是为了可以让 iOS 上的 WebView 滚动有更流畅的体验。
JS中的firstClick,在拦截到的url scheme全都被转化为小写。 2.html中需要设置编码，否则中文参数可能会出现编码问题。..."]; 再然后定义好JS需要调用的方法，例如JS要调用share方法： 则可以在UIWebView加载url完成后，在其代理方法中添加要调用的share方法： - (void)webViewDidFinishLoad...')"; [context evaluateScript:textJS]; 重点： stringByEvaluatingJavaScriptFromString是一个同步的方法，使用它执行JS方法时...官方推荐使用WKWebView的evaluateJavaScript:completionHandler:代替这个方法。...+ WebViewJavascriptBridge iOS下JS与OC互相调用（七）--Cordova 基础 iOS下JS与OC互相调用（八）--Cordova详解+实战 剩下的几篇未完待续。
configuration:(WKWebViewConfiguration *)configuration 这个方法就够用了，第一个参数不多说，按照通常的使用就可以，第二个参数是对webView的配置对象...然后是对WKWebView的基本设置， self.webView.scrollView.bounces = NO; self.webView.navigationDelegate = self; 设置了取消弹性和代理...='none';" completionHandler:nil]; 值得注意的是，这里其实是通过调用webView直接使用JS代码实现的操作，如果有需要还可以实现别的功能，而且这个方法最后有一个执行完毕之后的...重点：JS交互 ---- WKWebView的交互方法和之前的UIWebView其实本质上没有什么太大的差别，都是通过发送方法名找到对应的方法执行对应的操作。...//用来接收js调用本地方法的拦截器 -(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage
在开发iOS版的直播卖货系统源码过程中，如何在html上展示商品详情，下面小编将从WKWebView入手，来介绍下实现过程。...加载完成的代理方法中更改webView的frame - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified..., _goodListView.bottom, _window_width, [result doubleValue]);//将WKWebView的高度设置为内容高度 //更改背景scrollview的滑动范围...的代理方法中拦截图片添加的点击方法，可使用HZPhotoBrowser来展示图片 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction...：%@",navigationAction.request.URL.absoluteString); 以上，就是在开发直播卖货系统源码时，利用WKWebView展示html格式的商品详情的过程。
代理方法 添加引用 import WebKit 代理 WKNavigationDelegate 页面加载状态的回调 代理方法 func webView(_ webView: WKWebView, didStartProvisionalNavigation..., withError error: Error) { } 代理 WKUIDelegate 处理JS弹窗的回调 代理方法 //消息弹窗 func webView(_ webView: WKWebView...-> Void) { completionHandler("哈哈"); } 交互 Swift调用JS方法 self.webview.evaluateJavaScript("loadData('123'...objc func backBarButtonClick(){ if(self.webview.canGoBack){ self.webview.goBack() } } 在之前的页面加载完成回调中重新设置导航栏...123')") { (response, error) in } } 替换页面中的引用的JS/CSS为本地文件 暂时没有什么好的解决方法 没有像android可以拦截替换的方法
注入 API 基于 Webview 提供的能力，我们可以向 Window 上注入对象或方法。JS 通过这个对象或方法进行调用时，执行对应的逻辑操作，可以直接调用 Native 的方法。...WKWebview 提供了 window.webkit.messageHandlers 方法，支持 iOS 8.0 及以上系统。UIWebview 在几年前常用，目前已不常见。...在 4.4 以前，通过 loadUrl 方法，执行一段 JS 代码来实现。在 4.4 以后，可以使用 evaluateJavascript 方法实现。...:@"ZcyJsBridge(ev, data)"] JSBridge 的使用 如何引用 由 H5 引用 在我司移动端初期版本时采用的是该方式，采用本地引入 npm 包的方式进行调用。...这样有利于保持 API 与 Native 的一致性，但是缺点是在 Native 注入的方法和时机都受限，JS 调用 Native 之前需要先判断 JSBridge 是否注入成功 使用规范 H5 调用 Native
方法报错 2、WKNavigationDelegate： 这个代理在加载的各个过程中都有回调，可以根据项目需求，做响应的处理： 前面三个 `func webView(_ webView: WKWebView...其实上面的代理实现的已经差不多了，下面补充并说明一下： 1、evaluateJavaScript的使用 1)、首先我们在`WKNavigationDelegate`的`didFinish`方法回调后，...就可以使用`evaluateJavaScript`跟JS交互了： // MARK: - 加载完成 func webView(_ webView: WKWebView, didFinish navigation...{ print("加载完成: didFinish") // 调用js方法(把标题h1设置成红色) webView.evaluateJavaScript("changeHead()...2)、这里在app的原生页面写了两个button调用JS的方法/获取信息 func setupButtons() { let baseHeight = (navigationController?.
} // 调用Swift方法 function responseSwift() { // 这里的...{ // sayHello()是JS的方法 webView.evaluateJavaScript("sayHello('WebView你好！')")...{ (result, err) in print(result, err) } } WKScriptMessageHandler：JS 调用 Swift 时需要用到协议中的一个方法来...{ // 调用JS方法 webView.evaluateJavaScript("sayHello('WebView你好！')")...// Swift方法，可以在JS中调用 func userContentController(_ userContentController: WKUserContentController,
通过执行函数evaluateJavaScript:completionHandler:，我们可以传递app端中的数据给webview，并触发html脚本函数的调用，从而响应app的行为。...2、webview如何调用app端的函数呢？ 在html的脚本中添加iframe对象，通过设置iframe的src属性，可成功触发WKWebview中的代理方法调用。...webView:decidePolicyForNavigationAction:decisionHandler: 常见的方式就是在脚本函数中设置iframe的src属性值，触发WKWebview的代理函数调用...， 我们可以在代理方法中拦截请求，首先iframe的src的值也就是我们自定义的scheme，通过对该scheme的判断来得知我们想干什么，从而去调用app中对应的函数。...除了可以在自定义scheme中传递我们需要的参数外，我们可以在html中的脚本中把数据储存好，通过evaluateJavaScript:completionHandler:来调用脚本函数来返回需要的参数
WebViewJavaScriptBridge 使用一个不可见的 iFrame 来触发消息传递, 应该是为了兼容 UIWebView 和 WKWebView。...几个参数 kBridgeLoaded "bridge_loaded" 这个是加载 WebViewJavaScriptBridge 的消息，在第一次加载的时候原生会收到这个消息.收到这个消息后，原生把...JS 调用原生(以 WKWebView 为例) callHandler => _doSend 设置 iFrame 的 src 属性 WKWebView 代理方法- (void)webView:(WKWebView...，执行injectJavascriptFile方法，把 WebViewJavascriptBridge_JS 里面的代码注入到 WebView 中 如果是客户端注册的消息，执行方法WKFlushMessageQueue...先判断是否有 callbackId，如果有就生成一个回调的 block，如果没有就直接通过消息里面的 handlerName 拿到本地注册的 handlerBlock，执行 block。
时下app分以下几种技术选型 Webapp，框架有cordova，ionic等 Hybrid，即Native+h5方式 React Native, weex方向 纯Native，这个没啥好说的 flutter...在WebviewClient里override一个方法： @Override public boolean shouldOverrideUrlLoading(WebView view,...$mount('#app') 复制代码 总结 在ios上不要使用UIWebview，使用WkWebview。 android要注意webview内存泄漏问题。...前端要控制打包体积，不推荐用webpack，因为会生成大量的webpack的封装代码。 推荐使用rollup轻量级前端工程化打包，不会生成多余的js代码。...推荐使用多页模式，Native端通过pushwindow等方法，把跳转权交给Native端。
场景需求 单例类ThemeConfig的一个BOOL类型的属性isNight决定是否夜间模式。 某设置页面，通过按钮的事件改变该属性isNight的值。...WKWebView网页通过注册并实现KVO方法，监听isNight值的变化，以切换网页背景颜色。...，放到事件源方法中去（实现KVO方法监听，或者UIButton添加的事件） #pragma mark - KVO - (void)observeValueForKeyPath:(NSString *)keyPath...判断 //采用上述拟解决方案3可实现 } 为初次进来能根据历史设置切换颜色，放到网络加载完成的代理方法中，先判断模式，再响应改变颜色。...- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{ //先判断是否应该切换颜色
随着摒弃了对iOS老系统的支持，项目也开始逐步开始转向WKWebView，本想着新系统应该能填一些WKWebView的坑，结果发现还是还是坑不断，这次在iOS12又遇到一个神坑。...为了验证下，我在WKWebView的delegate方法webView: didFinishNavigation:里打印customUserAgent和通过js方法获取的userAgent，结果发现两者真的是不一样的...userAgent的方法在iOS 12是不生效的，猜测原因应该是一旦实例化一个WKWebView并且调用了evaluateJavaScript: 更新其userAgent不生效。...这里需要换一种方式来设置userAgent了。 全局更改的话可以在AppDelegate里面把customAgent写到UserDefault里面。...webview.customUserAgent = agent + " customAgent" } } 总结：WKWebView虽然性能比UIWebView更好，但是在一些细节处理上，还是需要注意的
引言 富文本编辑器的应用场景：编辑商品详情 预览： 设计思路：编辑器基于WKWebview实现，Editor使用WKWebview加载一个本地editor.html文件，Editor使用evaluateJavaScript.../75214212 base64字符串与图片的互转 1.1 加载本地html 本地html <!...WKWebView中需要针对不同操作系统进行相关方法的重写。...替换为空 UIWebBrowserViewMinusAccessoryView->WKScrollView->WKWebView 去掉WKWebView键盘自带的工具条:修改browserView的inputAccessoryView...实现，Editor使用WKWebview加载一个本地editor.html文件https://download.csdn.net/download/u011018979/85675638 editorView4WKWebView
WKWebView的使用 前言 最近项目中的UIWebView被替换为了WKWebView，因此来总结一下WKWebView的使用。...示例Demo：WKWebView的使用 本文将从以下几方面介绍WKWebView： 1、WKWebView涉及的一些类 2、WKWebView涉及的代理方法 3、网页内容加载进度条的实现 4、JS...和OC的交互 5、本地HTML文件的实现 一、WKWebView涉及的一些类 WKWebView：网页的渲染与展示 注意： #import //初始化...，设置处理接收JS方法的代理，代理遵守WKScriptMessageHandler，实现捕捉到JS消息的回调方法，详情可以看第一步中对这两个类的介绍。...文本编辑偏好设置.png 详情请前往我的Github：WKWebView的使用 如果我WKWebView使用的总结没帮到你，你也可以看看下面几篇文： https://www.jianshu.com/p
今天就在这里记录一下WKWebView的基本使用。 Webview的使用，通常包含以下几个部分：浏览器的基本设置，浏览器的各种回调，浏览器中js如何调用原生方法。...WKWebView的设置 WKWebView的主要设置项都在configuration成员中（比如是否允许浏览器手指缩放，h5的浏览器能否自动播放等）这些都属于浏览器本身的设置项。...在此列举几项及其作用，由于类目繁多，会有遗漏，真正需要使用时，可以在xcode的help中寻找，查阅。...拦截url 此方法的本质是，js会尝试加载某个URL，客户端在加载前拦截这个URL，通过解析这个URL识别它的内容，调用相应的原生方法，并阻上浏览器加载这个URL。...contentController苹果官方提供的js调用原生方法的类。它的使用方法是： ...
端调用alert函数时，会触发此代理方法。...// JS端调用alert时所传的数据可以通过message拿到 // 在原生得到结果后，需要回调JS，是通过completionHandler回调 self.showNoticeText(message...// 通过message可以拿到JS端所传的数据 // 在iOS端显示原生alert得到YES/NO后 // 通过completionHandler回调给JS端 let alertView...-> Void) { // JS端调用prompt函数时，会触发此方法 // 要求输入一段文本 // 在原生输入得到文本内容后，通过completionHandler回调给JS let...UIAlertController.Style.alert) alertTextField.addTextField { (textField:UITextField) in //设置
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
