鍍金池/ 問(wèn)答/HTML/ iframe中父頁(yè)面調(diào)用iframe框架內(nèi)的子頁(yè)面方法時(shí)，切換第二個(gè)子頁(yè)面時(shí)，方

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

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

<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);
}

問(wèn)題：第一次使用這個(gè)方法時(shí)，能夠正常運(yùn)行。切換iframe的src之后。button的DOM0為空。

clipboard.png
點(diǎn)擊圖片，切重新指向iframe的SRC后

clipboard.png

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

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

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

回答
編輯回答
舊酒館

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

將父頁(yè)面的調(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;
        }
    }

將子頁(yè)面的方法改為

    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