Question

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.

Answer 1

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.