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 part

#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

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

1 个答案: