Question

我搜索了网络，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);
}

有没有人做过这样的事情或能给我指点？

Answer 1

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

这是对象标签

的定义

HTML嵌入式对象元素（）表示外部资源，可以将其视为图像，嵌套浏览上下文，或者由插件处理的资源。

阅读有关浏览背景的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，看看您还有哪些功能供您使用。

Answer 2

我了解到“访问来源政策”是个问题。由于我加载的页面不是本机的并且托管在服务器上，因此无法注入phonegap“inappbrower”插件脚本。无论我使用getElementById方法。我已经读过这里有很多，但不幸的是，这暂时不在我的范围之内。

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

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

希望这有助于某人。

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

2 个答案: