HTML內聯框架元素()表示嵌套的browsing context。它能夠將另一個HTML頁面嵌入到當前頁面中。
瀏覽器支持
示例
標記一個內聯框架:
標簽定義及使用說明
- 標簽創建包含另一個文檔的行內框架,被用來在當前 HTML 文檔中嵌入另一個文檔。
- 可以把需要的文本放置在和之間,這樣就可以應對不支持的瀏覽器。
- 使用 CSS 為(包括滾動條)定義樣式。
腳本
內聯的框架,就像元素一樣,會被包含在window.frames偽數組(類數組的對象)中。
有了DOMHTMLIFrameElement對象,腳本可以通過contentWindow訪問內聯框架的window對象。contentDocument屬性則引用了內部的document元素,(等同于使用contentWindow.document),但IE8-不支持。
在框架內部,腳本可以通過window.parent引用父窗口對象。
腳本訪問框架內容必須遵守同源策略,并且無法訪問非同源的window對象的幾乎所有屬性。同源策略同樣適用于子窗體訪問父窗體的window對象。跨域通信可以通過window.postMessage來實現。
定位和縮放
作為一個可替換元素,可以使用object-position和object-fit來定位、對齊、縮放元素內的文檔。
屬性
屬性值描述
| align | leftrighttopmiddlebottom | HTML5 不支持。HTML 4.01 已廢棄。規定如何根據周圍的元素來對齊。 |
| frameborder | 10 | HTML5 不支持。規定是否顯示周圍的邊框。 |
| height | pixels | 規定的高度。 |
| longdesc | URL | HTML5 不支持。規定一個頁面,該頁面包含了有關的較長描述。 |
| marginheight | pixels | HTML5 不支持。規定的頂部和底部的邊距。 |
| marginwidth | pixels | HTML5 不支持。規定的左側和右側的邊距。 |
| name | name | 規定的名稱。 |
| sandbox HTML5新增 | ""allow-formsallow-same-originallow-scriptsallow-top-navigation | 對的內容定義一系列額外的限制。 |
| scrolling | yesnoauto | HTML5 不支持。規定是否在中顯示滾動條。 |
| seamless HTML5新增 | seamless | 規定看起來像是父文檔中的一部分。 |
| src | URL | 規定在中顯示的文檔的 URL。 |
| srcdoc HTML5新增 | HTML_code | 規定頁面中的 HTML 內容顯示在中。 |
| width | pixels | 規定的寬度。 |
HTML 4.01 與 HTML 5 之間的差異
HTML5 新增了一些新的屬性,同時去掉了 HTML 4.01 中的一些屬性。
HTML 與 XHTML 之間的差異
在 XHTML 中,name 屬性已被廢棄,并將被去掉。請使用 id 屬性代替。
全局屬性
標簽支持HTML 的全局屬性。
事件屬性
標簽支持HTML 的事件屬性。
無障礙環境
使用的title屬性來標識框架的主要內容,這樣可以極大方便使用輔助技術(例如屏幕閱讀器)瀏覽網頁的人。框架的標題應該清楚地描述框架的內容,例如:

如果沒有標題,他們就只能瀏覽每一個框架來獲取需要的內容。這非常耗時間,也很容易讓人迷惑,尤其是當頁面中包含很多框架或者互動內容如音視頻等的時候。
例子
下面的例子中,我們創建了一個框架。當用戶點擊框架中的按鈕時,瀏覽器會彈出一個提示框。
your browser does not support iframes.
下面的例子演示了在框架中展示谷歌地圖。
see bigger map