使用 JavaScript 访问 WKWebView 中的本地文件

Posted 2023-03-08

【中文标题】使用 JavaScript 访问 WKWebView 中的本地文件

【英文标题】：Access local files in WKWebView using JavaScript

【发布时间】：2020-12-16 16:00:11

【问题描述】：

我有一个 ios 应用程序，其中部分逻辑是用javascript 编写的。我创建了一个WKWebView，在其中加载了我的初始.js 文件，但是在执行时，它需要从我的本地资源中读取其他文件。问题是我错过了如何实现这一目标的概念。

我尝试将Swift 中的每个单独文件一个接一个地加载到webView 中，但是手动加载的文件太多。 不过，我可能有一个用于Swift 的http 服务器，它可以访问项目文件。我找到了像 this 或 this 这样的解决方案。 一种方法看起来很棒，但即使我这样做了，我仍然无法从我的 Xcode 项目结构中访问文件和文件夹。我创建了一个基本的 http 服务器和一个 DAV 服务器，添加了 GET 处理程序等。 也许我在设置它时做错了，但最后当我创建一个 http server 的对象时，我仍然可以从我的 webView http://192.168.0.11:8080 访问它，所以确保它已正确初始化并正常工作。

【问题讨论】：

在您的应用程序中运行 Web 服务器只是为了提供文件看起来有点矫枉过正（想想您应用程序的不良用户）。不，您不能直接从 WebView 访问项目文件。但是您可以使用evaluateJavaScript 方法将您需要的内容注入页面。一方面，您有一个本机组件（某个类），它可以访问本地文件。在中间你有WKWebView.evaluateJavaScript，它可以将数据发送到 WKWebView 内的页面（使用消息传递或 JavaScript 注入）。然后在网页内你应该能够监听消息，或者读取你注入的变量。

【参考方案1】：

回答我的问题，以便将来对某人有所帮助。我最后使用了this 库。看起来缺少一些配置，因此服务器动态地为所有页面和文件提供服务。我的代码是：

guard let websitePath = Bundle.main.path(forResource: "myFolderNameInProjectStructure", ofType: nil) else  return 
let httpServer = GCDWebServer()
httpServer.addGETHandler(forBasePath: "/", directoryPath: websitePath, indexFilename: nil, cacheAge: 3600, allowRangeRequests: true)
httpServer.addHandler(forMethod: "GET", pathRegex: "/.*\\.html", request: GCDWebServerRequest.self)  (request) in
    return GCDWebServerDataResponse(htmlTemplate: websitePath + request.path, variables: ["variable": "value"])

httpServer.start(withPort: 8080, bonjourName: "MC Local Server")

完成此配置并且服务器在您选择的端口上运行（我的是 8080），您只需在应用程序中打开嵌入式浏览器（例如 WKWebView）并加载

let url = URL(string: "http://localhost:8080/index.html")!
webView.load(URLRequest(url: url))

如果你只是想在连接http服务器的/时总是运行index.html，你可以在httpServer.start()方法之前添加这个配置：

httpServer.addHandler(forMethod: "GET", path: "/", request: GCDWebServerRequest.self)  (request) in
    return GCDWebServerResponse(redirect: URL(string: "index.html")!, permanent: true)

现在在webView 中，只需连接到http://localhost:8080，您作为GCDWebServerResponse 提供的文件就会加载。