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

你尝试使用jQuery吗？指令document.getElementById（＆＃34; loadnav＆＃34;）。className =＆＃34; inactive＆＃34 ;;在加载iframe

后执行

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

Answer 2

情侣

您的iframe上没有id因此document.getElementById将无法执行任何操作
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>

onload之后的iframe javascript

2 个答案: