Phonegap android：如何从本地 html 页面打开外部 url？答案

【问题标题】：Phonegap android: how to open external url from local html pages?Phonegap android：如何从本地 html 页面打开外部 url？
【发布时间】：2013-02-27 08:32:23
【问题描述】：

我正在尝试从本地 html 文件打开外部 url。例如，我正在使用 super.loadUrl("file:///android_asset/www/index.html");调用本地文件，应用程序在 DroidGap 提供的浏览器中打开它。但是，外部网址存在问题。在 index.html 中，我试图通过图像按钮访问http://www.google.com，并且设备会打开另一个浏览器以显示 www.google.com（在我的设备中，chrome 正在打开以显示页面 www.google.com）。我想让 DroidGap 浏览器在 DroidGap 浏览器中打开外部和本地 url。

【问题讨论】：

标签： android url cordova external local

【解决方案1】：

我实现了这一点，因为我需要相同的解决方案。我假设您已经知道如何加载本地文件，但以防万一......

//By "SomeLocalFile.html" I mean an html file in the /www/ folder of the actual app installation **not** on the server
var ref = window.open('somelocalfile.html', '_blank', 'location=no');

首先将这样的事件侦听器添加到您从中调用 var ref = window.open() 的应用程序的主 js。

ref.addEventListener('loadstart', LoadStart); // in YourMainJs.js

然后在 /www/ 文件夹中的某个位置创建一个名为 closeInAppBrowser.html 的本地文件，碰巧地雷位于 /www/pages/ 中

现在定义 LoadStart 函数，以便在页面开始加载时 LoadStart() 将触发

//I use match(/[^/]+$/g) because I find that matching the file name is just easier than the path.
// This code is place in in YourMainJs.js
fileName = event.url.match(/[^/]+$/g);
if(fileName[0] == "closeInAppBrowser.html"){
    // alert("fun load stop runs");
    ref.close();
}

现在在您将要使用 window.open() 的 SomeLocalFile.html 中，放置一个链接和像这样的 js。

// in SomeLocalFile.html that was called via the window.open()
<a class="close">Close This Window Like A BOSS!</a>

$('.close').click(function(){
    //We use window location cause you can't navigate to any other local file just by using an href in an <a> tag
    //We aslo use ../../ because that is the correct path usage from within InAppBrowser to another local file
    window.location = '../../pages/closeInAppBrowser.html';   
});

现在，当您单击该链接时，它将尝试导航到 closeInAppBrowser.html，这将触发 LoadStart()，它将检查 event.url 文件名是否与“closeInAppBrowser.html”匹配，如果匹配，它将关闭窗口。

我已经对此进行了测试，它可以 100% 工作。如果您有任何其他问题，请告诉我

【讨论】：

【解决方案2】：

您想使用ChildBrowser 插件打开外部网页。然后你想将ChildBrowser.onLocationChange 属性设置为你自己的函数。然后，当此人离开远程页面时，您将收到位置更改通知，以便您可以关闭 ChildBrowser 并导航到新的本地页面。您甚至不需要触摸远程 html 页面。

所以当用户离开远程页面时关闭浏览器：

cb.onLocationChange = function(loc){
    console.log("location = " + loc);
    if (loc != "http://example.com") {
        cb.close();
    }
};

【讨论】：

【解决方案3】：

其实不用使用子浏览器插件，如果升级phonegap到2.3.0或以上，就可以使用InAppBrowser

样本

  var ref = window.open(authorize_url, '_blank', 'location=no');
  ref.addEventListener('loadstart', function() {  me.locChanged(event.url,ref); });

【讨论】：