如何在 HostedWebApps 中使用 Cordova InAppBrowser？答案

【问题标题】：How to use Cordova InAppBrowser into a HostedWebApps?如何在 HostedWebApps 中使用 Cordova InAppBrowser？
【发布时间】：2019-08-13 16:58:16
【问题描述】：

我有一个网站，其中包含 2 个使用 Cordova 显示的移动应用程序，它们的效果非常好。但我有一个问题：

当用户触发外部链接时，他会退出应用程序，并且没有任何可能再次访问应用程序......（关闭和重新打开除外）。

我已经根据to this tutorial 安装了inappbrowser。听起来很简单，但行不通……

控制台：

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>

我刚刚记得，我的应用程序是使用名为Hosted Web App 的技术显示的。也许这就是 InAppBrowser 不起作用的原因：我们已经在一个网络浏览器中了？！

我将在下面剪切我的配置和 js 代码，here's the tutorial of Microsoft who helped me on the App setting。

目标：找到一种使用 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>

【问题讨论】：

您可以使用postMessage()。在移动应用程序上以<iframe> 加载 website.com。当点击 website.com 上的链接时，website.com 上的 JS 会向父容器（即移动应用）发送一个 postMessage()，然后让您的移动应用通过监听传入的 postMessage() 动作来触发正确的动作。跨度>
嗨@JM-AGMS，感谢您的回答。我们在 HTML 中添加 iFrame，效果很好，但有些网站不允许“内嵌”。你有什么解决方案来解决这个问题吗？谢谢
询问网站所有者是否可以 iframe 他们的网站。否则，我知道的唯一其他方法是首先将网站加载到您使用服务器端代码控制的网站中，然后再加载 iframe。这也有其自身的局限性。
@JM-AGMS 非常感谢您的回答。我们尝试了但这不起作用，我们基本上是一个搜索引擎，所以我们没有与外部推荐人联系。您知道是否有办法将 InAppBrowser 加载到 html <div> 中？这也许是一个解决方案 </div>

标签： javascript cordova ionic-framework cordova-plugins phonegap-plugins

【解决方案1】：

根据您的问题和跟进，我假设您正在将 yourwebsite.com 加载到您的移动应用程序中，然后在 yourwebsite.com 上您想要打开外部链接但将 otherwebsite.com 保留在您的应用程序中。如果我的理解正确，您可以在您的移动应用中加载 yourwebsite.com 并使用 inAppBrowser 打开外部链接，方法是使用外部链接将postMessage() 发送回您的移动应用。

首先，在您的移动应用上的 <iframe> 中加载 yourwebsite.com：

<iframe src="https://www.yourwebsite.com">

在 yourwebsite.com 上，当单击外部链接时（在我的示例中，这是任何带有 . external_url 类的东西，您很可能必须使用 querySelectorAll 来代替多个链接），用 JS 捕获它并发送使用postMessage()将href值返回到移动应用程序：

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);

我还没有测试过这段代码，但它应该能让你指出正确的方向，只需进行一些更改。

【讨论】：

嗨，JM，谢谢你，看起来很聪明。我们会尽快对其进行测试，我会尽快回复您。