iframe javascript onload

Question

當iframe加載時我停止加載時使用css類'active'我切換到'inactive'類。

<script type="text/javascript"> 
function frameload(){ 
    document.getElementById("loadnav").className = "active"; 
} 
document.getElementById("loadnav").className = "inactive"; 
</script> 
<iframe src="https://www.wikipedia.org/" onload="frameload()"></iframe> 

問題是加載後沒有返回到「無效」狀態。

Answer 1

夫婦的事情

1. 你不必在你的iframe的id所以document.getElementById不會做任何

2. 需要有一些聆聽者爲DOMContentLoaded，因爲document.getElementById("loadnav").className = "inactive";正試圖在iframe實際上在頁面上之前運行

iframe { 
 
width: 100%; 
 
height: 100%; 
 
} 
 
iframe.inactive { 
 
border: 2px solid red; 
 
} 
 
iframe.active { 
 
border-color: green; 
 
}

<script> 
 
function frameload(){ 
 
    document.getElementById("loadnav").className = "active"; 
 
} 
 
function init(){ 
 
    document.getElementById("loadnav").className = "inactive"; 
 
    document.getElementById("loadnav").addEventListener('load', frameload); 
 
} 
 

 
document.addEventListener('DOMContentLoaded', init); 
 

 
</script> 
 

 
<iframe src="https://www.wikipedia.org/" id='loadnav'></iframe>

Answer 2

你試過使用jQuery。指令document.getElementById（「loadnav」）。className =「inactive」;加載的iframe後執行

$('iframe').load(function() { 
document.getElementById("loadnav").className = "inactive"; 
});