如何在 Cordova / Phonegap 的远程 html 文件中包含本地脚本？
Posted
技术标签:
【中文标题】如何在 Cordova / Phonegap 的远程 html 文件中包含本地脚本？【英文标题】：How to include a local script in remote html file in Cordova / Phonegap? 【发布时间】：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: *”标头，但它仍然不起作用。
【问题讨论】：
我放弃了。可能是某种防止远程页面包含本地脚本的安全措施。 【参考方案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 并由此解决了混合内容问题
【讨论】：
以上是关于如何在 Cordova / Phonegap 的远程 html 文件中包含本地脚本？的主要内容，如果未能解决你的问题，请参考以下文章
如何在推送插件 PhoneGap/Cordova 4.0 中替换 window.plugin（已弃用）？
如何在 file:/// 协议 (Cordova/Phonegap) 下使用来自 dojo 的自定义构建
如何在 android webview 中实现 phonegap/cordova？