新聞中心
隨著網(wǎng)站變得越來越復(fù)雜,wordpress用戶需要一種在他們自己的頁面上顯示第三方內(nèi)容的方法才有意義。幸運的是,有一個名為iFrame的HTML元素可以幫助您做到這一點。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供永豐企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、做網(wǎng)站、HTML5建站、小程序制作等業(yè)務(wù)。10年已為永豐眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進(jìn)行中。
在這篇文章中,我們將解釋什么是iFrame以及何時最好使用iFrame。我們還將討論此元素對WordPress用戶的好處,并向您展示如何通過Divi Builder模塊輕松整合它。
什么是iFrame?
您可以將內(nèi)嵌框架(或iFrame)視為網(wǎng)頁上的一個窗口,可查看另一段在線內(nèi)容。更技術(shù)性的描述方式是將HTML文檔嵌入到另一個HTML文檔中:
在代碼方面,每個iFrame都包含 HTML標(biāo)簽以及一個src屬性,以幫助指示您要嵌入網(wǎng)站的內(nèi)容的位置。但是,您還可以合并其他屬性來指定“window”本身的尺寸。
例如,下面是上面屏幕截圖中簡單示例iFrame的代碼:
在這種情況下, 標(biāo)記包括要顯示的頁面的URL,以及以像素為單位的窗口的高度和寬度。您可以合并其他屬性以啟用功能策略 ( allow )、全屏模式 ( allowfullscreen )、付款 ( allowpaymentrequests ) 等。
需要注意的是,HTML5不支持許多iFrame屬性(例如scrolling)。因此,請確保在手動編碼iFrame時使用最新信息。
什么時候應(yīng)該使用iFrame?
對于大多數(shù)非開發(fā)WordPress用戶來說,iFrame的主要目的是在您的網(wǎng)站上顯示第三方內(nèi)容。一些常見用途包括:
- 廣告。許多側(cè)邊欄和橫幅廣告實際上是 iFrame。這使您的廣告合作伙伴能夠輕松提供和維護(hù)他們付費顯示在您網(wǎng)站上的內(nèi)容。
- YouTube視頻。YouTube或者其他視頻網(wǎng)站嵌入代碼利用iFrame在您的頁面上顯示托管在其平臺上的視頻。使用這種技術(shù),您不必?fù)?dān)心將視頻上傳到您的媒體庫。
- 谷歌地圖。如果您曾經(jīng)從餐廳訂購過外送食物,那么在選擇最近的商店位置時,您可能已經(jīng)看到了Google地圖iFrame。不幸的是,谷歌已經(jīng)用它的Maps API Key替換了它,所以新用戶不能通過iFrames嵌入地圖。
- 社交媒體帖子。顯示您最近的社交媒體帖子的一種方法是通過iFrame。這很方便,因為它們會自動更新以包含喜歡、評論和其他動態(tài)元素(我們將在稍后解釋)。
- RSS Feed。就像不斷變化的社交媒體帖子一樣,RSS有時更容易使用iFrame顯示。您只需使用RSS Feed的URL作為src屬性。
還有幾個更復(fù)雜的用例,例如開發(fā)單點登錄系統(tǒng)或所見即所得 (WYSIWYG) 文本編輯器。例如,TinyMCE編輯器(以前是WordPress默認(rèn)內(nèi)容創(chuàng)建界面)使用iFrame。
使用iFrame有什么好處(優(yōu)缺點)?
對于大多數(shù)用戶來說,iFrame是有益的(優(yōu)點),因為它們將主要HTML文檔(您的站點)與您加載到其中的外部內(nèi)容保持分離。這有兩個原因。首先,您不必?fù)?dān)心更新要顯示的第三方內(nèi)容。您的廣告合作伙伴可以更改他們的促銷活動,您的Facebook Feed可以刷新,并且Google地圖可以根據(jù)新的住房開發(fā)進(jìn)行調(diào)整。您的iFrame將加載最新版本。
以我們在本文開頭使用的介紹性示例為例。它目前包括Divi促銷廣告。但是,一旦促銷結(jié)束,iFrame將顯示我們的標(biāo)準(zhǔn)主頁,而沒有橫幅。
此外,保持您的內(nèi)容與其他網(wǎng)站的內(nèi)容之間的分離可以提供額外的安全性。您不必?fù)?dān)心通過將第三方代碼直接添加到您站點的文件中而無意中導(dǎo)入任何漏洞或錯誤。
即便如此,仍有許多開發(fā)人員反對使用iFrame,因為它們也有其缺點,可能帶來安全風(fēng)險。您在“Windows”中加載的文檔中的任何惡意元素也將在您的站點上可用。第三方可以借此機會“釣魚”用戶數(shù)據(jù)。
但是,如果您從Google、YouTube和流行的社交媒體或新聞平臺等信譽良好的來源采購第三方內(nèi)容,這應(yīng)該不是問題。與往常一樣,在將新功能整合到您的網(wǎng)站時要有選擇性。
在WordPress網(wǎng)站上合并iFrame
如果您想在WordPress網(wǎng)站上使用iFrame,Divi可以提供幫助。我們的一些模塊特別適合容納這個方便的HTML元素,并且可以讓您更輕松地使用它。您可以立即開始使用以下三個。
1. 視頻模塊
正如我們上面提到的,iFrame最常見的用途之一是在您的網(wǎng)站上顯示YouTube視頻。實際上,當(dāng)您使用Divi視頻模塊時,它只是在幕后執(zhí)行此操作:
當(dāng)您將外部視頻的URL添加到Divi模塊時,它會自動生成一個iFrame來顯示它。如果您不想輸入標(biāo)記和屬性,這是實現(xiàn)相同結(jié)果的快速簡便的方法。
2. 代碼模塊
當(dāng)然,您始終可以選擇使用Divi代碼模塊來合并自定義代碼。這是一種手動輸入標(biāo)簽和屬性的簡單方法 ,或者使用第三方嵌入代碼中包含的iFrame。
我們將使用Facebook帖子作為示例。通過單擊要顯示的帖子右上角的三點圖標(biāo)并選擇Embed來檢索嵌入代碼:
然后復(fù)制iFrame的代碼并將其添加到您的Divi代碼模塊中:
在您發(fā)布或更新頁面后,您的iFrame現(xiàn)在將在Divi Builder和您網(wǎng)站的前端顯示您的Facebook帖子。
小結(jié)
有這么多有用的方法可以在網(wǎng)絡(luò)上與人們聯(lián)系和共享信息,因此您可能希望將第三方內(nèi)容(例如YouTube視頻)拉到您自己的網(wǎng)站上是有道理的。因此,iFrame旨在幫助您做到這一點,同時將您的內(nèi)容與外部來源分開。
如果您認(rèn)為iFrame可能是您網(wǎng)站的有用解決方案,以下Divi Builder模塊可以幫助您快速輕松地整合一些最流行的內(nèi)容類型:
不過,除非必須,否則不要在頁面使用IFrame,畢竟整個用戶體驗都不那么友好,再者各大搜索引擎也不太喜歡iframe。所以,能不用則不用吧!
標(biāo)題名稱:什么是iFrame及如何正確地使用它
文章源于:http://fisionsoft.com.cn/article/coojegs.html


咨詢
建站咨詢
