页面加载后加载 iFrame [英] Load iFrame after page load

查看：17
本文介绍了页面加载后加载 iFrame的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

非常感谢.

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

代码如下:

<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 class='dhtmlgoodies_answer'><div><div style='background-color:#FFF;左边距:248px；填充:10px；颜色:#666'><?=$i[地址]?><br><?=$i[面积]?><br><a href='http://maps.google.com/maps?q=<?=$i[Postcode]?>'><?=$i[Postcode]?></＜＜<p><?=$i[ContactName]?><br><?=$i[电话号码]?>

<p><a href='http://crbase.phil-howell.com/view.php?Employer=<?=$i[Employer]?>'>编辑此条目</a><br>//这里是我想加载 iFRAME 的地方</p>

<?php}?>

解决方案

正如@Sudhir 和@Richard 所展示的，你可以通过延迟iframe 内容的加载来解决这个问题，只需要几个javascript 行.

不过，有时将 iframe 元素放入源代码中比在运行时创建元素更方便.好吧，您也可以通过最初创建指向 about:blank 的 iframe 元素并在运行时更改其源来获得它:

<头><脚本>函数 loadDeferredIframe() {//这个函数会将谷歌主页加载到 iframe 中var iframe = document.getElementById("my-deferred-iframe");iframe.src = "./"//这里是你的 url};window.onload = loadDeferredIframe;<身体><p>一些内容</p><!-- 将在没有内容的情况下呈现以下 iframe --><iframe id="my-deferred-iframe" src="about:blank"/><p>一些内容</p>

为@PhilHowell 我希望这个想法现在更清晰了.

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

解决方案

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.

这篇关于页面加载后加载 iFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆