这时我们想到了 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元无门槛券
手把手带您无忧上云