深入了解iframe參數

一、src參數

src參數是什麼

src參數指定了iframe所要載入的頁面的URL或文件的URL。當使用此參數時，路徑必須是絕對路徑。

src參數示例代碼

<iframe src="http://www.example.com"></iframe>

如何使用src參數

src參數可以用於載入外部網址或本地文件。例如，使用src參數將一個HTML文件嵌入到另一個HTML文件中：

<iframe src="inner.html"></iframe>

在上述代碼中，inner.html必須在當前HTML文件的同一目錄下。

二、width和height參數

width和height參數是什麼

width和height參數分別設置iframe的寬度和高度。它們既可以用百分比表示，也可以用像素表示。

width和height參數示例代碼

<iframe src="http://www.example.com" width="100%" height="500px"></iframe>

如何使用width和height參數

在沒有指定之前，iframe的默認大小是0像素×0像素。當iframe尺寸不足以容納其內容時，當然要調整尺寸。因此，我們可以使用width和height參數來定義iframe的大小。

例如，我們可以將一個HTML文件嵌入到另一個HTML文件中，並設置iframe的寬度和高度，使其自適應父元素的大小：

<iframe src="inner.html" width="100%" height="100%"></iframe>

三、sandbox參數

sandbox參數是什麼

sandbox參數是一個屬性，它允許您在iframe中創建包含受限制的腳本或不受信任的代碼的「沙盒」環境。它可以防止腳本對頁面本身以及對其他站點發起跨站點攻擊。

sandbox屬性有多個可選值，例如allow-forms、allow-scripts和allow-same-origin。如果您希望將iframe中的腳本限制為與其文檔具有相同的來源，則可以使用allow-same-origin。

sandbox參數示例代碼

<iframe sandbox="allow-same-origin allow-scripts"
src="http://www.example.com"
width="100%" height="500px"></iframe>

如何使用sandbox參數

當網站允許用戶上傳文件或內容時，可能會遇到不受信任的腳本或代碼。為了避免對整個網站的風險，可以考慮使用iframe中的sandbox參數，限制不受信任部分的代碼。

例如，上述示例代碼會在iframe中創建一個沙盒（sandbox），以防止被嵌入文檔的腳本進行跨域濫用。在這種情況下，iframe僅限於訪問與其文檔在同一個源（或源白名單中的任何其他合法源）。

四、allowfullscreen參數

allowfullscreen參數是什麼

allowfullscreen參數是一個屬性，它定義是否允許全屏模式。如果指定此屬性，用戶可以使用全屏模式查看iframe中載入的內容。

allowfullscreen參數示例代碼

<iframe src="http://www.example.com" allowfullscreen
width="100%" height="500px"></iframe>

如何使用allowfullscreen參數

在一些情況下，用戶可能希望通過全屏模式查看iframe中嵌入的內容，例如觀看視頻或地圖。為了允許用戶使用全屏模式，請在iframe中使用allowfullscreen參數。

五、frameborder參數

frameborder參數是什麼

frameborder參數是一個屬性，它用於定義iframe的邊框是否可見。如果將其設置為「0」，則不會顯示iframe的邊框。

frameborder參數示例代碼

<iframe src="http://www.example.com" frameborder="0"
width="100%" height="500px"></iframe>

如何使用frameborder參數

如果您不希望iframe的邊框顯示出來，可以使用frameborder參數設置其值為「0」。

六、scrolling參數

scrolling參數是什麼

scrolling參數是一個屬性，它控制當iframe內容大於指定高度時，是否顯示滾動條。

scrolling參數示例代碼

<iframe src="http://www.example.com" scrolling="no"
width="100%" height="500px"></iframe>

如何使用scrolling參數

當iframe的內容超出指定的高度時，系統會自動顯示滾動條，可以使用scrolling參數來控制是否顯示滾動條。