仅当单击元素时才在 div 中加载 iframe答案

【问题标题】：Load the iframe inside the div only when an element is clicked仅当单击元素时才在 div 中加载 iframe
【发布时间】：2016-10-12 14:52:50
【问题描述】：

当页面被加载时，所有的 div 也被加载但还不可见。有没有办法在单击时开始加载 div 的内容？现在页面因为所有的 div 而变慢了。我已经测试过这会删除除一个 div 之外的所有内容，并且页面速度要快得多。

如何防止在点击链接之前加载所有数据？

标题

<script type="text/javascript">
$(document).ready(function(){

    $.fn.popOpen = function(){

        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query & Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value


        //Fade in the Popup and add close button
        $('#' + popID).fadeIn('slow').css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="images/icon/delete.png" class="btn_close" title="<?php echo $lang['sluit'] ?>" /></a>');

        //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
        var popMargTop = ($('#' + popID).height() + 20) / 2;
        var popMargLeft = ($('#' + popID).width() + 20) / 2;

        //Apply Margin to Popup
        $('#' + popID).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
    };

    //When you click on a link with class of poplight and the href starts with a #
    $('a.poplight[href^=#]').live('click', function() {
        $(this).popOpen(); //Run popOpen function on click
        return false;
    });

    //Close Popups and Fade Layer
    //$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('a.close').live('click', function() { //When clicking on the close...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  //fade them both out
            location.reload(); // reload page
        });
        return false;
    });
});
</script>

分区

<div id="popup_planning_opmerking'.$row['planning_id'].'" class="popup_block">
                                    <iframe id="ifr_2_'.$row['planning_id'].'" frameborder="0" scrolling="no" width="525" height="300">
                                    </iframe>
                                    </div>

弹出窗口的链接

<?php
echo '<td><a href="#?w=525" rel="popup_planning_opmerking'.$row['planning_id'].'" class="poplight" title="'.$lang['form_submit'].'"><img align="center" src="images/icon/edit_sm.png" onClick=\'document.getElementById("ifr_2_'.$row['planning_id'].'").src="planning_opmerking.php?id='.$row['planning_id'].'";\' /></a>';
?>

输出

                              <td nowrap class="editable_select_plaatnr" id="planning_platen|plaat_no|13718|planning_snijden"></td><td><a href="#?w=525" rel="popup_planning_opmerking13718" class="poplight" title="Verstuur"><img align="center" src="images/icon/edit_sm.png" onClick='document.getElementById("ifr_2_13718").src="planning_opmerking.php?id=13718";' /></a> <a href="#?w=400" rel="popup_delete_planning13718" class="poplight" title="Verstuur"><img align="center" src="images/icon/delete_sm.png" onClick='document.getElementById("ifr_3_13718").src="planning_delete.php?id=13718";' /></a></td>
                              <td></td>
                              <td class="row_right"></td>
                              </tr>
                              <tr>
                                  <td> <div id="details13718"></div> </td>
                              </tr>
                            <div id="popup_planning_gereed13718" class="popup_block">
                            <iframe id="ifr_1_13718" frameborder="0" width="600" height="725">
                            </iframe>
                            </div>

                            <div id="popup_planning_opmerking13718" class="popup_block">
                            <iframe id="ifr_2_13718" frameborder="0" scrolling="no" width="525" height="300">
                            </iframe>
                            </div>

【问题讨论】：

this jsbin和你的界面类似吗？
我添加了截图和输出代码@Aelliott1485
hmm 那么带有链接的表格单元格（即<td><a href="#?w=525"...）是在页面加载时或之后添加的吗？您可以考虑的一个选项是，不要在 iframe 上设置 src 属性，而是提交一个表单，并将表单的 action 设置为您想要的 URL，然后设置表单的 target提交等于 iframe 的 name 属性...

标签： javascript html

【解决方案1】：

如果您在单击链接时可以同时访问<a> 和<div> 元素，您能否不简单地将<iframe> url 作为一些自定义url 添加到<a> 元素并附加一个新的@ 987654325@ 什么时候让 div 可见？

【讨论】：