JS Event Listener within iFrame

Question

Hey I have the following code, which functions correctly how dealing with audio events, however this doesn't work within an iFrame:

var sounds = document.getElementsByTagName('audio');
/* Loop through the nodelist - this is **not** an array */
for(var i = 0; i < sounds.length; i++){
/* Get the item in your nodelist. This **is** an element. */
var sound = sounds.item(i);
/* Now add your event listener here - You can only add one at a 
 * time, though. So I decided to make the event a separate  
 * function and attach it multiple timers. */
function eventHandler(){
    document.title = document.title.replace('\u25B6', '')
    if (!sound.paused) {
        document.title = '\u25B6 ' + document.title.replace('\u25B6 ', '')
        return false;
    }
}
sound.addEventListener('play', eventHandler, false);
sound.addEventListener('pause', eventHandler, false);
sound.addEventListener('ended', eventHandler, false);
}

So I have used the following code, but this comes up with the error: "undefined is not a function (evaluating 'iframe.contentWindow.getElementsByTagName('audio')')"

var iframes = document.getElementsByTagName('iframe'); //all iframes on page
for(var i=0; i<iframes.length; i++){
var iframe = iframes.item(i);
var sounds = iframe.contentWindow.getElementsByTagName('audio');
/* Loop through the nodelist - this is **not** an array */
for(var i = 0; i < sounds.length; i++){
/* Get the item in your nodelist. This **is** an element. */
var sound = sounds.item(i);
/* Now add your event listener here - You can only add one at a 
 * time, though. So I decided to make the event a separate  
 * function and attach it multiple timers. */
function eventHandler(){
    document.title = document.title.replace('\u25B6', '')
    if (!sound.paused) {
        document.title = '\u25B6 ' + document.title.replace('\u25B6 ', '')
        return false;
    }
 }
}
    sound.addEventListener('play', eventHandler, false);
    sound.addEventListener('pause', eventHandler, false);
    sound.addEventListener('ended', eventHandler, false);
}

Hello again! Just my two pence, but I think you need to select the document before calling any elements getters: iframe.contentWindow.document.getElementsByTagName('audio'); - does that help? — somethinghere
– somethinghere, Commented Jun 11, 2015 at 8:34

somethinghere · Accepted Answer · 2015-06-11 10:13:17Z

1

I just did a little test and all you are missing is calling the getElementsByTagName function on the iFrames' document, as the contentWindow is the iFrames' window element (similar to the window element in your parent page).

You cannot use iFrames in code snippets here, so I can't show you an implementation, but this should work (it worked in my testing (although I tried it with loading CNN.com and counting the number of divs returned by getElementByTagName, and that worked):

var iframe = iframes.item(i);
iframe = iframe.contentWindow.document;
var sounds = iframe.getElementsByTagName('audio');

Keep in mind that content-origin restrictions apply here. If you did noit instantiate the iframe or its not on the same domain, errors can occur.

edited Jun 11, 2015 at 10:13

answered Jun 11, 2015 at 8:40

somethinghere

17.5k2 gold badges36 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1887683 Over a year ago

Hey I have tried this before, and tried it again: I get this error: TypeError: undefined is not an object (evaluating 'iframe.contentWindow') To make sure I haven't missed anything i've put it here: jsfiddle.net/#&togetherjs=GFDUhLhfUt

somethinghere Over a year ago

In your fiddle, there are no iframes. Also notice that I did not redefine your iframe, I continued on from it. var iframe = iframes.item(i); was correct. That gives you the iframe element, then contentWindow gives you the window element of the page inside the iframe, and then the document gives you the document inside that window element.

Collectives™ on Stack Overflow

JS Event Listener within iFrame

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related