正文 

当前位置： 首页 > 知识 >

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

     2023-03-08     19

关键词：

【中文标题】使用 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 提供的文件就会加载。

【讨论】：

使用 QJSEngine 从 JavaScript 访问 Qt API

】使用QJSEngine从JavaScript访问QtAPI【英文标题】：AccessingQtAPIfromJavaScriptwithQJSEngine【发布时间】：2016-10-0116:57:29【问题描述】：我正在使用QJSEngine使应用程序可编写脚本。我希望JavaScript端能够修改用户界面。我现在的主要问题是从... 查看详情

如何使用 Javascript 访问 SVG 元素

】如何使用Javascript访问SVG元素【英文标题】：HowtoaccessSVGelementswithJavascript【发布时间】：2011-02-1418:34:01【问题描述】：我正在搞乱SVG，我希望我可以在Illustrator中创建SVG文件并使用Javascript访问元素。这是Illustrator启动的SVG文件（... 查看详情

使用 Javascript 访问 iFrame 中的 DOM

】使用Javascript访问iFrame中的DOM【英文标题】：AccessDOMinsideiFrameusingJavascript【发布时间】：2021-01-3017:49:03【问题描述】：我正在尝试从我的主页访问DOM元素并想要更新CSS。我使用以下内容；varmyIframeContainerEl=$(\'#myIframeContainerEl\');my... 查看详情

使用 javascript 访问 nativescript 磁力计数据

】使用javascript访问nativescript磁力计数据【英文标题】：nativescriptmagnetometerdataaccesswithjavascript【发布时间】：2018-11-1117:53:07【问题描述】：如何在不使用原生API的情况下通过NativeScript访问iOS或Android上的磁力计数据？只是想获得一... 查看详情

使用 JavaScript 访问 iPhone 指南针

】使用JavaScript访问iPhone指南针【英文标题】：accessingiPhonecompasswithJavaScript【发布时间】：2011-02-0314:05:25【问题描述】：知道是否可以使用JavaScript在Safari中访问iPhone指南针？我看到howtheGPScanbeaccessed，但我不知道指南针。【问题讨... 查看详情

线程 1：访问外部链接时从 Web 视图发出 SIGABRT 信号

...信息：应用程序的唯一目的是显示包含网站的webView使用WKWebVie 查看详情

javascript使用参数对象访问参数(代码片段)

查看详情

iOS/Javascript - 如何使用 Javascript 访问设备上的图像

】iOS/Javascript-如何使用Javascript访问设备上的图像【英文标题】：iOS/Javascript-HowtoaccessimagesondeviceusingJavascript【发布时间】：2012-10-0402:24:45【问题描述】：我正在开发一个原生ios应用程序，并尝试设置javascript以将捆绑资源添加到网... 查看详情

使用 Qt runJavaScript 函数访问 Javascript 类对象

】使用QtrunJavaScript函数访问Javascript类对象【英文标题】：AccessJavascriptclassobjectwithQtrunJavaScriptfunction【发布时间】：2020-08-0616:43:37【问题描述】：由于我是javascript/HTML的新手，最近我使用QtQWebEngineView开始了一个项目。一段时间以... 查看详情

使用 htmlunit -Java 访问 Javascript 生成的 html

】使用htmlunit-Java访问Javascript生成的html【英文标题】：AccessinghtmlgeneratedbyJavascriptwithhtmlunit-Java【发布时间】：2011-02-2701:33:49【问题描述】：我正在尝试测试一个使用javascript呈现大部分HTML的网站。使用HTMLUNIT浏览器，您将如何访... 查看详情

如何使用 Javascript 访问动态表单元素 id

】如何使用Javascript访问动态表单元素id【英文标题】：HowtoAcessDynamicFormElementsidUsingJavascript【发布时间】：2017-05-2418:36:58【问题描述】：我正在使用PHP和Javascript创建动态表单元素，我可以使用PHP访问动态表单元素值。但我的要求... 查看详情

尝试使用javascript访问div的css属性[重复]

】尝试使用javascript访问div的css属性[重复]【英文标题】：tryingtoacesscsspropertiesofadivusingjavascript[duplicate]【发布时间】：2013-02-0114:55:56【问题描述】：我尝试使用javascript访问div的宽度，但无论我设置什么，它每次都在打印NaN。我是j... 查看详情

是否可以使用 JavaScript 访问所有移动功能？

】是否可以使用JavaScript访问所有移动功能？【英文标题】：CanallmobilefunctionalitiesbeaccessedusingJavaScript?【发布时间】：2018-11-0711:47:31【问题描述】：我对使用JavaScript构建移动应用程序很感兴趣。我想知道使用JS是否能让我使用我需... 查看详情

使用 Spring MVC 访问 Javascript 中的模型属性

】使用SpringMVC访问Javascript中的模型属性【英文标题】：AccesstoamodelattributeinJavascriptwithSpringMVC【发布时间】：2019-05-1705:03:59【问题描述】：我在Javascript中访问模型属性时遇到问题；特别是我有这个控制器：@RequestMapping(value="/dashboa... 查看详情

使用变量键访问 JavaScript 对象中的值

】使用变量键访问JavaScript对象中的值【英文标题】：UsingvariablekeystoaccessvaluesinJavaScriptobjects【发布时间】：2020-03-1418:10:22【问题描述】：代码：functionupdateDashboardData()$.getJSON("includes/system/ajaxDataInterface.php",recordcount:1,function(dat 查看详情

阻止使用 JavaScript / 其他方法访问页面？

】阻止使用JavaScript/其他方法访问页面？【英文标题】：BlockaccesstopageusingJavaScript/othermethod?【发布时间】：2012-06-0923:46:19【问题描述】：一些背景我有一个tumblog。我还有一个疯子的前女友。该人一直痴迷于访问我的帖子，考虑到... 查看详情

使用 javascript 访问 `draggable` 属性

】使用javascript访问`draggable`属性【英文标题】：Accessthe`draggable`attributewithjavascript【发布时间】：2013-03-2606:14:31【问题描述】：所以问题是：你怎么能做到这一点？我想将draggable属性更改为"false"，这样之前可拖动的元素将... 查看详情

使用 Javascript 从 Web 应用程序访问设备指南针

】使用Javascript从Web应用程序访问设备指南针【英文标题】：AccessdevicecompassfromwebappwithJavascript【发布时间】：2011-08-2014:40:16【问题描述】：是否可以通过网络应用在iphone/android设备上使用Javascript访问指南针？我已经在网上找了几... 查看详情