如何仅使用div标签显示加载iframe

I have working div show/hide page. Now I would like to add chat box into it. The chat box is embedded in iframe. Demo here: https://jsfiddle.net/3uwxsjtb/1/

我有工作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 part

css部分

#faqbox {
    display: none;
}

#faqbox:target {
    display: block;
}

1 个解决方案

#1

you can add your iframe after the click, because with css only the iframe is loaded always.

您可以在点击后添加iframe，因为使用css时只会加载iframe。

try this with jQuery: HTML:

尝试使用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:

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

例

#1