javascript - 如何在 <iframe ..> </iframe> 未准备好时显示 "loading.."？

Question

如何在 <iframe id="pdfViewer" name="pdfViewer" src="foo.pdf"></iframe> 时显示“loading..”还没准备好？我不是网络开发人员。我的第一次尝试是使用 JavaScript，但是:

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

我不能在这里使用 jQuery 解决方案，因为我不会使用它。

Answer 1

简单的例子: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/');

创建一个占位符和一个 iframe(最初是隐藏的)。当然，您也可以选择将它们写在 HTML 中，并使用您自己的样式和属性将它们放置在您想要的任何位置。然后，一旦 iframe 的 onload 触发，移除占位符并取消隐藏 iframe。如果改为触发 onerror 事件，您可能想做一些不同的事情。