JavaScript 在 Iframe 加载时显示加载 gif答案

【问题标题】：JavaScript Show loading gif while Iframe loadsJavaScript 在 Iframe 加载时显示加载 gif
【发布时间】：2012-06-11 20:03:21
【问题描述】：

我需要在 iframe 加载时显示加载 GIF。
这是我想出的：

<div id="m-load" style="position:relative;top:45%;left:45%;">
<img src="images/loader.gif"/></div>
<iframe src="http://myserver.com/myfile.html" id="m-iframe"></iframe>

并且在我输入的 iframe 源文件中：(myfile.html)

<head>
<script>
top.document.getElementById('m-load').style.display ="none";
</script>
</head>

但这在 Firefox 中不起作用（权限被拒绝）。
还有其他方法可以实现吗？

【问题讨论】：

标签： javascript iframe loading

【解决方案1】：

您需要在 same 页面上使用 onload 事件在所有 iframe 加载后触发，如下所示：

// show loading image

window.onload = function(){
  // hide loading image
}

<img id="img" src="images/loader.gif"/></div>

<script>
window.onload = function(){
   document.getElementById('img').style.display = "none";
}
</script>

【讨论】：

【解决方案2】：

iframes 不允许随便访问父内容。假设黑客在您的页面中发现了一个漏洞（例如，您有一个评论表单允许 iframes 用于任何目的。如果他们只能访问父级，他们就可以在您的网站上到处走动。

您可以改用postMessage。因为页面和 iframe 现在都同意如何通信以及什么构成有效通信，所以您无法任意访问您的页面。 http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/有一个很好的教程

【讨论】：