仅加载 div iframe onclick答案

【问题标题】：Only load div iframe onclick仅加载 div iframe onclick
【发布时间】：2011-08-26 07:50:34
【问题描述】：

我有这部分代码。加载页面时，所有 div 也已加载但尚不可见。是一种在单击时开始加载 div 内容的方法吗？现在页面因为所有的div而变慢了

<a href="#?w=550" rel="popup_add_dossier" class="poplight" title="'.$lang['form_add'].'"><img src="images/icon/new.png" ></a>

<div id="popup_add_dossier" class="popup_block">
<iframe src="add_dossier.php" frameborder="0" scrolling="no" width="550" height="400">

【问题讨论】：

为什么不使用 AJAX 技术根据特定 DOM 事件而不是 iframe 动态加载 div 中的内容？
这个问题只涉及 JavaScript 和 HTML，为什么会被标记为php？

标签： html iframe

【解决方案1】：

jQuery 让它变得简单！

在下面的<head> 部分加载。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
jQuery(function(){
    $("iframe").each(function(){
        this.tmp = this.src;
        this.src = "";
    })
    .parent(".popup_block")
    .click(function(){
        var frame = $(this).children("iframe")[0];
        console.log(frame);        frame.src = frame.tmp;
    });
});
</script>

【讨论】：

【解决方案2】：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#button').click(function(){
        if(!$('#iframe').length) {
                $('#iframeHolder').html('<iframe id="iframe" src="http://google.com" width="700" height="450"></iframe>');
        }
    });   
});
</script>

<a id="button">Button</a>
<div id="iframeHolder"></div>

【讨论】：

我们如何将 src 从动态传递给 javascript 代码。

【解决方案3】：

您的意思是仅在单击元素时才将 iframe 加载到 div 中？如果是这样，您可以从 iframe 标记中删除 iframe src 属性，并仅在单击元素时设置 src。

在 iframe 上：

<iframe id='ifr' frameborder="0" scrolling="no" width="550" height="400">

在可点击元素上：

onClick='document.getElementById("ifr").src="add_dossier.php";'

【讨论】：

很好的解决方案，尽管我无法将 onclick 添加到图像 div 显示但为空。
你在iframe上添加了id吗？如果抛出一些错误，请查看 javascript 控制台
是的，我有。错误是 Uncaught SyntaxError: Unexpected token } 这是完整的行： echo '';
您在双引号属性中使用了 doblue 引号。 onClick 必须后跟单引号。这是正确的代码： echo '';