慕少3449830 ·HTML 框架
框架可以理解為在網頁中插入了一個獨立的網頁窗口元素，比較常用的框架元素是 iframe，iframe 有自己獨立的窗口 window 以及上下文，iframe 元素自己內部的邏輯操作可以獨立，當然在同域條件下，iframe 元素的窗口可以訪問父級窗口，父級窗口也可以訪問 iframe 窗口。
iframe 在網站應用刀耕火種的開發年代是非常常見的，現在前端應用嵌入 iframe 的場景越來越少了，但是在大型的網站中也會經常利用 iframe 嵌入多個網頁到一套網站系統中，方便用戶在一個系統中去進行業務操作，而不需要在幾個不同的系統中來回切換。
1. iframe
1.1 定義方式
在網頁中通過定義一個 iframe 標簽即可引用另一個網頁進來，例如：
<iframe src="http://www.baidu.com" height=500 width=500 /><!-- 通過src設置iframe的地址 -->
1.2 height width 屬性
通過設置 height 和 width 可以控制 iframe 的高和寬，但是實際項目中有時你并不知道所引用的 iframe 的寬高，或者說 iframe 的寬和高是動態不固定的，這時需要先獲取到引用的 iframe 的寬高，然后將值設置給其屬性，例如：
<iframe id="iframe" src="http://www.xianlaiwan.cn/wiki/html5/forms.html?preview=d2269b100476b4b77b9ddc11242e85ab" frameborder="1"></iframe><!--src的域名需要和當前網頁域名一直，否則跨域不能獲取iframe的contentWindow-->
<script>
var iframe = document.getElementById("iframe");//獲取iframe的dom節點
iframe.onload = function(){
var doc = this.contentWindow.document;
this.height = doc.documentElement.scrollHeight;//高度動態設置
this.width = doc.documentElement.scrollWidth;//寬度動態設置
}
</script>
注意： 上述代碼需要有一些 JavaScript 基礎才能理解，不了解的同學可以單擊 《JavaScript 入門教程》 學習。
1.3 frameborder 屬性
該屬性表示是否顯示 iframe 邊框，默認為 1 表示顯示邊框，0 表示隱藏，例如：
<iframe src="https://www.baidu.com" frameborder=0></iframe><!--無邊框-->
<iframe src="https://www.baidu.com" ></iframe><!--默認有邊框（很細的一個框，仔細看）-->
1.4 scrolling 屬性
該屬性表示是否顯示滾動條，默認根據 iframe 的尺寸來判斷是否需要滾動條，設置為 yes 時將始終顯示滾動條，設置為 no 時表示完全不顯示滾動條：
- auto 默認值
- yes 有滾動條
- no 無滾動條
默認值 auto 表示，當內容超過 iframe 高或寬時，自動出現滾動條。
<iframe src="https://www.baidu.com"></iframe><!--默認情下，在需要的情況下出現滾動條-->
<iframe src="https://www.baidu.com" scrolling='yes'></iframe><!--強制顯示滾動條-->
<iframe src="https://www.baidu.com" scrolling='no'></iframe><!--強制不顯示滾動條-->
1.5 srcdoc 屬性
該屬性定義在 iframe 展示的 HTML 描述代碼，該屬性不支持 IE 瀏覽器，例如：
<iframe src="https://www.baidu.com" srcdoc='<p>使用百度搜索</p>'></iframe>
如果瀏覽器支持 srcdoc 屬性，會只顯示 srcdoc 中的內容, 不支持的時候 ( IE ) 就顯示 src 指定的內容。
1.6 sandbox 屬性
該屬性用于表示對 iframe 的權限限制，可選值有：
- 空，表示限制所有權限
- allow-same-origin 允許相同源
- allow-top-navigation 允許包含導航欄
- allow-forms 允許表單提交
- allow-scripts 允許腳本執行
<iframe src="https://www.baidu.com" sandbox="" width=600 height=600>
</iframe>
執行上述代碼，會發現加載之后的百度首頁雖然顯示，但是并不能執行搜索，這是因為 sandbox 屬性設置為空字符串時，iframe 會限制框內網頁運行 JavaScript 腳本。
1.7 優缺點及建議
頁面引用 iframe 元素，相當于引用一個完整的 HTML 網頁。
這樣做的好處是：
- 代碼可復用性，相同的頁面無需重復實現，只需要引用即可；
- iframe 是一個封閉的運行環境，環境變量完全獨立、隔離，不會污染宿主環境；
- iframe 可以用于創建新的宿主環境，用于隔離或者訪問原始接口及對象，提升網站的安全性
缺點是：
- 被引用的 iframe 如果過多的話，可能會產生過量的 HTTP 請求；
- 跨域問題；
- 樣式不容易適配
基于 iframe 的優缺點來看，在實際項目開發中，一般用來加載廣告、播放器、富文本編輯器等非核心的或者需要格里運行的網頁代碼。
1.8 iframe 通信及跨域問題
1.8.1 iframe 通信
在使用 iframe 時難免會碰到需要在父窗口中使用 iframe 中的變量、或者在 iframe 框架中使用父窗口的變量，在 iframe 的域名和父窗口的域名完全一致的情況下，可以實現調用：
在父窗口中調用 iframe 元素的變量：
可以使用 contentWindow 的方式調用：
<iframe src='index.html' id='test' />
<script>
//父窗口調用 iframe 的window對象
var obj = document.getElementById("test").contentWindow;
</script>
上述代碼在父窗口中調用 iframe 元素的變量，以下是在 iframe 中調用父窗口的變量的方式：
在 iframe 中調用父窗口的變量：
<script>
var dom = window.top.document.getElementById("父窗口的元素ID");
</script>
兄弟 iframe 間相互調用變量：
<iframe src='index1.html' id='test1' />
<iframe src='index2.html' id='test2' />
<script>
var dom2 = window.top.document.getElementById("test2").contentWindow.getElementById("");//這里是在test1調用test2中的某個dom
</script>
1.8.2 跨域問題
但是，JavaScript 出于安全方面的考慮，不允許跨域調用其他頁面的對象。這樣在安全限制的同時也給 iframe 元素上帶來了不少麻煩，導致一個網頁中如果出現與當前域名不相同的 iframe，就無法通過 JavaScript 調用 iframe 中的 DOM 結點了 。
2. 小結
框是 HTML 中引用外部網頁的方式，本章介紹了 iframe 元素的使用方式，以及使用框的優缺點。在實際項目開發中需要結合網頁設計中的網絡加載時間、性能、代碼可用性等因素考慮，決定是否需要使用 iframe。
2025 imooc.com All Rights Reserved |