iframe JavaScript onload

Question

iframeがロードされているとき私は 'アクティブ'クラスを使用しています。

<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. 後に実行されるいくつかが存在する必要がありますDOMContentLoadedのリスナーです。iframeが実際にページに表示される前に、document.getElementById("loadnav").className = "inactive";が実行しようとしているため、

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 = "非アクティブ";あなたはとてもdocument.getElementByIdは何

を行うことはありません、あなたはiframeにidを持っていないのiframeをロード

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