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