Javascript 如何使用InAppBrowser打开外部页面的所有链接？

我搜索过网络、youtube和社区，但没有找到这个问题的答案。我有一个应用程序，我正在开发使用Phonegap构建。我已经在我的config.xml中包含了InAppBrowser插件，可以很好地处理应用程序中的链接。我正在寻找的解决方案或方向是，将外部网站上的链接包括在内，以便使用iApp浏览器打开。外部页面上的链接是动态的，但我可以添加onClick事件。这就是我的动态链接的样子

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

---

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

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

这是对象标记的定义

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

阅读浏览上下文。iFrame和框架集中的框架也使用不同的浏览上下文

因此，最简单的解决方案是使用具有如下无缝属性的iframe

<iframe seamless="seamless">

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

这样，iframe中页面的浏览上下文将与页面和脚本的浏览上下文相同

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

还有其他的解决方案，如进行ajax调用并填充任何标记的内容，例如使用检索到的内容填充容器div，或者使用不带无缝属性的iframe加载页面并将脚本注入其中，但这更为棘手，也会产生副作用，因此请注意

在所有的解决方案中，您可能都有冲突的样式或脚本，因此如果是这种情况，那么就使用没有无缝的iframe，只注入所需的功能

{Edit}

做了一些研究，我发现了一篇文章和一些关于如何在iFrame中注入脚本的例子。这些是链接

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

检查“跨源脚本API访问”部分中的，以查看哪些功能留给您使用

我了解到“访问来源政策”是个问题。由于我正在加载的页面不是本地页面，并且托管在服务器上，因此无法插入phonegap“inappbrower”插件脚本。不管我是否使用getElementById方法。我已经读到关于这件事的报道，但不幸的是，这超出了我目前的范围

我能够通过数组加载数据并设置元素样式来创建另一个解决方案。为此，我在服务器上用数组托管JS，并将“onclick=inappbrowserblank”方法添加到链接中

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

---

希望这对某人有所帮助。

我认为您需要提供更多信息。例如，你的openInAppBrowserBlank的代码与你的问题不符。我不熟悉Phonegap在我的应用程序中构建的代码。我在上面添加了一些脚本。我应该在这篇文章中添加哪个文件？在firebugdevconcept中放置一个生成链接的示例，您有什么建议吗？这完全有道理。我在周末做了调查，读了一些文章，涵盖了你推荐的内容。很高兴知道这一点。我试着在函数中使用它。。。console.log（document.getElementById（'wp'）.contentWindow.document.getElementById（'my-app'）.onclick=function（）{alert（“Hello World！”）；}）。。。将代码注入到iframe内部的元素中。对父页面非常有效，但在iframe中没有响应。你认为这与访问来源政策有关吗？父页面是本机页面，加载到iframe的页面托管在我的服务器上。您是否使用ripple测试应用程序？在chrome中很容易发现被cors阻止的请求，如果您的浏览器使用选项动词向您的页面发出请求，只需查看网络选项卡即可。GET很可能是您正在使用cors，此时您可以查看服务器发送的响应代码。如果没有，你可以使用像Fiddler这样的工具来进行通话交互。至于代码的注入，我将编辑我的答案，以建议您如何实现它的一些示例。我没有考虑使用Ripple。我一直在使用Phonegap Build构建我的应用程序，并在我的移动设备上进行测试，看看是否有什么事情发生。然而，我发现使用Ripple和Chrome来查看我的浏览器是否向我的页面发出请求更有意义。谢谢你编辑的信息。非常感谢。如果您直接在设备上工作，您可以使用weinre打印调试信息并进行一些测试。记住，如果答案有帮助，请将其标记为已接受。

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

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

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

<iframe seamless="seamless">