Question

How to assign click event to elements inside ifraem?

I started a post to detect if the iframe is loaded.

How can I detect whether an iframe is loaded?

and I have further quesitons

How do I assign an event or manipulate elements inside the iframe??

I tried..

$(function(){
    $('#click').on('click', function(){
        var ifr=$('<iframe></iframe>', {
            id:'MainPopupIframe',
            src:'http://heera.it',
            style:'display:none',
            load:function(){
                $(this).show();
                alert('iframe loaded !');
            }
        });
        $('body').append(ifr);    

    //when I click the home page button, nothing happen...
    $('#menu-item-277').click(function(){
       alert('click!!!');
    })
    });
});
​

Thanks for the help.

Answer 1

Due to cross domain security restrictions (same origin policy) this is not possible if the iframe’s content exists on a domain other than the parent page.

If you have access to both domains you can try using a plugin such as Ben Alman’s excellent PostMessage to set-up a Cross-Domain / Cross-Browser iframe communication stream. You could then bind to the click event of a local DOM element and send a message to the iframe where a polling loop could listen for it and trigger the click event within the iframe.

I hope this helps.