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事件触发，您可能想要做一些不同的事情。

Answer 2

另一种方法看，您可以创建叠加类div并以编程方式将其放在iframe上方。一旦内容准备好，就会隐藏叠加层。

如何在<iframe .. =“”> </iframe>未准备好时显示“loading ..”？

2 个答案: