CODEWITHSUNDEEP
javascripthtml
Jack
Jack

Reputation: 16724

How do I display a "loading.." while <iframe ..> </iframe> is not ready?

How do I display a "loading.." while <iframe id="pdfViewer" name="pdfViewer" src="foo.pdf"></iframe> are not ready? I'm not web developer. My first try was do it by using JavaScript, but:

var xhr = new XMLHttpRequest;
xhr.Open("GET", "foo.pdf");
xhr.onreadystatechange = function()
{
  if(this.readyState == 4) { 
      document.getElementById("container").innerHTML = this.responseText;
   }
}
xhr.send(null);

I can't use jQuery solutions here because I can't use it.

Upvotes: 2

Views: 3063

Answers (2)

sandeep patel
sandeep patel

Reputation: 436

another approach see , you can create overlay kind of div and programatically place it above the iframe.Once the contents is ready hide the overlay.

Upvotes: 0

ephemient
ephemient

Reputation: 204808

Trivial example: jsfiddle.net/G5wkS/

var placeholder = document.createElement('div');
placeholder.textContent = 'Loading...';
document.body.appendChild(placeholder);
var iframe = document.createElement('iframe');
iframe.style.setProperty('display', 'none');
placeholder.parentNode.insertBefore(iframe, placeholder.nextSibling);
iframe.addEventListener('load', function() {
    placeholder.parentNode.removeChild(placeholder);
    iframe.style.removeProperty('display');
});
iframe.setAttribute('src', 'http://127.0.0.1/');

Create a placeholder and an iframe (initially hidden). Of course you could choose to write these out in HTML too, and place them wherever you want with your own styling and attributes. Then, once the iframe's onload fires, take away the placeholder and unhide the iframe. You might want to do something different if the onerror event fires instead.

Upvotes: 1

Related Questions