iframe javascript after onload

Question

When iframe is loading I use a css class 'active' when is stop loading I switch to 'inactive' class.

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

The problem is that after loading does not return to 'inactive'.

I think you have to remove the initial class

Lieutenant Dan
– Lieutenant Dan

2017-03-03 21:32:57 +00:00
Commented Mar 3, 2017 at 21:32 — Lieutenant Dan
– Lieutenant Dan, Commented Mar 3, 2017 at 21:32

Steven Kaspar · Accepted Answer · 2017-03-03 21:32:13Z

1

Couple things

You don't have an id on your iframe so document.getElementById won't do anything
There needs to be some listener for DOMContentLoaded because document.getElementById("loadnav").className = "inactive"; is trying to run before the iframe is actually on the page

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>

answered Mar 3, 2017 at 21:32

Steven Kaspar

1,19710 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mouaici_Med · Accepted Answer · 2017-03-03 21:30:14Z

1

are you tried to use jQuery. the instruction document.getElementById("loadnav").className = "inactive"; is executed after the loading the iframe

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

answered Mar 3, 2017 at 21:30

Mouaici_Med

4104 silver badges19 bronze badges

Collectives™ on Stack Overflow

iframe javascript after onload

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related