如何将Cordova InAppBrowser用于HostedWebApps？

Question

I have a website with 2 mobile-apps displayed with Cordova, and they works really great. 我有一个网站，其中有两个与Cordova一起展示的移动应用程序，它们的工作效果非常好。 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). 当用户触发外部链接时，他退出应用程序并且没有任何可能返回App ... （除了关闭并重新打开）。

I have installed inappbrowser according to this tutorial . 我已根据本教程安装了inappbrowser 。 Sounds very simple but not working... 听起来很简单，但没有工作......

Console : 安慰：

cordova plugin add cordova-plugin-inappbrowser

Link (supposed to trigger InAppBrowser - not working) : 链接（应该触发InAppBrowser - 不工作）：

 <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 . 我记得，我的应用程序使用名为Hosted Web App的技术显示。 And maybe it's what InAppBrowser does not work : we are already in a webbrowser ?! 也许这就是InAppBrowser不起作用的地方： 我们已经在网络浏览器中了？

I will snip my config & js code bellow, here's the tutorial of Microsoft who helped me on the App setting . 我将剪切我的配置和js代码，这是微软的教程，他帮助我完成了应用程序设置。

Goal : find a way to use InAppBrowser, because we have a lot of external links in our website. 目标：找到一种使用InAppBrowser的方法，因为我们网站上有很多外部链接。

Any ideas please ? 有什么想法吗？ Many thanks ! 非常感谢！

Here is the code : 这是代码：

Index.js 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 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 的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>

Answer 1

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. 从您的问题和跟进，我假设您在yourwebsite.com中加载到您的移动应用程序，然后在yourwebsite.com上，您想要打开外部链接，但在您的应用程序中保留otherwebsite.com。 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. 如果我理解正确，您可以在移动应用程序中加载yourwebsite.com，并通过外部链接将postMessage()发送回您的移动应用程序，打开与inAppBrowser的外部链接。

First, loading in yourwebsite.com within an <iframe> on your mobile app: 首先，在您的移动应用上的<iframe>加载yourwebsite.com：

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

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() : 在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, '*');
});

Back on your mobile app, you need to listen to incoming postMesssage() . 回到您的移动应用程序，您需要收听传入的postMesssage() 。 And trigger inAppBrowser to open the external url that was passed back from yourwebsite.com. 并触发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);

I have not tested this code, but it should get you pointed in the right direction with a few changes. 我没有测试过这段代码，但它应该让你指向正确的方向，并进行一些更改。

如何将Cordova InAppBrowser用于HostedWebApps？

问题描述

1 个解决方案

解决方案1
0 2019-04-03 18:34:23

如何将Cordova InAppBrowser用于HostedWebApps？

问题描述

1 个解决方案

解决方案1 0 2019-04-03 18:34:23

解决方案1
0 2019-04-03 18:34:23