How to add a click event to p elements in iframe (using jQuery)

There's a special jQuery function that does that: .contents(). See the example for how it's works.


Wanted to add this, as a complete, copy-paste solution (works on Firefox and Chrome). Sometimes it is easy to miss to remember to call the event after the document, and so the iframe, is fully loaded:

$('#iframe').on('load', function() {
    $('#iframe').contents().find('#div-in-iframe').click(function() {
        // ...
    });
});

The iframe must be on the same domain for this to work.


Your best best bet is to invoke the iframe AS LONG AS it's part of your domain.

iframe.html

<html>
    <head>
        <script>
            window.MyMethod = function()
            {
                $('p').click();
            }
        </script>
    </head>
    <body></body>
</html>

And then use

document.getElementById('targetFrame').contentWindow.MyMethod();

To invoke that function.

another way is to access the iframe via window.frames.

<iframe name="myIframe" src="iframe.html"/>

and the javascript

child_frame = window.frames['myIframe'].document;
$('p',child_frame).click(function(){
    alert('This click as bound via the parent frame')
});

That should work fine.

Tags:

Javascript

Events

Jquery

Iframe

Recent Posts