wkwebview（wkwebview与js交互原理）

本篇文章给大家谈谈wkwebview，以及wkwebview与js交互原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、WKWebView的介绍
• 2、WKWebView梳理
• 3、Swift WKWebview---解决的常见问题

WKWebView的介绍

WKWebView 是现代 WebKit API 在 iOS 8 和 OS X Yosemite 应用中的核心部分。它代替了 UIKit 中的 UIWebView 和 AppKit 中的 WebView，提供了统一的跨双平台 API。

自诩拥有 60fps 滚动刷新率、内置手势、高效的 app 和 web 信息交换通道、和 Safari 相同的 JavaScript 引擎，WKWebView 毫无疑问地成为了 WWDC 2014 上的最亮点。

WKWebview提供了API实现js交互 不需要借助JavaScriptCore或者webJavaScriptBridge。使用WKUserContentController实现js native交互。简单的说就是先注册约定好的方法，然后再调用。

UIWebView  UIWebViewDelegate 这个两个东西是如何在 WKWebKit 中被重构成 14 个类 3 个协议的呢。

1.WKBackForwardList: 之前访问过的 web 页面的列表，可以通过后退和前进动作来访问到。

    WKBackForwardListItem: webview 中后退列表里的某一个网页。

2.WKFrameInfo: 包含一个网页的布局信息。

3.WKNavigation: 包含一个网页的加载进度信息。

    WKNavigationAction: 包含可能让网页导航变化的信息，用于判断是否做出导航变化。

    WKNavigationResponse: 包含可能让网页导航变化的返回内容信息，用于判断是否做出导航变化。

4.WKPreferences: 概括一个 webview 的偏好设置。

5.WKProcessPool: 表示一个 web 内容加载池。

6.WKUserContentController: 提供使用 JavaScript post 信息和注射 script 的方法。

    WKScriptMessage: 包含网页发出的信息。

    WKUserScript: 表示可以被网页接受的用户脚本。

        WKWebViewConfiguration: 初始化 webview 的设置。

7.WKWindowFeatures: 指定加载新网页时的窗口属性。

1.WKNavigationDelegate: 提供了追踪主窗口网页加载过程和判断主窗口和子窗口是否进行页面加载新页面的相关方法。

2.WKScriptMessageHandler: 提供从网页中收消息的回调方法。

3.WKUIDelegate: 提供用原生控件显示网页的方法回调

WKWebView 继承了 握唯UIWebView 大部分的接口，这让 app 来继承 WKWebKit 也简单了许多（同时随着更新 iOS 8 的越来越多这也成为了某种必需）。

有兴趣的同学可以看一下这两个类的 API 区别：

相对于 UIWebView 最大的提升就是数据在可以 app 和 web 内容之间传递。

WKUserScript 允许在正文加载之前或之后注入到页面中。这个强大的功能允许在页面中以安全且唯一的方式操作网页内容。

一个简单的例子如下，弯皮首用户改变背景埋数的用户脚本被插入到网页中：

WKUserScript 对象可以以 JavaScript 源码形式初始化，初始化时还可以传入是在加载之前还是结束时注入，以及脚本影响的是这个布局还是仅主要布局。于是用户脚本被加入到 WKUserContentController 中，并且以 WKWebViewConfiguration 属性传入到 WKWebView 的初始化过程中。

这个样例可以简单扩展为更为高级的页面修改方法，例如去除广告、隐藏评论等，更复杂的样例见此： 让所有出现的”the cloud”变为”my butt” 。

就想在 Safari 审查元素 功能中的 console.log 能在调试终端打印信息一样，网页中的信息也可以通过调用这个函数被传到 app 里：

window.webkit.messageHandlers.{NAME}.postMessage()

这个 API 真正神奇的地方在于 JavaScript 对象可以_自动转换_为 Objective-C 或 Swift 对象。

Handler 的名字可以通过 WKScriptMessageHandler 协议中的 addScriptMessageHandler() 接口函数设置：

于是当通知进入 app 的时候，比如说在页面中创建一个新对象，相关信息就可以这样传递：

添加用户脚本来对 web 事件监听并用 Message Handler 将信息传回 app。

同样的方法也可以用来收集页面信息用于 app 的页面展示或数据分析。

例如，如果某人要针对 NSHipster.com 做一个特别的浏览器，就可以加一个能够呼出相似文章列表的按钮：

WKWebView梳理

二者都是基于 JavaScriptCore 实现，它是一个在 WebKit 中提供 JavaScript 引擎的框架，苹果称之为 Nitro 。WKWebView高效原因之一是支持 JIT（Just In Time） 技术，而UIWebView不支持。

WKWebView - API梳理

WKWebView - Cookie管理

WKWebView 白屏的原因在于 WebContent Process 的 crash，当 WKWebView 在单独进程占用较大内存时，就会导致白屏，此时 WKWebView.URL 会变成 nil，此时调用 reload 方法刷新已经失效。

解决方案

a. WKNavigtionDelegate 代理

当 WKWebView 总体内存占用过大，页面即将白屏的时候，系统会调用上面的回调函数，我们在该函数里执行[webView reload](这个时候 webView.URL 取值尚不为 nil）解决白屏问题。在一些高内存消耗的页面可能会频繁刷新当前页面，H5侧也要做相应的适配操作。

b. 检测 webView.title 是否为空

并不是所有H5页面白屏的时候都会调用上面的回调函数，比如，在一个高内存消耗的H5页面上 present 系悄棚统相机，乱运樱拍照完毕后返回原来页面的时候出现白屏现象（拍照过程消耗了大量内存，导致内存紧张，WebContent Process 被系统挂起），但上面的回调函数并没有被调用。在WKWebView白屏的时候，另一种现象是 webView.titile 会被置空, 因此，可以在 viewWillAppear 的时候检测 webView.title 是否为空来 reload 页面。

综合以上两种方法可以解决绝大多数的白屏问题。

iOS WKWebView与JS交互：

WKWebView - 拦截网络请求 离线哗丛化

[img]

Swift WKWebview---解决的常见问题

WKWebview--透明背景，自适应高度，禁用长按选择和缩放：

// WebView didFinish loading

func webView(_webView:WKWebView, didFinish navigation:WKNavigation!) {

1. 自适应高度：

        webView.evaluateJavaScript("document.body.scrollHeight") {[weakself] result,_in

            if let tempHeight:Double= resultas?Double{

                self?.maximumHeightConstraint.constant=CGFloat(tempHeight)

            }

        }

2. 禁用缩放氏空功能：清睁

        let jsForbiddenZooming = "var script = document.createElement('meta');script.name = 'viewport';script.content='width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no';document.getElementsByTagName('head')[0].appendChild(script);"

        webView.evaluateJavaScript(jsForbiddenZooming, completionHandler:nil)

3. 禁用长按选择和复制功能：

        webView.evaluateJavaScript("document.documentElement.style.webkitTouchCallout='none';", completionHandler: nil)

        webView.evaluateJavaScript("document.documentElement.style.webkitUserSelect='none';", completionHandler: nil)

    }

########################

/歼正瞎/ viewDidLoad()

override func viewDidLoad() {

        super.viewDidLoad()

1. 透明背景

        webView.isOpaque = false

        webView.backgroundColor = .clear

        webView.scrollView.backgroundColor = .clear

2. 解决 webview内容下移的问题：

        if #available(iOS 11.0, *) {

            webView.scrollView.contentInsetAdjustmentBehavior = .never

        }else{

            self.automaticallyAdjustsScrollViewInsets = false

        }

    }

关于wkwebview和wkwebview与js交互原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。