如何将Cordova InAppBrowser应用于HostedWebApps？
如何将Cordova InAppBrowser应用于HostedWebApps？
提问于 2019-03-22 16:36:47
我有一个网站，有两个移动应用程序显示与科多瓦，他们的工作真的很棒。但我有个问题：
当用户触发外部链接时，他退出应用程序，并且没有任何可能返回App.(除了关闭和重新打开)。
我已经安装了内浏览器根据到本教程。听起来很简单但不管用..。
控制台：
cordova plugin add cordova-plugin-inappbrowser链接(应该触发InAppBrowser -不工作)：
<a href="#" onclick="window.open('http://www.google.com', '_blank', 'location=yes', 'toolbar=yes'); return false;">www.google.com</a>我想起来了，我的应用程序是用一种名为托管Web应用程序的技术显示的。也许这就是InAppBrowser不起作用的地方：我们已经在网页浏览器中了?!
我将剪掉我的config & js代码，下面是微软在应用程序设置方面帮助我的教程。
目标:找到一种使用InAppBrowser的方法，因为我们的网站中有很多外部链接。
有什么想法吗？非常感谢！
以下是代码：
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>Stack Overflow用户
发布于 2019-04-03 18:34:23
从您的问题和后续行动来看，我假设您正在将yourwebsite.com加载到您的移动应用程序中，然后在yourwebsite.com上您希望打开外部链接，但将otherwebsite.com保存在您的应用程序中。如果我的理解是正确的，您可以在您的移动应用程序中加载yourwebsite.com，并通过发送一个带有外部链接的移动应用程序来打开inAppBrowser的外部链接。
首先，在移动应用程序的yourwebsite.com中加载<iframe>：
<iframe src="https://www.yourwebsite.com">在yourwebsite.com上，当单击外部链接(在我的示例中，这是. external_url类中的任何内容，您很可能不得不对多个链接使用querySelectorAll )，用JS捕获它并将href值发送回带有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。
window.addEventListener('message', function(event) {
if (event.data.external_url) {
window.cordova.InAppBrowser.open(event.data.external_url, '_blank', 'location=no');
}
}, true);我还没有测试过这段代码，但是它应该可以让您通过一些更改来指出正确的方向。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55304135
复制相关文章
相似问题
腾讯云开发者
