Html 仅加载 div iframe onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6015809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Only load div iframe onclick
提问by Muiter
I have this part of code. When the page is loaded also all div's are loaded but not yet visible. Is the an way to start loading the content of the div when it's clicked? Now the page is slowed down because of all div's
我有这部分代码。加载页面时，所有 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">
回答by mck89
Do you mean load the iframe inside the div only when an element is clicked? If so you can delete the iframe src attribute from the iframe tag and set the src only when the element is clicked.
您的意思是仅在单击元素时才在 div 内加载 iframe 吗？如果是这样，您可以从 iframe 标记中删除 iframe src 属性，并仅在单击元素时设置 src。
On the iframe:
在 iframe 上：
<iframe id='ifr' frameborder="0" scrolling="no" width="550" height="400">
On the clickable element:
在可点击元素上：
onClick='document.getElementById("ifr").src="add_dossier.php";'
回答by senta
jQuery makes it easy!
jQuery 让一切变得简单！
Load below in the <head>section.
在下面的<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>
回答by user869048
<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>
