JQuery click event not working for iframe, in mobile browser

Question

This is a pretty specific issue I'm having, but I'm out of ideas on how to debug this, or even find out if it will work at all on mobile browsers.

I have 2 pages (both on the SAME domain, so I don't have issues with the cross-domain security policy), one is in an iframe inside the other. Since I need to catch clicks on both the parent and the child, I created a div that covers the iframe, and then calls the click method on the child element:

Here's a 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's 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>

Child page:

<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 (version from July 22 2013) the default Android browser, iPad, nor iPhone.

In the child page I tried both of these forms but neither 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 things like change the text attributes and similar via jQuery and it works fine. I just can't call the click event.

Any tips or pointers?

Thanks!

Answer 1

Chrome doesn't allow accessing the contents of an iframe. Even if the contents have the same origin.

You should use postMessage to communicate between frames.

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