什麼是iFrame及如何正確地使用它

隨著網站變得越來越複雜，WordPress使用者需要一種在他們自己的頁面上顯示第三方內容的方法才有意義。幸運的是，有一個名為iFrame的HTML元素可以幫助您做到這一點。

在這篇文章中，我們將解釋什麼是iFrame以及何時最好使用iFrame。我們還將討論此元素對WordPress使用者的好處，並向您展示如何通過Divi Builder模組輕鬆整合它。

什麼是iFrame？

您可以將內嵌框架（或iFrame）視為網頁上的一個視窗，可檢視另一段線上內容。更技術性的描述方式是將HTML文件嵌入到另一個HTML文件中：

在程式碼方面，每個iFrame都包含<iframe> HTML標籤以及一個src屬性，以幫助指示您要嵌入網站的內容的位置。但是，您還可以合併其他屬性來指定“window”本身的尺寸。

例如，下面是上面螢幕截圖中簡單示例iFrame的程式碼：

<iframe src="https://www.domain.com" height="630" width="1920"></iframe>

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

需要注意的是，HTML5不支援許多iFrame屬性（例如scrolling）。因此，請確保在手動編碼iFrame時使用最新資訊。

什麼時候應該使用iFrame？

對於大多數非開發WordPress使用者來說，iFrame的主要目的是在您的網站上顯示第三方內容。一些常見用途包括：

• 廣告。許多側邊欄和橫幅廣告實際上是 iFrame。這使您的廣告合作伙伴能夠輕鬆提供和維護他們付費顯示在您網站上的內容。
• YouTube視訊。YouTube或者其他視訊網站嵌入程式碼利用iFrame在您的頁面上顯示託管在其平臺上的視訊。使用這種技術，您不必擔心將視訊上傳到您的媒體庫。
• 谷歌地圖。如果您曾經從餐廳訂購過外送食物，那麼在選擇最近的商店位置時，您可能已經看到了Google地圖iFrame。不幸的是，谷歌已經用它的Maps API Key替換了它，所以新使用者不能通過iFrames嵌入地圖。
• 社交媒體帖子。顯示您最近的社交媒體帖子的一種方法是通過iFrame。這很方便，因為它們會自動更新以包含喜歡、評論和其他動態元素（我們將在稍後解釋）。
• RSS Feed。就像不斷變化的社交媒體帖子一樣，RSS有時更容易使用iFrame顯示。您只需使用RSS Feed的URL作為src屬性。

還有幾個更復雜的用例，例如開發單點登入系統或所見即所得 (WYSIWYG) 文字編輯器。例如，TinyMCE編輯器（以前是WordPress預設內容建立介面）使用iFrame。

使用iFrame有什麼好處（優缺點）？

對於大多數使用者來說，iFrame是有益的（優點），因為它們將主要HTML文件（您的站點）與您載入到其中的外部內容保持分離。這有兩個原因。首先，您不必擔心更新要顯示的第三方內容。您的廣告合作伙伴可以更改他們的促銷活動，您的Facebook Feed可以重新整理，並且Google地圖可以根據新的住房開發進行調整。您的iFrame將載入最新版本。

以我們在本文開頭使用的介紹性示例為例。它目前包括Divi促銷廣告。但是，一旦促銷結束，iFrame將顯示我們的標準主頁，而沒有橫幅。

此外，保持您的內容與其他網站的內容之間的分離可以提供額外的安全性。您不必擔心通過將第三方程式碼直接新增到您站點的檔案中而無意中匯入任何漏洞或錯誤。

即便如此，仍有許多開發人員反對使用iFrame，因為它們也有其缺點，可能帶來安全風險。您在“Windows”中載入的文件中的任何惡意元素也將在您的站點上可用。第三方可以藉此機會“釣魚”使用者資料。

但是，如果您從Google、YouTube和流行的社交媒體或新聞平臺等信譽良好的來源採購第三方內容，這應該不是問題。與往常一樣，在將新功能整合到您的網站時要有選擇性。

在WordPress網站上合併iFrame

如果您想在WordPress網站上使用iFrame，Divi可以提供幫助。我們的一些模組特別適合容納這個方便的HTML元素，並且可以讓您更輕鬆地使用它。您可以立即開始使用以下三個。

1. 視訊模組

正如我們上面提到的，iFrame最常見的用途之一是在您的網站上顯示YouTube視訊。實際上，當您使用Divi視訊模組時，它只是在幕後執行此操作：

當您將外部視訊的URL新增到Divi模組時，它會自動生成一個iFrame來顯示它。如果您不想輸入<iframe>標記和屬性，這是實現相同結果的快速簡便的方法。

2. 程式碼模組

當然，您始終可以選擇使用Divi程式碼模組來合併自定義程式碼。這是一種手動輸入<iframe>標籤和屬性的簡單方法 ，或者使用第三方嵌入程式碼中包含的iFrame。

我們將使用Facebook帖子作為示例。通過單擊要顯示的帖子右上角的三點圖示並選擇Embed來檢索嵌入程式碼：

然後複製iFrame的程式碼並將其新增到您的Divi程式碼模組中：

在您釋出或更新頁面後，您的iFrame現在將在Divi Builder和您網站的前端顯示您的Facebook帖子。

小結

有這麼多有用的方法可以在網路上與人們聯絡和共享資訊，因此您可能希望將第三方內容（例如YouTube視訊）拉到您自己的網站上是有道理的。因此，iFrame旨在幫助您做到這一點，同時將您的內容與外部來源分開。

如果您認為iFrame可能是您網站的有用解決方案，以下Divi Builder模組可以幫助您快速輕鬆地整合一些最流行的內容型別：

1. 視訊模組：使用視訊頁面的URL快速生成YouTube iFrame。
2. 程式碼模組：製作您自己的iFrame或貼上來自Facebook等平臺的第三方嵌入程式碼。

不過，除非必須，否則不要在頁面使用IFrame，畢竟整個使用者體驗都不那麼友好，再者各大搜尋引擎也不太喜歡iframe。所以，能不用則不用吧！