iOS Webkit，Swift 4和Javascript

将Web嵌入本机应用程序是一种将应用程序快速添加内容的常用方法。 它不仅可以提供支持访问，联系表格，还可以提供用于引导缺少功能的更复杂方法。 Webkit框架允许您将其与Javascript结合使用，以改善用户体验。

从历史上看，iOS允许使用将Web嵌入到UIWebView中。 作为第一种方法，它很方便，它自己处理cookie，但在JavaScript方面却非常有限，主要是因为缺少核心引擎。

Webkit出现了，该框架允许开发人员使用相同的Javascript引擎在其移动应用程序中为Safari提供动力。

为了使用某些Javascript内容测试我们的iOS应用，我将使用一个HTML文件，其中包含非常基本的形式和两个javascript函数：*登录操作，将数据形式转发到本机应用*一种更改标题的方法这页纸

它可能看起来像下面的人

function sendLoginAction() { try { webkit.messageHandlers.loginAction.postMessage( document.getElementById("email").value + " " + document.getElementById("password").value ); } catch(err) { console.log('The native context does not exist yet'); } } function mobileHeader() { document.querySelector('h1').innerHTML = "WKWebView Mobile"; } 

WKWebView可以使用自定义配置进行初始化，包括使用的用户代理，Web视图要使用的数据存储以及用户内容控制器，以最终与Web视图本身关联。 这是我们用来从iOS向Java脚本发送呼叫的方法。

首先，我们需要创建此用户内容控制器并创建我们要处理的用户脚本。

 let contentController = WKUserContentController() let userScript = WKUserScript( source: "mobileHeader()", injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: true ) contentController.addUserScript(userScript) 

文档加载完成后，此代码将注入源代码。 它实际上将执行mobileHeader并通过上述Javascript方法更新h1标题。

然后，我们将使用该控制器实例化Web配置，最后将其提供给WKWebView本身。

 let config = WKWebViewConfiguration() config.userContentController = contentController self.webView = WKWebView(frame: self.view.bounds, configuration: config) 

最后，将我的Web视图添加到主要视图之后，这是我的结果，第一个视图是从Safari加载的。

第二个来自iOS模拟器。

因此，我们可以看到如何从iOS将javascript添加到Web视图以及如何执行它。 现在让我们看看从Javascript到iOS

在这一方面，Webkit的组织良好，已经有一个协议可以自行处理： WKScriptMessageHandler

从Apple文档中：

符合WKScriptMessageHandler协议的类提供了一种用于从网页中运行的JavaScript接收消息的方法。

正是我们需要的。

一旦添加到您的类中，我们将实现它的userContentController来接收从Javascript发送的内容，仅限于我们现在想要的loginAction 。

 func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { if message.name == "loginAction" { print("JavaScript is sending a message \(message.body)") } } 

最后，我们将向此事件添加一个侦听器到先前创建的WKUserContentController中

 contentController.add(self, name: "loginAction”) 

填写表格后，再次在我的iOS模拟器上运行，我终于可以捕获发送回的值。

最后，我们设法将事件从iOS转发到Javascript，也将Javascript返回iOS。 但是，在Webkit周围还有更多发现的方法，它是导航，如何处理其中的加载和cookie，这将在另一篇博客文章中介绍。

在这个团队中，这是基于Xcode 9.1和Swift4的WebKit示例项目，我还将旁边的用作资源的网页也包括在内。

---

最初发布在 http://benoitpasquier.com/ios-webkit-swift-and-javascript/ 。