Triggering click across iframe

Question

This is my iframe HTML code :

<ul id="titleee" >
<li><a href="http://adskpak.com/?type=2&id=jayvicious">CLick me</a></li>
</ul>

This is my main page code :

<iframe id="iframe" src="iframe1.php"></iframe>

<script>
$(document).ready( function(){
  $('#iframe').contents().find('#titleee').click();
});
</script>

It seems it's not triggering the click event.

possible duplicate of [Jquery capture Click on Iframe](http://stackoverflow.com/questions/15557155/jquery-capture-click-on-iframe) — Nick McCurdy, Dec 20 '14 at 05:07
Sounds like you are trying to trigger a click on the anchor tag in the iframe. To do that, you will need to have the trigger code in the iframe document and add a listener for messages from the parent document. — macguru2000, Dec 20 '14 at 05:10
jQuery won't cause `` to load href anyway when you trigger `click()` — charlietfl, Dec 20 '14 at 05:10
You want to make sure that your find() query finds the anchor tag and not the #titleee element. — macguru2000, Dec 20 '14 at 07:15
What functionality are you looking for? Do you want to click the link? If so, you need to `.find("#titleee a").click()` instead. If you want to trigger a custom click event, the click event has to be bound in the iframe as well. So when you bind your click event, bind it to `$('#iframe').contents()` or with `$('#iframe').contents()` as the context. — Makaze, Dec 20 '14 at 08:35

macguru2000 · Answer 1 · 2014-12-20T06:55:25.330

I think something like this should work, although I don't do jQuery anymore, just vanilla Javascript. I'm sure you can figure out how to do it in jQuery.

this is your iframe code:

<ul id="titleee" >
<li><a href="http://adskpak.com/?type=2&id=jayvicious">Click me</a></li>
</ul>
<script>
  window.addEventListener("message", function() {
    if (event.origin === 'http://adskpak.com') {
      if (event.data === 'click the link') {
        document.querySelector('#titleee a').click();
      }
    }
  });
</script>

now your main page code:

<iframe id="iframe" src="iframe1.php"></iframe>
<script>
  var iframeWindow = document.querySelector('#iframe').contentWindow;

  // this needs to happen after the load event,
  // but it is best if it happens on a user's action.
  window.onload = function() {
    iframeWindow.postMessage('click the link', '*');
  }
</script>

I've tested this code and it seems to work, although when I did the test I used google.com, which actually alerted me a cross domain error:

Load denied by X-Frame-Options: https://www.google.com/ does not permit cross-origin framing.

I am not sure if this is relevant for you, as it looks like your doing everything on your own domain, just a heads up.

score 0 · Accepted Answer · answered Dec 20 '14 at 06:59

Just check the console of your browser for errors:-
You might be getting this error:-

SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://www.goibibo.com" from accessing a cross-origin frame.

This will work if you have both the parent and the iframe on same domain. Set document.domain of both the page and the iframe to the same value i.e. your domain and then check.

Triggering click across iframe

2 Answers2