[英]Hybrid app with remote html and local cordova.js
我有一个网站,希望通过混合应用程序在手机上进行增强。 理想情况下,该应用程序将通过http加载远程站点,但在本地加载平台特定的代码。 我试图建立一个Cordova项目来做到这一点,但遇到了很多麻烦。 我的环境是Nexus 7 Android 4.4.4上的Cordova 4.3.1,Cordova Android 3.7.2。 (Google Maps插件适用于Cordova Android <4。)
如果我尝试从http站点加载file:///android_assets/www/cordova.js,则Chrome表示Not allowed to load local resource
。 我试图设置一个本地URL方案,但不知道将什么特定于Android的代码放在哪里。
这是制作混合应用程序的正确方法吗? 有Cordova插件允许从http:加载文件吗?
我还尝试使用iframe并传递消息以指示cordova已启用以及已安装了哪些插件,但是我不想处理让http服务器重新保留本地已经可用的相同js文件的问题。
我还考虑过下载该网站并通过文件进行访问:但是我想尝试访问http资源时也会遇到同样的问题。
我可以使用cordova-plugin-file( cdvfile://
)插件在远程html上加载本地cordova.js
。
将cordova-plugin-file插件添加到您的cordova项目https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/
确认cdvfile URI为cordova.js
使用以下示例代码(例如Android的)
checkCordovaJSPath('file:///android_asset/www/cordova.js'); function checkCordovaJSPath(jsUri) { window.resolveLocalFileSystemURL(jsUri, function success(fileEntry){ console.log("got cordova.js file: " + fileEntry.fullPath); console.log('cordova.js cdvfile URI: ' + fileEntry.toInternalURL()); }); }
cdvfile://localhost
加载cordova.js
。 <script type="text/javascript" src="cdvfile://localhost/assets/www/cordova.js"/>
我不知道这是否是制作混合应用程序的正确方法,但是我通过使用https://github.com/floatinghotpot/cordova-httpd通过http提供资产来使其工作。
在与我添加的应用程序捆绑在一起的本地页面上:
<script type="text/javascript">
document.addEventListener("deviceready", function () {
var httpd = cordova.plugins.CorHttpd;
httpd.startServer({
'www_root': '',
'port': 8080,
'localhost_only': false
}, function (url) {
// if server is up, it will return the url of http://<server ip>:port/
// the ip is the active network connection
// if no wifi or no cell, "127.0.0.1" will be returned.
document.getElementById('url').innerHTML = "server is started: <a href='" + url + "' target='_blank'>" + url + "</a>";
location.replace('http://192.168.0.134:9090/homechooser/beta/#' + JSON.stringify({'cordova.js': url + '/cordova.js'}));
}, function (error) {
document.getElementById('url').innerHTML = 'failed to start server: ' + error;
});
}, false);
</script>
<div id="url"></div>
然后在远程网页上我添加了:
(function () {
var hash;
if (location && location.hash)
try {
hash = JSON.parse(location.hash.substring(1));
} catch (e) {
}
if (hash && hash['cordova.js'])
$.getScript(hash['cordova.js'], function () {
alert("Running cordova.js");
});
})();
现在来看是否可以实际使用科尔多瓦这种方式...
您正在尝试在本地托管的应用程序上加载网址,想象在Native Android App上做同样的事情,您会怎么做? 您将在您的应用程序中放置一个网络客户端或网络浏览器。 但是Cordova / Phonegap已经使用Web浏览器来呈现您的页面。 因此,这就像在网络浏览器中使用网络浏览器一样。
您需要安装InAppBrowser ,这将使您能够加载第三方托管的网页。
样例代码
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
var ref = window.open('http://yourWebPage.com', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });
}
由于混合内容策略,cdvfile解决方案不适用于活动内容(js文件)。 这是使其工作的方法:
对于android:通过将以下代码放入cordova插件的pluginInitialize方法中来禁用混合内容策略:
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
final WebSettings settings = ((WebView)this.webView.getView()).getSettings();
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
https://developer.android.com/reference/android/webkit/WebSettings.html#MIXED_CONTENT_ALWAYS_ALLOW )
然后使用以下命令包含本地cordova.js:
<script src="cdvfile://localhost/assets/www/cordova.js"></script>
对于ios:我向文件插件提交了PR,以解决ios上的混合内容问题:apache / cordova-plugin-file#296固定版本位于: https : //github.com/guylando/cordova-plugin-文件如果您在Webview上加载远程站点https://example.com ,则它允许使用URL: https ://example.com/cdvfile/bundle/www/cordova.js而不是cdvfile:/访问本地文件/localhost/bundle/www/cordova.js从而解决了混合内容的问题
使用以下命令包含本地cordova.js:
<script src="/cdvfile/bundle/www/cordova.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.