HTML內聯框架元素 iframe

html內聯框架元素 ( iframe) 表示巢狀的browsing context。它能夠將另乙個html頁面嵌入到當前頁面中。

每個嵌入的瀏覽上下文（embedded browsing context）都有自己的會話歷史記錄(session history)和dom樹。包含嵌入內容的瀏覽上下文稱為父級瀏覽上下文。頂級瀏覽上下文（沒有父級）通常是由 window 物件表示的瀏覽器視窗。

<
!-- 通過使用框架,你可以在同乙個瀏覽器視窗中顯示不止乙個頁面 --
>
="container"
>
src=
""height=
"600"
width=
"1920"
frameborder=
"0">
<
/iframe>
<
/div>

<
!--配合a標籤使用--
>
="container"
>
"iframe_a" width=
"1000" height=
"200"
>
your browser does not support iframes.
<
/h1>
<
/iframe>
"" target=
"iframe_a"
>go iframe<
/a>
<
/div>

<
!-- window.open方法和iframe的結合使用--
>
="container"
>
name=
"iframe_c"
frameborder=
"0" height=
"600"
width=
"1920"
>
<
/iframe>
<
/div>
window.
open
('','iframe_c'
)<
/script>

如果不是很懂，參考總結的window.open()方法

="container"
>
src=
"iframe_01.html"
name=
"iframe_b"
width=
"1000"
height=
"200"
id="myiframe"
>
<
/iframe>
"" target=
"iframe_b"
>go iframe<
/a>
<
/div>
iframe的src屬性指向乙個html檔案，該檔案裡面的內容就是iframe的預設內容。

通過指令碼來訪問

以下來自mdn

父視窗訪問子視窗

="container"
>
src=
"" name=
"iframe_b"
width=
"1000"
height=
"200"
id="myiframe"
>
<
/iframe>
<
/div>
// console.log(window.frames.length) 返回值根據: 當前瀏覽器視窗有幾個html內聯框架元素
const iframe = document.
queryselector
('#myiframe'
)const iframewindow = iframe.contentwindow
iframewindow.document.body.innerhtml =
'學習iframe'
iframewindow.document.body.style.backgroundcolor =
'pink'
iframewindow.document.body.style.fontsize =
'20px'
iframewindow.document.body.style.color =
'#fff' 
如果iframe的src屬性有了預設值，就修改不了，先做一下簡單記錄，等遇到這個需求再研究。

指令碼

內聯的框架，就像元素一樣，會被包含在 window.frames 偽陣列（類陣列的物件）中。

有了 dom htmliframeelement 物件，指令碼可以通過 contentwindow 訪問內聯框架的 window 物件。 contentdocument 屬性則引用了內部的 document 元素，(等同於使用contentwindow.document），但ie8-不支援。

在框架內部，指令碼可以通過 window.parent 引用父視窗物件。

重點注意: 是否可以跨域訪問

一、指令碼訪問框架內容必須遵守同源策略，並且無法訪問非同源的 window 物件的幾乎所有屬性。

二、同源策略同樣適用於子窗體訪問父窗體的 window 物件。

三、跨域通訊可以通過window.postmessage來實現。

mdn: postmessage

HTML內聯框架元素 iframe

html 框架內聯框架

html 塊元素內聯元素內聯塊元素練習

HTML內聯框架iframe

HTML內聯框架元素 iframe

html 框架 內聯框架

html 塊元素 內聯元素 內聯塊元素 練習

HTML內聯框架iframe

相關推薦

html 框架內聯框架

html 塊元素內聯元素內聯塊元素練習