Javascript 如何仅使用div标记show加载iframe

我有工作div显示/隐藏页面。现在我想添加聊天框到它。聊天框嵌入在iframe中。此处演示：

---

您可以在单击后添加iframe，因为使用css时，始终只加载iframe

用jQuery试试这个： HTML:

你好

jQuery：

$（文档）.ready（函数（）{
$（'.load iframe'）。单击（函数（）{
$（'.content'）。追加（''）；
});
$（'.hide'）。单击（函数（ev）{
ev.preventDefault（）；
$（文档）.find（'#iframe'）.remove（）；
});
});

---

非常感谢，它现在可以工作了，但也带来了另一个问题：每当你再次隐藏和显示聊天室时，聊天室就会被添加。有什么想法可以避免吗？我已经编辑了代码和示例！很高兴能帮助你：）

<div>
<a href="#faqbox">
<div>Chat here</div>
</a>
<div id="faqbox">
<pre>Hello 
<!-- How load this iframe only when div show  clicked. -->
<!-- <iframe src="https://hack.chat/?etcj399c" width="50%" height="200" frameborder="0"></iframe> -->

</pre>
<a href="#">Hide</a></div>
</div>

#faqbox {
    display: none;
}

#faqbox:target {
    display: block;
}

<div>
<a href="#faqbox">
<div class="load-iframe">Chat here</div>
</a>
<div id="faqbox">
<pre class="content">Hello 


</pre>
<a href="#" class="hide">Hide</a></div>
</div>

$(document).ready(function(){
    $('.load-iframe').click(function(){
         $('.content').append('<div id="iframe"><iframe src="https://hack.chat/?etcj399c" width="50%" height="200" frameborder="0"></iframe></div>');
    });

    $('.hide').click(function(ev){
         ev.preventDefault();
         $(document).find('#iframe').remove();
    });
});