页面加载后加载 iFrame答案

【问题标题】：Load iFrame after page load页面加载后加载 iFrame
【发布时间】：2012-04-30 08:45:19
【问题描述】：

我有一个带有一些 iFrame 的 PHP 页面，这些 iFrame 会导致页面加载速度相当慢。页面完全加载后，如何仅加载这些 iFrame？我假设我需要使用 JavaScript，但我还没有找到有效的代码。

非常感谢。

编辑 - iFrame 需要出现在 PHP 回显中。

代码如下：

<?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
            }
        ?>

【问题讨论】：

使用 jquery $(document).ready(function(){ //在此处添加代码 });
nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain
嗯 - 这不起作用。它在 MySQL 回显中 - 这是一个问题吗？

标签： javascript iframe html load

【解决方案1】：

正如@Sudhir 和@Richard 所示，您可以通过延迟加载iframe 内容来解决此问题，并且只需要几行javascript 行。

不过，有时将iframe 元素放入源代码比在运行时创建元素更方便。好吧，您也可以拥有它，首先创建指向about:blank 的iframe 元素并在运行时更改其源：

<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>

为@PhilHowell 编辑：我希望这个想法现在更清楚了。

【讨论】：

谢谢 - 我如何调用 loadDeferredIframe？
...从页面初始化函数就是。我不确定你的意思。
@PhilHowell 只需从您用于window.onload 的函数内部调用loadDeferredIframe()。如果你没有这个功能，你可以这样做：window.onload = loadDeferredIframe;
我很抱歉 - 我不关注。您能否将您的原始帖子附上分步说明？非常感谢。
根本不工作 :S - 已停止大部分脚本在现有页面上工作 crbase.phil-howell.com/employers/pag.php

【解决方案2】：

尝试在正文末尾添加：


window.onload = function() {
    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = your_iframe_source_url;
    document.body.appendChild(iframe);
};

【讨论】：

【解决方案3】：

如果您愿意，您可以在页面加载后加载 iframe，如下所示：

为了简单起见，我在这里使用了 jquery：

$(function() {

   $('<iframe />').attr('src', 'http://www.google.com').appendTo('#yourelementId'); 

});

JS Iframe loader

所以对于 PHP Echo：

<?php

  echo "<div id='yourelementId'></div><script>$(function() { $('<iframe />').attr('src', 'http://www.google.com').appendTo('#yourelementId');});</script>"; 

?>

哦，请确保您已将 jQuery 链接到或使用 Sudhir 提供的代码。

【讨论】：

我需要在 echo 中显示另一个表中的信息。
您链接到的页面中似乎没有任何 jQuery 或任何其他脚本。
?我已经用代码修改了我的原始帖子。不知道这是否会让事情变得更清楚......
恐怕我对jQuery不是很熟悉。