<iframe>標籤
- 2019 年 11 月 29 日
- 筆記
用途
<iframe> 標籤（又稱內聯框架元素）表示了一個嵌套的瀏覽上下文(browsing context)，實際上是用來在當前頁面中內嵌另一個HTML頁面。
例子
<iframe src="./iframe"></iframe>
標準屬性
|
屬性 |
描述 |
H5新 |
|---|---|---|
|
height |
像素格式，或百分比格式指定frame的高度。 |
|
|
name |
像素格式，或百分比格式指定frame的高度。 |
|
|
sandbox |
啟用一系列對<iframe>中內容的額外限制。allow-same-origin: 允許將內容作為普通來源對待。如果未使用該關鍵字，嵌入的內容將被視為一個獨立的源。link(拖動數據會產生指向原始數據的鏈接)。allow-top-navigation:嵌入的頁面的上下文可以導航（載入）內容到頂級的瀏覽上下文環境（browsing context）。如果未使用該關鍵字，這個操作將不可用。allow-forms: 允許嵌入的瀏覽上下文可以提交表單。如果該關鍵字未使用，該操作將不可用allow-scripts: 允許嵌入的瀏覽上下文運行腳本（但不能window創建彈窗）。如果該關鍵字未使用，這項操作不可用。 |
✔ |
|
seamless |
規定 <iframe> 渲染成是容器頁面文檔的一部分。 |
✔ |
|
src |
嵌套頁面的URL地址。 |
|
|
srcdoc |
規定在 <iframe> 中顯示的頁面的 HTML 內容。 |
✔ |
|
width |
像素格式，或以百分比格式指定frame的寬度。 |
|
- allow-same-origin: 允許將內容作為普通來源對待。如果未使用該關鍵字，嵌入的內容將被視為一個獨立的源。
- link(拖動數據會產生指向原始數據的鏈接)。
- allow-top-navigation:嵌入的頁面的上下文可以導航（載入）內容到頂級的瀏覽上下文環境（browsing context）。如果未使用該關鍵字，這個操作將不可用。
- allow-forms: 允許嵌入的瀏覽上下文可以提交表單。如果該關鍵字未使用，該操作將不可用
- allow-scripts: 允許嵌入的瀏覽上下文運行腳本（但不能window創建彈窗）。如果該關鍵字未使用，這項操作不可用。
✔seamless規定 <iframe> 渲染成是容器頁面文檔的一部分。✔src嵌套頁面的URL地址。 srcdoc規定在 <iframe> 中顯示的頁面的 HTML 內容。✔width像素格式，或以百分比格式指定frame的寬度。
變更點
<iframe> 標籤在HTML5與HTML4.01之間存在如下差異
- HTML5有一些新的屬性，同時不再支援以下的HTML4.01屬性
- longdesc 規定一個頁面，該頁面包含了有關 iframe 的較長描述。
- marginheight 框架內容到框架的上下邊距，以像素格式表示。
- marginwidth 規定是否在 iframe 中顯示滾動條。
- scrolling 原用於指定目標 URL 與當前文檔之間的關係。
表格資料：
