如何加载只有div标签的iframe显示

Question

我有工作div显示/隐藏页面。现在我想添加聊天框。聊天框嵌入在iframe中。这里演示： https://jsfiddle.net/3uwxsjtb/1/

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

CSS部分

#faqbox { 
    display: none; 
} 

#faqbox:target { 
    display: block; 
} 

Answer 1

您可以点击添加后，您的iframe，因为用CSS只有IFRAME总是被加载。

试试这个用jQuery： HTML：

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

的jQuery：

$(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(); 
    }); 
}); 

EXAMPLE