如何在CordedWebApps中使用Cordova InAppBrowser? [英] How to use Cordova InAppBrowser into a HostedWebApps?
问题描述
我有一个网站，其中显示了2个与Cordova一起显示的移动应用程序，它们的运行效果非常好.但是我有一个问题:
I have a website with 2 mobile-apps displayed with Cordova, and they works really great. But I have a problem :
当用户触发外部链接时，他退出了应用程序，没有任何可能返回到应用程序... (关闭并重新打开).
When an external link is triggered by the user, he go out of the application and don't have any possibility to come back on the App... (except close and reopen).
我已经安装了 inappbrowser 根据本教程.听起来很简单，但不起作用...
I have installed inappbrowser according to this tutorial. Sounds very simple but not working...
控制台:
cordova plugin add cordova-plugin-inappbrowser
链接(应该触发InAppBrowser-不起作用):
Link (supposed to trigger InAppBrowser - not working) :
<a href="#" onclick="window.open('http://www.google.com', '_blank', 'location=yes', 'toolbar=yes'); return false;">www.google.com</a>
And I just remembered, that my apps are displayed with a technique named Hosted Web App. And maybe it's what InAppBrowser does not work : we are already in a webbrowser ?!
I will snip my config & js code bellow, here's the tutorial of Microsoft who helped me on the App setting.
目标:找到一个使用InAppBrowser的方法，因为我们网站上有很多外部链接.
请问有什么想法吗? 非常感谢 ！
Any ideas please ? Many thanks !
这是代码:
Index.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
// Here, we redirect to the web site.
var targetUrl = "https://www.website.test/";
var bkpLink = document.getElementById("bkpLink");
bkpLink.setAttribute("href", targetUrl);
bkpLink.text = targetUrl;
window.location.replace(targetUrl);
},
// Note: This code is taken from the Cordova CLI template.
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
App.js
/*global app, $on */
(function () {
'use strict';
/**
* Sets up a brand new Todo list.
*
* @param {string} name The name of your new to do list.
*/
function Todo(name) {
this.storage = new app.Store(name);
this.model = new app.Model(this.storage);
this.template = new app.Template();
this.view = new app.View(this.template);
this.controller = new app.Controller(this.model, this.view);
}
var todo = new Todo('todos-vanillajs');
function setView() {
todo.controller.setView(document.location.hash);
}
$on(window, 'load', setView);
$on(window, 'hashchange', setView);
var onSuccess = function(position) {
var geotext = document.getElementById('geotext');
geotext.textContent = 'Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude;
};
var onError = function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
var button = document.getElementById('geo');
button.addEventListener("click", function(){
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
function myOnDeviceReady() {
if (navigator.connection.type == Connection.NONE) {
navigator.notification.alert('An internet connection is required to continue');
} else {
window.location="https://www.website.test/";
}
}
document.addEventListener("deviceready", myOnDeviceReady, false);
})();
Index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://www.website.test/ https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<title>mysite</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<link rel="stylesheet" type="text/css" href="css/overrides.css" />
</head>
<a id="bkpLink" href="https://www.website.test/" class="mysite_font">mysite</a>
<div class="app">
<img src="img/logo_gradient.png" style="width: 200px;">
<div id="deviceready" class="blink">
<p class="mysite_font event listening">Chargement de l'app...</p>
<p class="mysite_font event received">Chargement...<br/>Merci de patienter quelques instants.</p>
</div>
</div>
<script type="text/javascript" src="scripts/index.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="node_modules/todomvc-common/base.js"></script>
<script src="js/helpers.js"></script>
<script src="js/store.js"></script>
<script src="js/model.js"></script>
<script src="js/template.js"></script>
<script src="js/view.js"></script>
<script src="js/controller.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</html>
推荐答案
从您的问题和跟进情况来看，我假设您是在将yourwebsite.com加载到移动应用中，然后在yourwebsite.com上打开外部链接，但将otherwebsite.com保留在您的应用程序中.如果我理解正确，则可以通过将postMessage()发送回带有外部链接的移动应用程序，在移动应用程序中加载yourwebsite.com并使用inAppBrowser打开外部链接.
From your question and follow ups, I'm assuming you are loading in yourwebsite.com into your mobile app, then on yourwebsite.com you want to open external links but keep otherwebsite.com within your app. If I'm understanding correctly, you can load yourwebsite.com in your mobile app and open external links with inAppBrowser by sending a postMessage() back to your mobile app with the external link.
首先，在移动应用程序的<iframe>内的yourwebsite.com中进行加载:
First, loading in yourwebsite.com within an <iframe> on your mobile app:
<iframe src="https://www.yourwebsite.com">
在yourwebsite.com上，单击外部链接时(在我的示例中，这是. external_url类的任何内容，您很可能必须使用querySelectorAll代替多个链接)，然后使用JS捕获并发送使用postMessage()
On yourwebsite.com, when an external link is clicked (in my example, this anything with . external_url class and you'll most likely have to use querySelectorAll instead for multiple links), capture it with JS and send the href value back to the mobile app with postMessage():
document.querySelector('.external_url').addEventListener('click', function(event) {
event.preventDefault(); // stops the user from loading this link
var data = {'external_url': event.target.href};
window.parent.postMessage(data, '*');
});
回到您的移动应用程序，您需要收听传入的postMesssage().并触发inAppBrowser打开从yourwebsite.com返回的外部URL.
Back on your mobile app, you need to listen to incoming postMesssage(). And trigger inAppBrowser to open the external url that was passed back from yourwebsite.com.
window.addEventListener('message', function(event) {
if (event.data.external_url) {
window.cordova.InAppBrowser.open(event.data.external_url, '_blank', 'location=no');
}
}, true);
我尚未测试此代码，但应通过一些更改使您指向正确的方向.
I have not tested this code, but it should get you pointed in the right direction with a few changes.
这篇关于如何在CordedWebApps中使用Cordova InAppBrowser?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
