IFrame button click event

Question

I'm trying to attach an eventlistener to the "click" event of a button on a page in an IFrame. The page in the iframe belongs to the same domain as the parent window.

window.frames["iframe_Id"].document.getElementById("button_id").addEventListener("click",functionToRun,false);

The above sample is not working for me. It could just be a a syntax error in my actual code but I wanted to see if this is the general idea.

Note: I found plenty of examples on adding the click event to the entire Iframe but I'm not sure it works the same for buttons within the Iframe.

Answer 1

Using jQuery:

$("#iframe_Id").contents("#button_id").click(functionToRun);

Or without jQuery:

document.getElementById("iframe_Id").contentWindow.document.getElementById("button_id").addEventListener("click", functionToRun, false);

This will only work if the iframe meets the same origin policy.

Answer 2

window.frames is an array-like object, so its elements can be accessed by indexes only.

You should loop through them, and check their id, e.g.:

var frame; for(i = 0; i < frames.length; i++) {
    frame = frames[i];
    if (frame.id === 'iframe_id') {
         frame.document
              .getElementById("button_id")
              .addEventListener("click",functionToRun,false);
    }
}

Answer 3

Have you tried executing the event in the "capturing" vs. "bubbling" phase?

document.getElementById("iframe_Id")
 .document.addEventListener("click", functionToRun, true);

Note the true instead of false as the final parameter.

Answer 4

window.frames["iframe_Id"].contentWindow.document.getElementById("button_id").addEventListener("click",functionToRun,false);

                              ^

The contentWindow property.

From the DOM iframe element, scripts can get access to the window object of the included HTML page via the contentWindow property.