页面加载后的负荷的iFrame(Load iFrame after page load)

2019-06-24 01:31发布

我有与导致页面很慢加载一些iFrame的PHP页面。 我如何去仅载入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
            }
        ?>

Answer 1:

试着在你的身体的末尾增加:


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


Answer 2:

作为@Sudhir和@Richard显示,您可以通过推迟的负载解决这个问题iframe内容,它只是需要一些JavaScript的线条。

但是,有时是更方便的地方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>

编辑的@PhilHowell:我希望这个想法更清晰了。



Answer 3:

如果你愿意,你可以一旦页面loaed这样加载您的I帧:

我已经使用jQuery的为简单起见,在这里:

$(function() {

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

});

看到更多在这里:

http://jquery-howto.blogspot.co.uk/2010/02/dynamically-create-iframe-with-jquery.html

JS的iFrame装载机

因此,对于PHP回声:

<?php

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

?>

哦,请确保您已连接的jQuery或使用的Sudhir给了代码。



文章来源: Load iFrame after page load