頁面加載后加載iFrame

Question

我有一個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
            }
        ?>

Answer 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編輯：我希望這個想法現在更加清晰。

Answer 2

嘗試在身體末端添加：


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

Answer 3

如果您願意，可以在頁面加載后加載您的iframe：

我在這里使用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 Echo：

<?php

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

?>

哦，確保你已經鏈接了jQuery或使用Sudhir給出的代碼。

頁面加載后加載iFrame

問題描述

3 個解決方案

解決方案1
7 2012-04-30 10:07:55

解決方案2
5 2012-04-30 08:53:15

解決方案3
2 2012-04-30 08:54:06

頁面加載后加載iFrame

問題描述

3 個解決方案

解決方案1 7 2012-04-30 10:07:55

解決方案2 5 2012-04-30 08:53:15

解決方案3 2 2012-04-30 08:54:06

解決方案1
7 2012-04-30 10:07:55

解決方案2
5 2012-04-30 08:53:15

解決方案3
2 2012-04-30 08:54:06