Bootstrap的Tab可以完全替代<iframe>標籤嗎？

01-09

自學摸索Web開發中..請指點一二..

不可以，& 中的 CSS/JS 環境都是與父窗口相互隔離的。不主動進行跨 context 通信的話兩個窗口的樣式和邏輯不會互相影響。

我需要打個比方。

如果說一個頁面是一個容器，裡面裝了水，那麼，iframe就是另外一個小的但是獨立的容器，所以說，你的池子里放了一個紮緊的透明塑料袋，袋子里的水即使有顏色，也不會染到池子。

所以iframe最重要的一點就是隔離，隔離樣式，隔離邏輯，隔離各種東西。

而不管是tab，還是其他什麼HTML元素形成的容器，它們還是在原先的那個作用域中，就好比一個不紮緊的透明塑料袋，外面的池水被染成什麼顏色，袋子里也會變得一樣。

iframe很強大的說，你可以用iframe實現輕鬆地實現組件的復用（不過這個組件與外部的互動性就較低了）。因為不受父窗口影響的緣故，實際上處理好的iframe可以一定程度上發揮shadow Dom的作用，而且可以使你寫好的iframe里的樣式不會被外部樣式和布局影響。

另外看到自學的時候用bootstrap學習，聯想起自己的悲慘學習經歷，特想啰嗦幾句。。。

另外說一下哈，bootstrap、Foundation等等許多柵格布局的web前端框架在前期還是不要太過依賴的好，如果玩玩當然無所謂，但是如果真的想深一些的話框架會讓你進步非常緩慢的。

看題主在自學web開發，又是前端，那麼CSS必然是繞不過去的大坑，然而框架會幫你填平太多瀏覽器之間的兼容問題、針對userAgent的reset樣式，用柵格實現布局時，會缺少很多實用的CSS細節（CSS除了幾個概念以外可全是細節啊！）。

另外，像tab這種小玩意，你也可以自己動手寫出來，而且可以寫出非常多個版本的tab來（至少有ECMA和jquery實現兩種吧~），而具體下來你可以從一個細節裡面學會很多種不同的實現方法，體會他們的利弊長短，比如click事件吧，你可以寫jquery的.click()/.on()/.live()，.attr("onclick",your function)，也可以試試ECMA的bindEventListener啊等等等等，還可以直接寫進標籤裡面

話說多了，歸根到底是這種針對樣式布局的前端框架（其實認為叫模板更加貼切一些...）幫你做了太多咱不應該忽略的事情，方便了你的同時也束縛了你的視野和思維。方便開發但是耽誤學習啊。。當然咯，bootstrap的源碼你都可以看，仔細地閱讀它的css和js，還是很有好處的（尤其是CSS，幫助你認真理解選擇器和許多細節，我因為需要曾把bootstrap.css改成扁平風格的，那段時間對選擇器的理解好了很多，而CSS選擇器用好了對jQuery幫助很大）。

好像很啰嗦地說了很多題外話，但是真的希望大家學習web前端知識的時候能夠不要急於求成揠苗助長哦~~

共勉之~