在选项卡内使用 iframe答案

【问题标题】：Using iframe inside tab在选项卡内使用 iframe
【发布时间】：2017-06-01 06:23:54
【问题描述】：

我有标签 html 元素，每个标签都包含 iframe 元素。

代码如下：

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a data-target="#home" data-toggle="tab">BBC</a></li>
    <li><a data-target="#profile" data-toggle="tab">CNN</a></li>
    <li><a data-target="#messages" data-toggle="tab">Sky news</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">
        <iframe src="http://www.bbc.com/" height="500px" width="100%" /> 
    </div>
    <div class="tab-pane" id="profile">
        <iframe src="http://edition.cnn.com/" height="500px" width="100%" />
    </div>
    <div class="tab-pane" id="messages">
        <iframe src="http://news.sky.com/" height="500px" width="100%" />    
    </div>           
</div>

这里正在工作jsfiddle。

但是当我在选项卡之间切换时选项卡元素无法正常工作的问题。知道为什么当我尝试在选项卡之间切换时它不起作用吗？

【问题讨论】：

iframe 必须有结束标签：bbc.com" height="500px" width="100%" >
Nice Devi，将其发布为答案。
在这里查看这个解决方案：stackoverflow.com/questions/13307518/…

标签： jquery html twitter-bootstrap iframe

【解决方案1】：

因为 iframe 元素不是自闭合元素。您使用的 Firefox 和 Safari 版本将末尾的 /> 视为 > 并假设它之后的所有内容都包含在 iframe 中。

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a data-target="#home" data-toggle="tab">BBC</a></li>
    <li><a data-target="#profile" data-toggle="tab">CNN</a></li>
    <li><a data-target="#messages" data-toggle="tab">Sky news</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">
        <iframe src="http://www.bbc.com/" height="500px" width="100%" ></iframe> 
    </div>
    <div class="tab-pane" id="profile">
        <iframe src="http://edition.cnn.com/" height="500px" width="100%"></iframe>
    </div>
    <div class="tab-pane" id="messages">
        <iframe src="http://news.sky.com/" height="500px" width="100%" ></iframe>   
    </div>           
</div>

【讨论】：

就像一个注释一样，在标签显示上延迟加载 iframe 的内容会更好，例如：jsfiddle.net/r1bausx7