2

如何在<iframe id="pdfViewer" name="pdfViewer" src="foo.pdf"></iframe>未准备好时显示“正在加载..”？我不是网络开发人员。我的第一次尝试是使用 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 解决方案，因为我不能使用它。

4

2 回答 2

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 编写这些内容，并使用您自己的样式和属性将它们放置在您想要的任何位置。然后，一旦 iframeonload触发，移除占位符并取消隐藏 iframe。onerror如果事件触发，您可能想要做一些不同的事情。

于 2012-06-12T04:22:23.300 回答
0

另一种方法见，您可以创建覆盖类型的 div 并以编程方式将其放置在 iframe 上方。一旦内容准备好隐藏覆盖。

于 2012-06-12T04:07:36.247 回答