在 iframe 中触发按钮点击事件

Question

这是iframe代码：

<div id="OutDiv" class="outerdiv">
    <iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="InnerIframe" class="FrameCSS" scrolling="no"></iframe>
</div>

这是 iframe 上面调用的按钮的 HTML 代码：

<button type="button"  id="SuperWebF1" title="Continue" class="button">Continue</button>

这是我在页面加载时用来触发按钮点击的jQuery函数：

 $('#SuperWebF1').trigger( "click" );

只有当我将jQuery代码放在按钮的源代码中，并且iframe使用脚本调用该按钮时，它才能正常工作。

我想创建一个事件，从iframe外部点击按钮。这可行吗？

提前致谢！

- Venelin

---

$(function(){ $('#InnerIframe').contents().find('#SuperWebF1').trigger( "click" ); }); - Dimag Kharab

#CodingAnt，我尝试了你的建议，但似乎没有起作用。按钮没有被点击。 - Venelin

这并不是那个问题的复制。这个问题是关于生成一个事件的。那个问题是关于拦截一个事件的。 （我改变了那个问题的标题；它是误导性的，看起来像一个重复的问题）。在这里，一切都与.trigger()有关。而那里则涉及.click(function...。 - Bob Stein

哦，等等，这是一个 https://dev59.com/gmct5IYBdhLWcg3whtuh 的重复，看起来那个是原始的。另一个重复 https://dev59.com/2WQn5IYBdhLWcg3wTlsS 还有一个 https://stackoverflow.com/questions/33008226/trigger-click-inside-an-iframe - Bob Stein

Answer 1

注意：如果iframe的src指向跨域页面，则.contents()方法将不起作用。更多信息请参见跨域iframe问题和获取跨域iframe的DOM内容。

//execute code after DOM is ready
$(function() {

  //find iframe
  let iframe = $('#main_iframe');
  
  //find button inside iframe
  let button = iframe.contents().find('#main_button');
  
  //trigger button click
  button.trigger("click");
  
});

<!--Add jQuery library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果您需要在iframe内操作另一个页面，请搜索官方API或GET参数。

例如：Youtube嵌入视频，Google Maps嵌入API

- Amit Garg

---

仅提供代码而没有解释为什么该代码应被视为通常不可接受。您能否编辑并添加解释，说明为什么您认为这个答案回答了问题？ - Ken White

对我来说效果很好。 - CodeOut

请问您能否提供一个浏览器支持或官方来源？ - István Pálinkás