加载内容后显示 iframe
Posted
技术标签:
【中文标题】加载内容后显示 iframe【英文标题】：Show Iframe after loading content 【发布时间】：2013-11-20 09:55:40 【问题描述】：我正在使用来自外部来源的 iframe，并希望在页面 (iframe) 完全加载后显示其内容。 我有一个 div 用“请稍候”消息覆盖页面，但它不能正常工作。在 iframe 完全加载之前，DIV 隐藏。 有没有更好的方法呢？ （浏览器：IE）
代码：
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
document.getElementById("hideAll").style.display = "block"; </script>
<script type="text/javascript">
window.onload = function()
document.getElementById("hideAll").style.display = "none"; </script>
<style type="text/css">
body
overflow: hidden;
width:100%;
height:100%;
padding:0;
margin:0;
#hideAll
position: relative;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
z-index: 99;
#main
width:1600px;
height: 500px;
margin:0 auto;
position: relative;
top: -50px;
left: -400px;
#Overlay
opacity: 1;
background-color: white;
width: 227px;
height: 100%;
z-index: 1;
top: 140px;
left: 0;
position: relative;
#Overlay2
opacity: 1;
background-color: white;
width: 262px;
height: 100%;
z-index: 2;
top: 140px;
left: 765px;
position: relative;
</style>
</head>
<body>
<div id="hideAll"> Please wait...</div>
<div id="main">
<iframe src="http://ectect.com" scrolling="no" style="width:100%; height:100%; border:none; margin-left:0px;"/></iframe>
</div>
</body>
【问题讨论】：
您的代码应该可以正常工作。我想iframe 使用ajax 或其他一些异步技术（或它自己的window.onload），这会将“加载”时间延长到iframe 自己的window.onload 之后。在这种情况下，从iframe 获取可靠就绪消息的唯一方法是从iframe 手动创建和发送该消息。如果您无法控制文件，则无能为力。
我用这段代码在 Chrome 上一切正常。我无法在 IE 中管理，因为它只工作了几次，不可靠，我需要 IE，因为我需要创建 .hta 文件并从我的桌面运行它。问题是 HTA 默认浏览器是 IE。我不能使用 chrome 的另一个原因是使用这个文件的人没有它，如果我嵌入了 chrome 的便携式版本，我不能使用 window.resize() 因为它不起作用并且我的模板是自定义的。 .
但是你可以控制iframe的内容？如果是这样，当一切都完成后，您可以从iframe 在主页上调用有点“就绪”的功能。
顺便说一句。如果您将代码作为 HTA 进行测试，请不要忘记在 iframe 标记中添加 application="yes" 属性，否则您将无法获得跨框架访问。这也可能会阻止onload 与iframe？我从来没有在 HTA 中遇到过 onload 的问题，它似乎也适用于第三方内容（尽管在 iframe 中的第三方内容的情况下，你不应该使用 application="yes ")。
谢谢提姆！很高兴知道
【参考方案1】：
您的示例中似乎并没有真正使用 jQuery，即使您在 <head> 部分中加载它也是如此。使用 jQuery 我会尝试类似的东西：
<script type="text/javascript">
$(document).ready(function()
$("#hideAll").show();
);
$("#main iframe").load(function()
$("#hideAll").hide();
);
</script>
在<body> 的末尾使用那个 sn-p 而不是文档开头的原始两个。
【讨论】：
嗯...$(document).ready() 在onDOMContentLoaded 触发时执行，OP 有window.onload，它应该等到页面上的所有资源都已加载。 “The DIV hides before the Iframe has completely loaded”是这里的问题。
好的。必须对此进行测试，这个编辑后的版本似乎可以按预期工作 - 至少在 Firefox 上是这样。以上是关于加载内容后显示 iframe的主要内容，如果未能解决你的问题，请参考以下文章
IOS15 升级后 Iframe 内容未加载到 Iphone 中