JavaScript Show Loading Gif While Iframe Loads
I need a loading GIF to show up while the iframe is loading. This is what I came up with: ![](images/lo</div>
<h2 id="solution_1">Solution 1:
</h2>
<div class="answer-desc"><p>You need to do it on the <strong>same</strong> page using <code>onload</code> event which fires after all iframes are loaded like this:</p>
<pre><code id="code_1" class="hljs language-javascript"><span class="hljs-comment">// show loading image</span>
<span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){
<span class="hljs-comment">// hide loading image</span>
}
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,)
Copy
<img id="img" src="images/loader.gif"/></div>
<script>
window.onload = function(){
document.getElementById('img').style.display = "none";
}
</script>
Solution 2:
iframes are not allowed to just access parent content willy-nilly. Suppose a hacker finds a vulnerability in your page (say, you have a comment form that allows iframes for whatever purpose. If they can just access the parent, they get to walk all over your site.
You could use instead postMessage. Because both the page and the iframe now agree on how to communicate, and what constitutes valid communication, you don't have arbitrary access to your page. There's a good tutorial at http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/
Post a Comment for "JavaScript Show Loading Gif While Iframe Loads"