Question

20

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

rated 0 times [ 27] [ 7] / answers: 1 / hits: 23475 / 14 Years ago, wed, september 8, 2010, 12:00:00

I don't have access to this iframe's source directly, so I would like to do this, if it's possibly this way.

I have an iframe generated by JS:

<iframe name=temp_iframe width=100% height=95% src='+the_url+'></iframe>

And inside is a submit button and a cancel button. The submit button works fine, but I want the cancel button to close this modal that is containing the iframe... I also want the submit button to send, then close the modal. Normally this would be easy, but im not sure how to setup an event in the parent window to a child DOM element of the iframe that affects the child's parent, the main window.

E.g. if this wasn't in an iframe and in jQuery:

$('[name=temp_iframe] button').live('click',function(){

    alert('click');

    return false;

});

EDIT: And also, it's on the same domain!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

estefanib

Add To Favorites

Follow

Total Points: 508

Total Questions: 104

Total Answers: 83

Location: Lebanon

Member since Sun, Aug 2, 2020

4 Years ago

estefanib questions

1 JavaScript - wait until element loaded on website using Chrome extension

Sat, Jul 10, 21, 00:00, 3 Years ago

1 How to auto close an alert after few seconds with Bootstrap?

Mon, Jun 28, 21, 00:00, 3 Years ago

1 What is the difference between a User and a GuildMember in discord.js?

Sun, Sep 20, 20, 00:00, 4 Years ago

1 react styled components style inner elements

Fri, Aug 21, 20, 00:00, 4 Years ago

1 How to automatically refresh an interactive grid after clicking on save button or at a fixed interval?

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 14 Years ago dayana · Accepted Answer

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.