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

Question

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

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

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

<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 函数和其他脚本在那里不存在。

这是对象标签的定义

The HTML Embedded Object Element () represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.

阅读here关于浏览上下文的内容。框架集中的 iframe 和框架也使用不同的浏览上下文。

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

<iframe seamless="seamless">

This Boolean attribute indicates that the browser should render the inline frame in a way that makes it appear to be part of the containing document, for example by applying CSS styles that apply to the to the contained document before styles specified in that document, and by opening links in the contained documents in the parent browsing context (unless another setting prevents this).

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

我故意使用 "most likely" 因为你需要记住，嵌套页面的设计假设它会在他自己的浏览上下文中执行，你将运行它在另一个所以意外的行为可能发生。

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

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

{编辑}

通过一些研究，我找到了一篇文章和一些 SO post，其中包含有关如何在 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 对 window 和位置对象的访问非常有限（想象一下那里有安全隐患）。

检查跨源脚本 API 访问部分中的 mozilla docs 以查看留给您使用的功能。

Answer 2

我了解到 "access origin policy" 是问题所在。由于我正在加载的页面不是本机页面，而是托管在服务器上，因此无法注入 phonegap "inappbrower" 插件脚本。不管我是否使用 getElementById 方法。我读到过这个问题，但不幸的是，这暂时超出了我的范围。

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

这很有效，但不幸的是现在是一个手动过程。

希望这对某人有所帮助。

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

How do I open all links from an external page using InAppBrowser?

javascript

external

hyperlink

phonegap-build

inappbrowser