加载iframe之后loadload

问题描述 投票:0回答:5

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

是@sudhir和@richard展示的,您可以通过推迟

iframe

内容的负载来解决此问题,并且只需几条JavaScript行。 不过,有时会更方便地将

iframe
元素放入源代码,而不是在运行时创建元素。好吧,您也可以通过创建指向
iframe
javascript iframe html load
5个回答
13
投票
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授予的:我希望这个想法现在更清晰。

trory在身体末端添加:

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

如果您想,一旦页面放在这样就可以加载iframe:
我在此处使用jQuery:

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

7
投票
在这里查看更多:

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

3
投票

JSiframeloader

php Echo的SO:

<?php

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

?>

oh,并确保您已链接jQuery或使用Sudhir给出的代码。

你可以懒惰加载iframe

<iframe src="someSrc.com" loading="lazy"></iframe>

要使页面的加载速度更快,您可以在加载iframes之前proce ost loading指示器(例如,throbber

在tab bar中的favicon周围)。

拥有一个空的iframe

等待页面的等待

等待另一毫秒(否则加载指示器将不会停止)

1
投票
设置iframe

的URL


0
投票

window.addEventListener("load", (event) => { setTimeout(() => { document.getElementById("myIframe").src="https://example.com/"; }, 1); }); <iframe id="myIframe"></iframe>

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.