iFrame中的JS事件監聽器

Question

嘿，我有以下代碼，該代碼可以正確處理音頻事件，但是在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);
}

因此，我使用了以下代碼，但出現了錯誤：“未定義不是函數（評估'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);
}

Answer 1

我只是做了一點測試，而您所缺少的只是在iFrames document上調用了getElementsByTagName函數，因為contentWindow是iFrames的window元素（類似於父頁面中的window元素）。

您無法在此處的代碼段中使用iFrame，因此我無法向您展示實現，但這應該可以工作（它在我的測試中可以正常工作（盡管我通過加載CNN.com並計算getElementByTagName返回的div數進行了嘗試，並且有效）：

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

請記住 ， content-origin限制適用於此處。 如果不這樣做，則實例化iframe或不在同一域上實例化iframe， 就會發生錯誤 。