Javascript 页面加载后加载 iFrame
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10380787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load iFrame after page load
提问by Phil Howell
I have a PHP page with a few iFrames that cause the page to load fairly slowly. How do I go about only loading those iFrames once the page has completely loaded? I assume I need to use JavaScript but I haven't yet found a code that works.
我有一个带有一些 iFrame 的 PHP 页面，这些 iFrame 导致页面加载速度相当慢。一旦页面完全加载，我如何只加载那些 iFrame？我假设我需要使用 JavaScript，但我还没有找到有效的代码。
Many thanks.
非常感谢。
EDIT - The iFrame needs to appear within a PHP echo.
编辑 - iFrame 需要出现在 PHP 回声中。
Here's the code:
这是代码：
<?php
while($i = mysql_fetch_array($e))
{
?>
<div class='dhtmlgoodies_question'>
<div style='float:left'><img src='../images/categories/<?=$i[Category]?>.png'></div>
<div class='name'><?=$i[Name]?></div>
<div class='location'><?=$i[Area]?></div>
</div>
<div class='dhtmlgoodies_answer'>
<div>
<div style='background-color:#FFF; margin-left:248px; padding:10px; color:#666'>
<?=$i[Address]?><br>
<?=$i[Area]?><br>
<a href='http://maps.google.com/maps?q=<?=$i[Postcode]?>'><?=$i[Postcode]?></a><
<p>
<?=$i[ContactName]?><br>
<?=$i[TelephoneNumber]?>
</div>
<p>
<a href='http://crbase.phil-howell.com/view.php?Employer=<?=$i[Employer]?>'>
Edit this entry
</a>
<br>
//HERE IS WHERE I WANT TO LOAD THE iFRAME
</p>
</div>
</div>
</div>
<?php
}
?>
回答by Gerardo Lima
As @Sudhir and @Richard showed, you can solve this problem by deferring the load of iframecontents and it just takes a few javascript lines.
正如@Sudhir 和@Richard 所示，您可以通过推迟iframe内容加载来解决这个问题，它只需要几行 javascript 代码。
Sometimes, though, is more convenient to place the iframeelement into the source code instead of creating the element at runtime. Well, you can have it too, by initially creating the iframeelement pointing to about:blankand changing its source at runtime:
但是，有时将iframe元素放入源代码中比在运行时创建元素更方便。好吧，您也可以通过最初创建iframe指向about:blank并在运行时更改其源的元素来拥有它：
<html>
<head>
<script>
function loadDeferredIframe() {
// this function will load the Google homepage into the iframe
var iframe = document.getElementById("my-deferred-iframe");
iframe.src = "./" // here goes your url
};
window.onload = loadDeferredIframe;
</script>
</head>
<body>
<p>some content</p>
<!-- the following iframe will be rendered with no content -->
<iframe id="my-deferred-iframe" src="about:blank" />
<p>some content</p>
</body>
</html>
Edited for @PhilHowell: I hope the idea is clearer now.
为@PhilHowell 编辑：我希望这个想法现在更清楚了。
回答by Sudhir Bastakoti
Try adding at end of your body:
尝试在身体末端添加：
window.onload = function() {
var iframe = document.createElement('iframe');
iframe.style.display = "none";
iframe.src = your_iframe_source_url;
document.body.appendChild(iframe);
};
回答by Richard
If you want to, you can load your iframes once the page has loaed like this:
如果您愿意，您可以在页面加载后加载您的 iframe，如下所示：
I have used jquery for simplicity here:
为了简单起见，我在这里使用了 jquery：
$(function() {
$('<iframe />').attr('src', 'http://www.google.com').appendTo('#yourelementId');
});
see more here:
在这里查看更多：
http://jquery-howto.blogspot.co.uk/2010/02/dynamically-create-iframe-with-jquery.html
http://jquery-howto.blogspot.co.uk/2010/02/dynamically-create-iframe-with-jquery.html
So for PHP Echo:
所以对于 PHP Echo：
<?php
echo "<div id='yourelementId'></div><script>$(function() { $('<iframe />').attr('src', 'http://www.google.com').appendTo('#yourelementId');});</script>";
?>
Oh and make sure you have linked jQuery in or use the code that Sudhir has given.
哦，请确保您已链接 jQuery 或使用 Sudhir 提供的代码。
