iframe中父頁面調(diào)用iframe框架內(nèi)的子頁面方法時，切換第二個子頁面時，方法失效，DOM0消失

原因：需要控制項目中使用iframe構(gòu)建的部分的音頻，由于audio標簽位于子頁面，暫時沒有找到JS禁用瀏覽器聲音的方法，所以需要用到子頁面（iframe嵌套頁面）內(nèi)音量控制的方法，使用hreflink.window.childFunction();來調(diào)用子頁面的方法。我創(chuàng)建了一個img標簽，將圖片的onclick事件設(shè)置為父頁面引用子頁面的方法。

<img id="audio" src="source/img/audio1.png" title="靜音" onclick="callChildAudio()"> 

<iframe  name="hreflink" id="hreflink"   ></iframe>

function callChildAudio() {
    var audio=document.getElementById('audio');
    hreflink.window.audio(audio);
}

問題：第一次使用這個方法時，能夠正常運行。切換iframe的src之后。button的DOM0為空。

點擊圖片，切重新指向iframe的SRC后

試圖解決方法1：項目中其他標簽是使用js的調(diào)取JSON文件，使用innerHTML來展示。可是是因為innerHTML是重新加載html，一些動態(tài)綁定的事件或樣式可能失效了。后來試驗發(fā)現(xiàn)，innerHTML部分在頁面載入完成后也停止了。沒有影響到頁面。

試圖解決方法2：懷疑父頁面的function失效或不起作用，在callChildAudio方法內(nèi)console.log輸出后，發(fā)現(xiàn)當(dāng)?shù)谝淮吸c擊時，控制臺輸出一次。第二次點擊時控制臺沒有輸出信息。表明第一次點擊后，子頁面的方法覆蓋了父頁面的點擊事件。在子頁面嘗試控制臺輸出時輸出不了。沒有辦法驗證錯誤源。

試圖解決方法3：iframe父頁面調(diào)用子頁面是使用Window對象，可能瀏覽器只支持一個Window對象，自動忽略了第二個子頁面的window調(diào)用方法.測試中.....

回答

編輯回答

舊酒館

經(jīng)測試認為是window載入對象的關(guān)系，解決方法：將控制權(quán)全權(quán)交給父頁面。代碼如下

將父頁面的調(diào)用方法改為

    var audioState=true;
function callChildAudio() {
        var audio=document.getElementById('audio');
        if(audioState){
            hreflink.window.audio0(audio);
            audioState=false;
        }else{
            hreflink.window.audio1(audio);
            audioState=true;
        }
    }

將子頁面的方法改為

    function audio0(audio) {
        var audioTag = document.getElementById("audio"), audioBtn =audio;
        audioTag.volume = 0;
        audioBtn.src = 'img.png';
    }
    function audio1(audio) {
        var audioTag = document.getElementById("audio"), audioBtn =audio;
        audioTag.volume = 1;
        audioBtn.src = 'img.png';
    }

2018年7月8日 22:16