模拟IFrame中的点击，打开新选项卡。

我想打开一个IFrame内的新选项卡。我试图让触发点击事件看起来好像它是从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启动？

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

来源

2014-09-24 Nick Maroulis

'target =“_ blank”'？ – Alex 2014-09-24 11:13:21

@Alex在iframe中不起作用。 – 2014-09-24 22:48:39

@NickMaroulis - 这根本不可能。如果您对弹出窗口（宽度，高度，隐藏地址栏等）施加限制，浏览器将决定如何处理链接。因此，用户将浏览器配置为在新选项卡中打开新窗口将会是一个问题。现在还没有办法强制一个标签放在窗户上。至于使iframe链接寄存器在帧外发生，您可以创建一个伪帧来模拟iframe的功能，同时保持标准页面功能。 – 2014-09-26 12:35:31

给ID的iFrame和尝试下面的代码： -

<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>

希望它有助于

来源

2014-09-24 11:18:49 BNN

这可能会打开一个新窗口而不是新标签页。提问者要求打开新标签。我在回答中注意到了这一点。你不必为此而投票。 – vrijdenker 2014-09-24 11:26:37

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

你并不需要的JavaScript。

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

来源

2014-09-24 11:19:54 vrijdenker

+1，指出这是一个浏览器问题。已经花了太长时间找出如何强制浏览器打开新标签，直到我发现你不能。 – 2014-10-01 12:31:56

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

然后，假设里面你的链接的iFrame页面已具有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您标签（#myIframe），这样你可以操纵它。
您使用方法确保在iframe完全加载之前，您不会尝试触发click。
您不需要在iframed页面内设置任何javascript。

见DEMO

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

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

来源

2014-10-02 03:50:36 JFK

你可以在一个链接中虚拟，并在父窗口中“点击”它。它应该更“本土化”。

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

见为完整的例子。

来源

2014-10-02 19:55:09

值得注意的是，这个例子假定jQuery在父窗口中也是可用的。如果不是，那么提供一个香草JS例子也是微不足道的。 – 2014-10-02 19:56:23

模拟IFrame中的点击，打开新选项卡。

回答

相关问题