How to assign click event to elements inside iframe?

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.

Maybe you should try to get contents of that page and append it by yourself. — Ahmet Can Güven, Sep 04 '12 at 20:48

dSquared · Accepted Answer · 2012-09-04T20:51:39.530

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.

score 0 · Answer 2 · answered Sep 04 '12 at 20:45

0

You can't due to the same origin policy. Basically, the iframe has to be on the same domain as the script that's trying to modify it.

answered Sep 04 '12 at 20:45

Charlie

11,380
19
83
138

How to assign click event to elements inside iframe?

2 Answers2