Load iFrame after page load

2019-01-26 17:43发布

站内问答 / JavaScript
1926 3 6

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.

Many thanks.

EDIT - The iFrame needs to appear within a PHP echo.

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

3条回答
forever°为你锁心
2楼-- · 2019-01-26 17:55

If you want to, you can load your iframes once the page has loaed like this:

I have used jquery for simplicity here:

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

JS Iframe loader

So for 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.

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
3楼-- · 2019-01-26 18:10

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);
};
查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
4楼-- · 2019-01-26 18:15

As @Sudhir and @Richard showed, you can solve this problem by deferring the load of iframe contents and it just takes a few javascript lines.

Sometimes, though, is more convenient to place the iframe element into the source code instead of creating the element at runtime. Well, you can have it too, by initially creating the iframe element pointing to about:blank and changing its source at runtime: 

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)