Attach an Event in a Child Iframe to a Handler in the Parent Window

Attach an event in a child iframe to a handler in the parent window

Use contents() to access the Document object inside an iframe. Note that there are in general problems with using a jQuery library in one document to manipulate another document and it should in general be avoided. However, in the case of binding events it does work.

$('[name=temp_iframe]').contents().find('button').click(function() {
    alert('click');
});

This requires that the iframe and its contents are loaded, so do it in a $(window).load() handler if necessary. You can't live/delegate across documents, as events don't propagate from a child document into its parent.

Event in a child iframe to a handler in the parent window

In Parent Page, update the below script which will create a global function called closeModal which will 1) Close the modal dialog and 2) Reloads the current page.

<script type="text/javascript">
    window.closeModal = function () {
        $('#myModal').modal('hide');
        window.location.reload();
    };
</script>

In Child Page, on Close button click, simply call the closeModal method of the parent.

<script type="text/javascript">
    $(document).ready(function () {
        $('#close').click(function () {
            window.parent.closeModal();
        });
    });
</script>

Trigger Custom Event From Iframe To Parent Document

This works:

parent.$('body').trigger('eventName');

the event triggered inside the iframe will be detected in the parent document.

Pass an Event to an iframe from the parent window? ( Javascript )

Finally I have sorted out the issue. I have used parent.document on my iframe to catch the events from the parnet side and create them again on iframe and it works great!

Binding to custom event in child iframe?

You can access the javascript in a child iframe from the parent in the following way:

document.getElementById('editor_iframe').contentWindow.yourfunction()

Likewise, since jquery is just a function, you can access the iframe jquery instance like this:

document.getElementById('editor_iframe').contentWindow.$(yourjquery)...

Trigger events in iframe's parent window

The way events are tracked, you can only trigger or receive events on the same document.

try

window.parent.$(window.parent.document).trigger('complete');

How to trigger an event from parent window based on iframe content?

This will fail most likley due to the same-origin-policy. It restricts JavaScript access from one protocol and domain to another.

For more information about this you can check out the wiki entry

To achieve cross origin communication you can use the messaging API defined here.

With this api you can define an event listener on one file and a trigger in the other.

Listen to messages:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

Post a message to another document:

var parentWindow = window.parent;

// When the popup has fully loaded, if not blocked by a popup blocker:

// This does nothing, assuming the window hasn't changed its location.
parentWindow.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

You can checkout the complete example in the MDN Documentation

Capture keydown events for multiple child iFrames in parent document?

It doesn't seem possible. We decided to catch keydown events in each child iframe and pass them to the parent document where a master function processes all keyboard events.

Unfortunately, it repeats some code in each child iframe, but this seems unavoidable until a better solution emerges.

---

Related Topics