2017-03-03 157 views
0

当iframe加载时我停止加载时使用css类'active'我切换到'inactive'类。iframe javascript onload

<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> 

问题是加载后没有返回到“无效”状态。

+1

我认为你必须删除初始级 –

回答

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>

1

你试过使用jQuery。指令document.getElementById(“loadnav”)。className =“inactive”;加载的iframe后执行

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