iframe javascript nach onload

Question

Wenn iframe lädt ich benutze eine css-klasse 'aktiv' wenn ist aufhören zu laden, ich wechsle in 'inaktive' klasse.

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

Das Problem ist, dass nach dem Laden nicht auf "inaktiv" zurückkehrt.

Answer 1

Paar wird nach dem Laden der Iframe ausgeführt Dinge

1. Sie haben kein id auf Ihrem iframe haben, so wird document.getElementById nichts tun

2. braucht es einige sein Listener für DOMContentLoaded, weil document.getElementById("loadnav").className = "inactive"; versucht, vor der iframe läuft ist eigentlich auf der Seite

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

Sie haben versucht, jQuery zu verwenden. die Anweisung document.getElementById ("loadnav"). className = "inaktiv";

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