CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapiframe
Michael
Michael

Reputation: 13614

Using iframe inside tab

I have tab html element each tab contains iframe element.

Here is code:

<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>

Here is working jsfiddle.

But the problem that tab element not works properly when I change between tabs. Any idea why it's not working when I try to change between tabs?

Upvotes: 2

Views: 11945

Answers (1)

Devi Veeramalla
Devi Veeramalla

Reputation: 456

Because the iframe element isn't a self-closing element. The versions of Firefox and Safari you're using are treating the /> at the end as just > and assuming everything after it is contained within the 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>

Upvotes: 4

Related Questions