JQuery click event does not work for iframe in mobile browser

Question

This is a pretty specific problem that I ran into, but I have no idea how to debug this, or even find out if this will even work in mobile browsers.

I have 2 pages (like in the SAME domain, so I have no problems with the cross-domain security policy), one of them is inside the iframe, inside the other. Since I need to catch clicks for both the parent and the child, I created a div that covers the iframe and then calls the click method on the child:

Here is the demo code I made:

Parent file:

<script> $(document).ready(function() { $("#floating_play_button").click(function() { alert("just clicked floating_play_button... will try to click iframe on click for link2"); $('#slider').contents().find("#link1").click(); }); }); </script> <div id="floating_play_button" style="cursor:pointer; left: 0px; top:0px; width:100%; height:395px; position:absolute; border:2px solid red;"></div> <iframe id="slider" src="slider_test.php" width="957" height="337" frameBorder="1" style="border:2px solid green;" ></iframe> 

Page for children:

 <script> $(document).ready(function() { $("#link1").click(function() { alert("#link1 clicked..."); }); }); </script> <div id="link1"> <a href="#">Link 1</a><br /> </div> 

This works fine on all desktop browsers, but not on Chrome for Android (July 22, 2013 version), the default Android browser, iPad and iPhone.

On the child page, I tried both of these forms, but didn't work:

  $(document).on('click', '#link1', function() { alert("on click activated for link1"); }); $("#link1").click(function() { alert("#link1 clicked..."); }); 

As an additional note, the selector is fine. I can do something like changing text attributes and the like using jQuery, and it works fine. I just can't trigger the click event.

Any hints or pointers?

Thanks!

Answer 1

Chrome does not allow access to iframe content. Even if the content is of the same origin.

You must use postMessage to communicate between frames.

Maybe this helps: cross-window-messaging-with-postmessage

Answer 2

My answer is based on ios, because that is all I have, but may be the same for android.

Click events work a little differently on touchscreen devices. No mouse, so technically no click. According to this article - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - due to memory limitations, click events are only emulated and dispatched from the binding and input elements. Any other element can use touch events or manually initiate click events by adding a handler to the raw html element, for example, to force click events on a div:

 $('div').each(function(){ this.onclick = function() {} }); 

Now the click will activate the div, so you can listen to it using jQuery.

---

In your case, you can simply change the listener to an anchor element:

 $("#link1 a").click(function() { alert("#link1 clicked..."); }); 

Or use the touch event on the div:

 $(document).on('touchstart', '#link1', function() { alert("on click activated for link1"); }); 

then follow these steps:

 $('#slider').contents().find("#link1").trigger('touchstart'); 

Here is a fiddle with a few experiments, it may be useful - http://jsbin.com/ukalah/9/edit

Answer 3

There are two instances of downloadable jQuery. One in the parent and one inside the iframe. Things got confused somewhere between creating an event on the parent instance and processing on the child.

If you dispatch an event without using the jQuery event mechanism, it works:

 $("#floating_play_button").click(function(){ //$('#slider').contents().find("#link1").click(); // instead: var newEvent = document.createEvent('Event'); newEvent.initEvent('click',true,true); $('#slider').contents().find("#link1").first()[0].dispatchEvent(newEvent); }); 

But jQuery handles a lot of things, such as cross-browser compatibility, that we don’t want to miss. So just make sure your event is generated and handled by the same jQuery instance, and it should work:

 $("#floating_play_button").click(function(){ //$('#slider').contents().find("#link1").click(); // instead: window.frames['slider'].$('#link1').click(); }); 

---

EDIT 1

I could not understand what exactly was breaking, but I noticed that the browsers where it failed did not implement the Event constructor. Events were created instead of document.createEvent . Therefore, I assume that some links are lost along this path using the wrong document object. If someone can explain deeply, please do ...