17

This is the iframe code:

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

Here is the HTMl code of the button which the iframe above is calling:

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

Here is the jQuery function that i use to trigger the click of the button when page is loaded:

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

But this is working like that only when i place the jQuery code inside the source of button and the iframe is calling the button with the script.

I want to make an event which is clicking the button from outside the iframe. Is it possible ?

Thanks in advance!

isherwood
  • 58,414
  • 16
  • 114
  • 157
Venelin
  • 2,905
  • 7
  • 53
  • 117
  • $(function(){ $('#InnerIframe').contents().find('#SuperWebF1').trigger( "click" ); }); – Dimag Kharab Dec 06 '14 at 13:57
  • #CodingAnt i've tryied your advice but it seems it's not working. The button is not clicked. – Venelin Dec 06 '14 at 14:06
  • 4
    **Not a duplicate** of that question. This question is about GENERATING an event. [That question](https://stackoverflow.com/q/3672726/673991) is about INTERCEPTING an event. (I changed the title of that question; it was misleading and seemed like a duplicate.) Here it's all about `.trigger()`. There it's all about `.click(function...` – Bob Stein Jun 04 '17 at 13:08
  • Oh wait, this is a **duplicate of** https://stackoverflow.com/questions/12032074/triggering-an-event-handler-on-an-element-inside-iframe-from-parent-frame which appears to be the original. Another duplicate https://stackoverflow.com/questions/16928860/jquery-to-trigger-a-click-on-an-iframe And another https://stackoverflow.com/questions/33008226/trigger-click-inside-an-iframe – Bob Stein Jun 04 '17 at 13:16

1 Answers1

28

NOTE: .contents() does not work if iframe's src points to cross domain page. More: Cross domain iframe issue and Get DOM content of cross-domain iframe

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

If you need to manipulate another page inside iframe, search for official API or GET parameters. Example: Youtube Embed Video, Google Maps Embed Api

Max Patiiuk
  • 71
  • 3
  • 8
Amit Garg
  • 3,867
  • 1
  • 27
  • 37