如何在 Cordova / Phonegap 的远程 html 文件中包含本地脚本？答案

【问题标题】：How to include a local script in remote html file in Cordova / Phonegap?如何在 Cordova / Phonegap 的远程 html 文件中包含本地脚本？
【发布时间】：2017-12-03 18:20:18
【问题描述】：

我有一个 iOS Cordova/Phonegap 项目，它从 Internet 加载 html 页面。如果我上传cordova.js 和所有插件然后在html 页面中包含cordova.js，这将有效。然而，由于这些文件已经在应用程序中，让人们下载它们似乎是一种浪费。我正在尝试在远程 html 中包含本地文件，但它似乎没有加载。我该怎么做？

我在 www 有一个本地脚本 test.js

alert("test");

我得到了它的路径

[[NSBundle mainBundle] pathForResource:@"test" ofType:@"js" inDirectory:@"www"];

看起来有点像

/var/containers/Bundle/Application/E31EA51E-7ED0-4D30-90FC-57ACBF3B3DA5/MyApp.app/www/test.js

我将文件包含在远程 html 中

<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' gap://ready file: data:">
<script src="file:///var/containers/Bundle/Application/E31EA51E-7ED0-4D30-90FC-57ACBF3B3DA5/MyApp.app/www/test.js" type="text/javascript"></script>

但是，脚本永远不会加载。

编辑：我在 http 页面中添加了“Access-Control-Allow-Origin: *”标头，但它仍然不起作用。

【问题讨论】：

我放弃了。可能是某种防止远程页面包含本地脚本的安全措施。

标签： javascript ios cordova phonegap

【解决方案1】：

面对同样的问题，我认为在iOS 11中使用“WKURLSchemeHandler”拦截你的请求将解决它。

【讨论】：

【解决方案2】：

如果您使用的是 UIWebView，那么使用 NSURLProtocol 子类非常容易，它可以拦截您的所有网络请求并完成您自己的工作（在您的情况下，接受 http://*/test.js 并返回文件内容作为响应）。

但是，如果你使用的是 WKWebView，NSURLProtocol 将不起作用，并且最新的 WKURLSchemeHandler 也无法拦截 http/https 请求。可能设置一个嵌入式 http 服务器是要走的路。

【讨论】：

【解决方案3】：

这可以使用解决 ios 上混合内容问题的文件插件的 PR 来完成：apache/cordova-plugin-file#296 修复版本位于：https://github.com/guylando/cordova-plugin-file

如果您在 webview 上加载远程站点 https://example.com 则它允许使用 url 访问本地文件：https://example.com/cdvfile/bundle/www/cordova.js 而不是 cdvfile://localhost/bundle/www/cordova.js 并由此解决了混合内容问题

【讨论】：