們先來看個例子：

在這個網頁中，同時在一個頁面中展示了三個網站：千鋒教育官網、千鋒教育HTML5大前端官網、千鋒教育HTML5大前端好程序員官網。這是如何做到的呢？

其實也不難，使用 iframe 就可以實現了。 iframe的作用 是，用來在一個網頁中顯示另一個網頁。

iframe 是個雙標簽，基本語法為：尖角號iframe，尖角號 /iframe。

iframe 標簽有五個基本屬性：

src 屬性，資源的意思，用以引入其他網站的頁面，值是一個頁面路徑。

width 屬性，寬度的意思，用以控制引入頁面的寬度，值是一個數字。

height 屬性，高度的意思，用以控制引入頁面的高度，值是一個數字。

frameborder 屬性，框架邊框的意思，默認引入的框架帶有邊框，通常情況下將該屬性值設置為0，來取消框架的邊框。

scrolling[?skr??l??] 屬性，滾動的意思，用來控制是否顯示框架的滾動條，值有三個：

auto，在需要的情況下出現滾動條，也是默認值。

yes，始終顯示滾動條。

no，從不顯示滾動條。

我們來做個例子。

打開編輯器，新建一個 iframe-demo.html 文件，補全基礎代碼，在 body 里添加 iframe 標簽，首先定義 src 屬性，值為 http://www.qfedu.com，frameborder 屬性的值設置為1，顯示邊框。保存頁面。

在瀏覽器中打開頁面。千鋒教育的官網在 iframe 的默認大小的窗口里顯示了。

返回編輯器，給 iframe 定義屬性 width 等 800，height 等于 600，保存。

回到瀏覽器，刷新，iframe 的窗口變大了。可以通過滾動條查看網站內容。

返回編輯器，如果給iframe 定義一個scrolling 屬性，值為 no 的話，滾動條就不見了。

回到瀏覽器，刷新。此時就不能查看窗口隱藏的內容了。

iframe 也可以作為一個鏈接的目標框架。鏈接的 target 屬性必須設置為 iframe 的 name 屬性。

比如給 iframe 定義 name 屬性的值為 iframe_a，鏈接 a 的 target 屬性值也設置為 iframe_a。這樣，當點擊鏈接時，千鋒教育的官網就在這個 iframe 窗口里打開了。

<iframe name="iframe_a">

<a href="http://www.qfedu.com/" target="iframe_a">千鋒教育</a>

我們再來看個例子，當點擊三個鏈接，iframe 里顯示了相應鏈接的網站。

我們來實現這個例子。

回到編輯器，創建一個 iframe-example.html 文件，補全基本代碼，在 body 里添加一個 div 容器，在容器里添加一個 iframe，定義屬性 src 等于 http://qfedu.com，width 等于 800，height 等于 600。保存。

在瀏覽器中打開頁面，一個 iframe 框架做好了。

回到編輯器，在 body 里的第一行再添加一個 div 容器，在容器里書寫 emmet 命令：a 中括號 href 空格 target 等于 iframe_a 大于號 b 乘以 3， a[href target=iframe_a]>b*3 按下 tab 鍵自動補全代碼。很明顯，這不是我們要的代碼。

這怎么辦呢？聰明的你一定想到了，在小學數學里，通過添加小括號來設置運算優先級的法則。

我們在 a 的前面，b 的后面填上一對括號， (a[href target=iframe_a]>b)*3 我們把這個 emmet 放到注釋里保存一下。

將光標移至 emmet 語句的結尾，按下 tab。期望的代碼生成了。

如果你是完美主義者，這個代碼你也不滿意，能不能換行顯示三個 a 標簽呢？大家跟我一起做：

點擊 VSCode 左下角的齒輪圖標，再點擊設置，打開設置窗口。

點擊擴展菜單，再點擊 emmet，找到 Syntax(森太課思) Profiles，在 settings（賽ten 思）.json 中編輯。

在這里輸入 html 冒號 大括號，在大括號里寫入 inline_break 冒號 2，表示標簽數大于 兩 組，就折行顯示。

"html": {

"inline_break": 2

},

關閉設置。

把剛才保存的 emmet 命令再拷貝過來，按下 tab 鍵，完美的代碼生成了！

給三個a 標簽填好鏈接地址和文本內容。

這里需要注意，a 鏈接的地址可以是互聯網的網站地址，也可以是你自己制作的本地頁面地址，這些頁面都可以在 iframe 中顯示。

我們發現三個鏈接的target屬性都指向了同一個iframe。保存一下頁面。

回到瀏覽器，刷新。分別點擊三個鏈接，iframe 里分別顯示了三個網站的頁面。

文章配套視頻鏈接「鏈接」

frame 對象

iframe 對象代表一個 HTML 的內聯框架。

在 HTML 文檔中 <iframe> 每出現一次，一個 IFrame 對象就會被創建。

iframe元素對象的訪問方法與Frameset對象類似,在父文檔中訪問iframe元素對象的屬性可通過如下方式:

document.all.iframeID.property
window.frames[iframeID].property
document.getElementById(iframeID).property

在包含iframe元素對象的文檔內,可通過如下方式訪問該iframe元素對象

parent.document.all.iframesetID.property
parent.document.getElementById(FramesetID).property

對象的屬性

align 根據周圍的文字排列 iframe。

contentDocument 容納框架的內容的文檔。

frameBorder 設置或返回是否顯示 iframe 周圍的邊框。

height 設置或返回 iframe 的高度。

id 設置或返回 iframe 的 id。

longDesc 設置或返回描述 iframe 內容的文檔的 URL。

marginHeight 設置或返回 iframe 的頂部和底部的頁空白。

marginWidth 設置或返回 iframe 的左側和右側的頁空白。

name 設置或返回 iframe 的名稱。

scrolling 設置或返回 iframe 是否可擁有滾動條。

src 設置或返回應載入 iframe 中的文檔的 URL。

width 設置或返回 iframe 的寬度。

標準屬性

className 設置或返回元素的 class 屬性。

dir 設置或返回文本的方向。

lang 設置或返回元素的語言代碼。

title 設置或返回元素的 title 屬性。