如何加載只有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