如何使用 InAppBrowser 从外部页面打开所有链接？答案

【问题标题】：How do I open all links from an external page using InAppBrowser?如何使用 InAppBrowser 从外部页面打开所有链接？
【发布时间】：2015-05-15 14:53:56
【问题描述】：

我搜索了网络、youtube 和社区，但没有解决这个问题。我有一个正在使用 Phonegap Build 开发的应用程序。我在我的 config.xml 中包含了 InAppBrowser 插件，并且可以与应用程序中的链接一起正常工作。我正在寻找的解决方案或方向是一种包含外部网站上的链接以使用 InAppBrowser 打开的方法。外部页面上的链接是动态的，但我可以添加 onClick 事件。这就是我的动态链接的样子。

<a href="#" onclick="openInAppBrowserBlank(\'' . get_permalink($post->ID) . '\');>Read More</a>

这是我在使用 Firebug 查看它生成的 html 时看到的一个链接。

<a onclick="openInAppBrowserBlank('http://website.com/uncategorized/post-one/');" href="#">Read More »</a>

这是我用来在我的应用中加载外部页面的脚本。

<script type="text/javascript">
 function expage() {
   $("#display").html('<object data="http://website.com" style="position: relative; right:0; top:30px; width:100%; height:100%; overflow:auto; overflow-y:hidden; padding:0px;" />');
} 
</script>

这是显示外部页面的 DIV。

<div id="display" class="card1" style="position:fixed; top:15px; left:0px; width:100%; height:93%;"></div>

这些是附加到我的页面的脚本。 Phonegap 将“phonegap.js”构建到我的应用程序中。

<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index2.js"></script>
<script type="text/javascript">
  app.initialize();
</script>

这是“index2.js”

var ref = null;
function openInAppBrowserBlank(url)
{
    try {
ref = window.open(url,'_blank','location=no'); //encode is needed if you want to send a variable with your link if not you can use ref = window.open(url,'_blank','location=no');
     ref.addEventListener('loadstop', LoadStop);
     ref.addEventListener('exit', Close);
}
catch (err)    
{
    alert(err);
    }
}
function LoadStop(event) {
     if(event.url == "http://website.com/x.php"){
        // alert("fun load stop runs");
         ref.close();
     }    
}
 function Close(event) {
     ref.removeEventListener('loadstop', LoadStop);
     ref.removeEventListener('exit', Close);
}

有没有人做过类似的事情或者可以给我指导？

【问题讨论】：

我认为您需要提供更多信息。例如，您的问题中缺少 openInAppBrowserBlank 的代码。
我不熟悉 Phonegap 构建到我的应用程序中的代码。我在上面添加了一些脚本。我应该在这篇文章中添加哪个文件？
放置一个您在 firebug 中看到的生成链接的示例
devconcept 你有什么建议吗？

标签： javascript hyperlink external phonegap-build inappbrowser

【解决方案1】：

我认为问题在于您正在使用对象标签加载外部页面。这与您当前的页面具有不同的浏览上下文，因此您的 openInAppBrowserBlank 函数和其他脚本不存在。

这是对象标签的定义

HTML Embedded Object Element () 表示外部资源，可以将其视为图像、嵌套的浏览上下文或由插件处理的资源。

阅读here 了解浏览上下文。不同的浏览上下文也用于 iframe 和框架集中的框架。

所以最简单的解决方案是使用像这样具有无缝属性的 iframe

<iframe seamless="seamless">

此布尔属性指示浏览器应以使其看起来是包含文档的一部分的方式呈现内联框架，例如通过在该文档中指定的样式之前应用应用于包含文档的 CSS 样式，并通过在父浏览上下文中打开包含文档中的链接（除非其他设置阻止此操作）。

这样，iframe 内页面的浏览上下文将与您的页面的浏览上下文相同，并且您的脚本很可能正常工作。

我故意使用“最有可能”，因为您需要记住，嵌套页面的设计是假设它将在他自己的浏览上下文中执行，并且您将在另一个页面上运行它，因此可能会发生意外行为。

还有其他解决方案，例如进行 ajax 调用并填充任何标签的内容，例如检索内容的容器 div 或使用没有无缝属性的 iframe 来加载页面并将脚本注入其中，但这是更多很棘手，也会有副作用，所以要注意。

在所有解决方案中，您可能会有冲突的样式或脚本，因此如果是这种情况，请选择没有无缝的 iframe 并仅注入所需的功能。

{编辑}

做一些研究后，我发现了一篇文章和一些 SO 帖子，其中包含有关如何在 iframe 中注入脚本的示例。这些是链接

http://jaspreetchahal.org/how-to-inject-javascript-into-an-iframe/

inject a javascript function into an Iframe

Injecting Javascript to Iframe

当 iframe 引用没有 CORS 限制的页面（即来自不同域的请求）时，这些示例非常有效。在这种情况下，您必须使用 window.postMessage 在您的页面和 iframe 内的外部页面之间进行通信，因为 api 对窗口和位置对象的访问非常有限（想象一下那里的安全隐患）。

检查跨域脚本 API 访问部分中的 mozilla docs 以查看哪些功能可供您使用。

【讨论】：

这完全有道理。我在周末进行了研究，并阅读了一些涵盖您所推荐内容的文章。很高兴知道这一点。我尝试在函数中使用它... console.log(document.getElementById('wp').contentWindow.document.getElementById('my-app').onclick = function() {alert ("Hello World!") ;}); ...将代码注入到内部和 iframe 的元素中。适用于父页面，但 iframe 中没有响应。您认为这与访问源策略有关吗？父页面是原生的，加载到我的 iframe 中的页面托管在我的服务器上。
您是否使用ripple 来测试您的应用程序？在 chrome 中很容易发现被 cors 阻止的请求，如果您的浏览器使用 OPTIONS 动词而不是 GET 向您的页面发出请求，则只需查看您的网络选项卡，您很可能正在使用 cors 并且在那里您可以查看从服务器发送的响应代码。如果没有，您可以使用 Fiddler 之类的工具来拦截呼叫。至于代码的注入，我将编辑我的答案，以提出一些你如何做的例子。
我没有考虑过使用 Ripple。大多数情况下，我一直在使用 Phonegap Build 构建我的应用程序，并在我的移动设备上对其进行测试，看看是否发生了任何事情。但是，我发现使用 Ripple 和 Chrome 来查看我的浏览器是否正在向我的页面发出请求更有意义。感谢您编辑的信息。非常感谢。
如果您直接在设备上工作，您可以使用 weinre 打印调试信息并进行一些测试 people.apache.org/~pmuellr/weinre/docs/latest 。如果有帮助，记得将答案标记为已接受。

【解决方案2】：

我了解到“访问源策略”是问题所在。由于我正在加载的页面不是本机页面并且托管在服务器上，因此无法注入 phonegap“inappbrower”插件脚本。不管我是否使用 getElementById 方法。我已经读到这附近有一些地方，但不幸的是，这暂时超出了我的范围。

通过数组加载数据并对元素进行样式化，我能够创建另一个解决方案。我通过在我的服务器上托管带有数组的 JS 并在链接中添加了“onclick=inappbrowserblank”方法来做到这一点。

这就像一个魅力，但不幸的是现在是一个手动过程。

希望这对某人有所帮助。

【讨论】：