Question

我正在尝试从IFrame中打开一个新标签页。我试图使触发的点击事件看起来好像是从IFrame外部启动的。

page.html中

<div>

<iframe src="page1.html">

</iframe>

page1.html

<a href="path_to_other_page" id="link_to_other_page" target="_blank">link</a>

如果用户点击，上面会打开一个新标签，但我需要标签自动打开。

<script>
    parent.window.open( '/path_to_other_page', '_blank' ); //will open a new window rather than tab but could be blocked

    $(function()
    {
        $("#link_to_other_page")[0].click(); //opens in new window   How do make the
        //click appear to be initiated from outside the iframe so a new tab opens?
    });
</script>

问题：如何模拟点击链接，以便点击似乎是从iframe外部启动的？

############

Answer 1

<a href="path_to_other_page" id="link_to_other_page" target="_blank">link</a>

你不需要javascript。

请注意，您无法强制浏览器是打开新窗口还是新选项卡。这是在浏览器（和用户通过浏览器设置）来决定。

Answer 2

首先，主页面和iframed页面都应该存在于同一个域中。

然后，假设您在 iframed 页面中的链接已经具有target="_blank"属性，这是他们需要的（正如之前的答案中已经指出的那样），例如：

<a href="path_to_other_page" id="link_to_other_page" target="_blank">link</a>

...您可以将此脚本添加到主页面：

jQuery(document).ready(function ($) {
    $("#myIframe").load(function () {
        var link = document.getElementById("myIframe").contentDocument.getElementById("link_to_other_page");
        $(link)[0].click();
    });
}); // ready

...或者如果您更喜欢jQuery方式

jQuery(document).ready(function ($) {
    $("#myIframe").load(function () {
        var link = $("#myIframe").contents().find("#link_to_other_page");
        $(link)[0].click();
    });
}); // ready

考虑

您可能需要将ID设置为<iframe>代码（#myIframe），以便操作它。
您使用.load()方法确保在iframe完全加载之前不会尝试触发click。
您不需要在iframed页面中设置任何javascript。

参见 DEMO

注意：在我的演示中，我使用setTimeout()在5秒后触发click，这样会更明显。

重要：正如之前提到的，它取决于浏览器如何打开页面。 Chrome会弹出（如果您使用的是window.open()）任何链接，如果以编程方式设置了click事件（手动点击会在新标签页中打开页面），而Firefox会在新标签。

Answer 3

为Iframe提供ID并尝试以下代码： -

 <script type="text/javascript">
    $(document).ready(function () {
        $("#iframeID").load(function () {
            var ifr = document.getElementById("iframeID")
            var anchors = iframeID.contentDocument.getElementsByTagName("a");
            for (var i in anchors) {
                anchors[i].setAttribute("target", "_blank");
            }
        });
    });
</script>

希望有所帮助

Answer 4

你可以在一个链接中虚拟，然后点击＆＃34;它在父窗口中。它应该反应更多＆＃34;原生＆＃34;。

<script>
    $(function() {
        var link_html = $("#link_to_other_page").html();
        parent.window.$(link_html)[0].click();
    });
</script>

有关完整示例，请参阅http://jsbin.com/wifeba/1/。

从IFrame模拟单击以打开新选项卡。

4 个答案: