在选项卡内使用 iframe

Posted 2023-05-09

【中文标题】在选项卡内使用 iframe

【英文标题】：Using iframe inside tab

【发布时间】：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/"   /> 
    </div>
    <div class="tab-pane" id="profile">
        <iframe src="http://edition.cnn.com/"   />
    </div>
    <div class="tab-pane" id="messages">
        <iframe src="http://news.sky.com/"   />    
    </div>           
</div>

这里正在工作jsfiddle。

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

【问题讨论】：

iframe 必须有结束标签：

Nice Devi，将其发布为答案。

在这里查看这个解决方案：***.com/questions/13307518/…

【参考方案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/"   ></iframe> 
    </div>
    <div class="tab-pane" id="profile">
        <iframe src="http://edition.cnn.com/"  ></iframe>
    </div>
    <div class="tab-pane" id="messages">
        <iframe src="http://news.sky.com/"   ></iframe>   
    </div>           
</div>

【讨论】：

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