WKUserContentController WKUserContentController对象提供了一种向WebView发送JavaScript消息或者注入JavaScript脚本的方法 添加WKScriptMessageHandler...任何一个与正在加载的网页拥有相同WKSecurityOrigin的URL加载是一个First Party加载。First Party网页可以访问彼此的脚本和数据库资源。...路径文件路径下创建一个Store并返回 + (instancetype)storeWithURL:(NSURL *)url; 当创建时，Store的内容从该路径下的所有编译过的规则列表加载 新增的变化，...通常，显示名称是来自资源的SecurityOrigin的域名加后缀。...选择此值将自动包含添加到这个常量的任何新的检测类型 WKURLSchemeHandler 用来处理WebKit无法处理的URL Scheme类型的资源 开始加载特定资源时调用 - (void)webView
客户服务器模型 App 通过一个 URL 向特定的主机发送一个网络请求加载需要的资源。...处理的软件会随着开发语言的不同而不同，如 Java 的 Tomcat、PHP 的 Apache、.net 的 IIS、Node.js 的 JavaScript 运行时等） 处理软件针对本次请求进行分析，分析的内容包括请求的方法、路径以及携带的参数等...互联网上的每个资源都有一个唯一的 URL，通过它能找到该资源。 URL 的基本格式协议://主机地址/路径。...URLSession 使用步骤 创建请求资源的 URL。 创建 URLRequest，设置请求参数。...: "文件夹名", ofType: nil)获取资源路径。
： baseURL：会影响网页加载过程中 css、js、图片等资源文件的相对路径，并不会影响绝对路径。...readAccessURL 参数：允许访问的资源路径，如果是在 Bundle 中加载本地 HTML，则需要设置该 HTML 所在的 Bundle 路径，路径设置好后，该目录在 WKWebView 中被视为沙盒目录...通过 [WKWebView loadRequest:] 方法访问 index.html 的话，仅能访问当前页面所在目录下的相对路径资源，无法访问目录外的资源，例如上例中，index.html 仅能访问...通过 [WKWebView loadData:] 和 [WKWebView loadHTMLString:] 方法仅能加载当前HTML内容，无法加载资源文件，这种加载模式下，由于不需要访问其他路径下的资源...添加用户脚本 addUserScript 使用 addUserScript 方法来添加 js 脚本。
1.2.1 OC 拦截 JS 超链接操作请求 HTML 文件中，需要调用 OC 方法的标签，添加超链接属性（超链接协议可自定义）。...全路径字符串 NSString *absoluteString = requestURL.absoluteString; // 端口后的相对路径 NSString *path...前提当然是自己协商一致 URL 数据格式。...JS 中注入 OC 类 向 JS 注入 OC 类，需要引入 框架，使用 JSContext 向 JS 中注入 OC 类。...2.3.1 拦截 JS 超链接请求 HTML 文件中，需要调用 OC 方法的标签，添加超链接属性（超链接协议可自定义）。
:[self _defaultConfiguration]]; 2.WKWebViewConfiguration类说明 wkwebview初始化时的参数配置 websiteDataStore wkwebview...，还是选择使用本地读取 3.请求内置包(bundle)页面 内置包就是bundle包，就是将bundle包路径拼接好，然后请求沙盒方式读取页面 自定义了一个url头部"bundle://"，在请求的时候做...]; 5.离线资源包的一点思考 利用离线加载这一特性，我们可以通过服务端资源打包成本地资源包（zip包），通过服务器比对方式下载资源包，解压后放在本地指定的沙盒目录，随后通过wkwebview加载本地方式打开页面...对于资源包要求 前后端分离（目前前端基本如此） 资源包加载需要相对路径，大部分在线资源都是通过cdn的，如何通过cdn去转换成资源包并打包进来，也是一个挑战，或者直接用cdn包也是可以的 要考虑降级策略...，如果加载失败，资源包出现问题，如何快速替换最新资源包或者回滚。
:(NSString *)string baseURL:(NSURL *)baseURL; 这个方法需要将httml文件读取为字符串，其中baseURL是我们自己设置的一个路径，用于寻找html文件中引用的图片等素材...例如： - (void)loadLocalHTMLFileToUIWebView{ // 获取本地html文件文件路径 NSString *localHTMLPageName = @"myPage...baseURL:(NSURL *)baseURL; 这个方式使用的比较少，但也更加自由，其中data是文件数据，MIMEType是文件类型，textEncodingName是编码类型，baseURL是素材资源路径...5.最后将webView添加到界面 [self.view addSubview:webView]; self.webView = webView; webView.delegate...[webView loadRequest:request]; //5.添加到视图 self.webView = webView; [self.view addSubview
编辑切换为居中 添加图片注释，不超过 140 字（可选） 这里有个常用 App URL Scheme 汇总：URL Schemes 收集整理 在手机里面打开这个页面后点击这里，就会提示你是否要打开微信。...在 iOS 里面又需要区分 UIWebView 和 WKWebView 两种 WebView： 编辑切换为居中 添加图片注释，不超过 140 字（可选） WKWebView 是 iOS8 之后出现的...所以基于上面的例子，我们可以把域名和路径当做通信标识，参数里面的 func 当做指令，callback_id 当做回调函数，其他参数当做数据传递。对于不满足条件的 http 请求不应该拦截。..."taobao")) { // 拿到调用路径后解析调用的指令和参数，根据这些去调用 Native 方法 return true; } } iOS 端 在 iOS...这种方式不依赖拦截，主要是通过 WebView 向 JS 的上下文注入对象和方法，可以让 JS 直接调用原生。
为userContentController添加ScriptMessageHandler，并指明name //WKUserContentController *userContentController...，第三方会要求参数按照ASCII码从小到大排序。...但不同的是，这一过程中有较多的网络进度的回调工作以及各类网络协议管理，比如资源缓存协议、HSTS 协议、cookie 管理协议等。...WebContent进程：主要负责页面资源的管理，包含前进后退历史，pageCache，页面资源的解析、渲染。并把该进程中的各类事件通过代理方式通知给 UIProcess。...UIProcess进程：主要负责与 WebContent 进行交互，与 APP 在同一进程中，可以进行 WebView 的功能配置，并接收来自 WebContent 进程的各类消息，配合业务代码执行任务的决策
WKWebView 这里添加了三个代理，代理方法会在下面实现。...: self.url) webView.load(request) // 不能用 webView.loadHTMLString(self.url.absoluteString, baseURL: self.url..., decidePolicyFor ...` 的方法是一样的，只是带的参数不一样，如果实现了，就必须调用`decisionHandler`进行响应的处理，否则报错。...(message.body)") default: break } } } 这边贴一下JS那边的实现 // 向APP...document.querySelector('h1').style.color = "red" } // 接受APP传过来的参数
当然随之而来的会有一些小问题，比如：WKWebView是一个独立进程，那么它的请求就无法通过系统的URL SYSTEM了，你无法像UIWebView一样，可以通过NSURLProtocol来拦截所有的请求...”协议的“userContentController”方法，这是从JavaScript向Native发送消息的主要渠道，当然如果你用协议的方式也不是不行，至少这个协议的实现它帮你完成了JavaScript...在初始化WKWebView时你还需要配置一个Conf，这个Conf中你可以添加一个属性，这个属性在JavaScript这一边你可以通过window.webkit.messageHandlers.icepyApp...发送消息就更不用说了，直接调用“evaluateJavaScript”方法注入就好，唯一的优势是在于，发送的消息可以先转成JSON，然后字符串化当参数传入到一个函数里，而你的函数真实接收到的是一个对象，...我们知道WKWebView是一个独立的进程，它的请求都不经过系统的URL SYSTEM，我们很难拦截它，该怎么办？
WKWebView 下使用WebViewJavascriptBridge来实现JS 与OC 的互相调用,也是通过拦截URL来实现的。...navigationDelegate`方法，就需要添加下面这行。...第四步，在HTML添加关键的js HMTL 里在调用Native 功能之前，要先添加一个js 方法，然后主动调用一次该方法。...执行wvjbscheme://__BRIDGE_LOADED__，然后在WKWebView 的navigationDelegate方法中拦截该URL ，然后往HMTL中注入js。...= _webView) { return; } NSURL *url = navigationAction.request.URL; __strong typeof(_webViewDelegate
JSB 原理 要实现双向通信自然要依次实现 Native 向 Web 发送消息和 Web 向 Native 发送消息。...Native 向 Web 发送消息 Native 向 Web 发送消息基本原理上是在 WebView 容器中动态地执行一段 JS 脚本，通常情况下是调用一个挂载在全局上下文的方法。...').innerHTML = 'I am from native'; 敏锐同学到这一步其实就已经知道我们在日常使用 JSB 时客户端是如何调用前端 JS 代码了，我们在刚刚的静态 html 文件中添加几行...字符串长度有限制 性能一般，URL request 创建请求有一定的耗时（Android 端 200-400ms） 实践案例 同样用一个简单的 Demo2 来看一下如何使用拦截式实现 Web 向 Native...参数，若 URL scheme 是 prek 则认为该请求是一个来自 Web 的 JSB 调用： - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction
) { window.location.href = url } } } 在需要的页面调用：..../appBridge' appBridge(token, url, device) 这里我查了一下上面的两个方法： MessageHandler WKWebView 有一个内容交互控制器，该对象提供了通过...JS 向 WKWebView 发送消息的途径。...语法： /* * name: 设置 MessageHandler 的第二个参数，iOS 那边来接收 * messageBody: 发送的内容 */ window.webkit.messageHandlers...window.WebViewJavascriptBridge.send(data, function (responseData) { console.log('请求结果：' + responseData) }) 未经允许不得转载：w3h5-Web前端开发资源网
JSB 原理 要实现双向通信自然要依次实现 Native 向 Web 发送消息和 Web 向 Native 发送消息。...，WebView 容器采用 WKWebView 内核） ?...敏锐同学到这一步其实就已经知道我们在日常使用 JSB 时客户端是如何调用前端 JS 代码了，我们在刚刚的静态 html 文件中添加几行 JS 代码： function evaluateByNative(...字符串长度有限制 性能一般，URL request 创建请求有一定的耗时（Android 端 200-400ms） 实践案例 同样用一个简单的 Demo2 来看一下如何使用拦截式实现 Web 向 Native...参数，若 URL scheme 是 prek 则认为该请求是一个来自 Web 的 JSB 调用： - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction
加载渲染链路优化之道 从访问 URL 到页面呈现，整个链路可以做优化的思路。 ?...加载 CDN是内容分发网络，主要用于缓存静态资源。CDN服务商一般会在全国各地部署服务，而且带宽很大，这样访问CDN的资源时就可以有较短的路由路径，而且带宽也比较大，访问比较快。...用户交互相关事件绑定（比如页面scroll，用户左右滑动等），添加参数{passive:true}，减少浏览器事件等待。...添加passive参数，就告诉浏览器不用等待了。...，WKwebview不会）。
举例 SDGHybrid.http.get() // 向业务服务器拿数据 SDGHybrid.http.post() // 向业务服务器提交数据 SDGHybrid.http.sign() // 计算签名...WKWebView 网络请求拦截 方法一（Native 侧）： 原生 WKWebView 在独立于 app 进程之外的进程中执行网络请求，请求数据不经过主进程，因此在 WKWebView 上直接使用 NSURLProtocol...body 参数丢失。...在离线包场景，由于页面的资源不需要 body 数据，所以离线包可以正常使用不受影响。但是在 H5 页面内的其他 post 请求会丢失 data 参数。...，在将 post 请求对应的 HttpBody 添加上，这样就完成了一次 post 请求的处理。
② UIWebView 和 WKWebView 的区别 WKWebView 更快（占用内存可能只有 UIWebView 的1/3~1/4），没有缓存，更为细致地拆分了 UIWebViewDelegate...shouldStartLoadWithRequest:navigationType WKNavigationDelegate - webView:didStartProvisionalNavigation: 已开始加载页面，可以在这一步向view...中添加一个过渡动画 UIWebViewDelegate - webViewDidStartLoad: WKNavigationDelegate - webView:didCommitNavigation...webview.navigationDelegate = self self.view.addSubview(webview) //加载网页 webview.loadRequest(NSURLRequest(URL...当然如果你不需要 JS 交互，直接用一个 frame 来初始化 WebView，去掉 configuration 参数就好了。
向此次肺炎疫情中逝世的同胞表示哀悼。 ?...); } } iOS 的 WKWebview 可以根据拦截到的 URL Scheme 和对应的参数执行相关的操作。...剩下的交给客户端自己去拦截相同的方法，识别相同的参数，进行自己的处理逻辑即可实现多端表现一致。如： alert("确定xxx?"...注入 API 基于 Webview 提供的能力，我们可以向 Window 上注入对象或方法。JS 通过这个对象或方法进行调用时，执行对应的逻辑操作，可以直接调用 Native 的方法。...成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。
configuration:(WKWebViewConfiguration *)configuration 这个方法就够用了，第一个参数不多说，按照通常的使用就可以，第二个参数是对webView的配置对象...最后通过addSubView添加视图到父视图上面就可以了，这个时候应该是没有加载任何页面的webView。...限制用户选择以及长按操作 ---- 有时候，我们会遇到一个比较头疼的问题，我们不想让用户长按选择或者有弹窗，那么这时我们需要添加两行代码来禁止这一系列行为。...添加进度条 ---- 构建 @property (nonatomic, strong)UIProgressView *progressView; //添加进度条 self.progressView..."] withImage:messageDic[@"img"]]; } //申请试用，带一个参数的情况 if ([message.name isEqualToString:@"mjxApply
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
