什麼是iFrame？網頁設計中如何使用iFrame？

什麼是iFrame？

在網頁設計中您可以將內嵌框架（或iFrame）視為網頁上的一個視窗，可查看另一段線上內容。更技術性的描述方式是將HTML文檔嵌入到另一個HTML文檔中。在原始媽方面，每個iFrame都包含<iframe> HTML標籤以及一個 src屬性，以幫助指示您要嵌入網站的內容的位置。但是，您還可以合併其他屬性來指定「視窗」本身的尺寸。

例如，下面是上面螢幕截圖中簡單示例iFrame的原始媽：

visible !important; position: static !important; text-align: left; width: auto !important; direction: ltr !important; box-shadow: none !important; display: inline !important; color: rgb(0, 0, 0) !important; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><iFramesrc="https://www.iware.com.tw" height="630" width="1920"></iframe>

在這種情況下，<iframe>標記包括要顯示的頁面的 URL，以及以像素為單位的視窗的高度和寬度。您可以合併其他屬性以啟用功能策略 ( allow )、全螢幕模式 ( allowfullscreen )、付款 ( allowpaymentrequests ) 等。

需要注意的是，HTML5 不支持許多iFrame屬性（例如scrolling）。

什麼時候應該使用iFrame？

iFrame的主要目的是在您的網站上顯示第三方內容。一些常見用途包括：

廣告。許多側邊欄和橫幅廣告實際上是iFrame。這使您的廣告合作夥伴能夠輕鬆提供和維護他們付費顯示在您網站上的內容。

影片。利用iFrame在您的頁面上顯示託管在第三方平台上的影片，如Netflix,youtube上面的影片。

社群媒體帖子。顯示您最近的社群媒體帖子的一種方法是通過iFrame。這很方便，因為它們會自動更新以包含喜歡、評論和其他動態元素。

RSS訂閱。就像不斷變化的社群媒體帖子一樣，RSS 提要有時更容易使用iFrame顯示。您只需使用 RSS 提要URL作為 src屬性。

使用iFrame有什麼好處？

對於大多數用戶來說，iFrame是有益的，因為它們將主要HTML文檔（您的網站）與您加載到其中的外部內容保持分離。這有兩個原因。首先，您不必擔心更新要顯示的第三方內容，您的iFrame將加載最新版本。

此外，保持您的內容與其他網站的內容之間的分離可以提供額外的安全性。您不必擔心通過將第三方原始媽直接添加到您網站的文件中而無意中導入任何漏洞或錯誤。

即便如此，仍有許多開發人員反對使用iFrame，因為它們也會帶來安全風險。您在「視窗」中加載的文檔中的任何惡意元素也將在您的網站上可用。第三方可以藉此機會「釣魚」用戶數據。