內聯框架允許您在頁面上包含來自外部源的內容
內聯框架通常被稱為“內聯框架”,它是HTML5允許的唯一框架類型。 這些框架基本上是您“切出”的頁面的一部分。 在您已經刪除的頁面中,您可以在外部網頁中輸入內容。 從本質上講,iframe是另一個瀏覽器窗口,它恰好位於您的網頁內部。 您可以在需要包含Google地圖或YouTube視頻等外部內容的網站上看到常用的內嵌框架。
這兩個受歡迎的網站都在嵌入代碼中使用iframe。
如何使用IFRAME元素
該元素使用HTML5全局元素以及其他幾個元素。 四個也是HTML 4.01中的屬性:
- - 框架來源的URL
- - 窗戶的高度
- - 窗戶的寬度
- - 窗口的名字
另外三個是HTML5中的新功能:
- srcdoc - 框架來源的HTML。 該屬性優先於src屬性中的任何URL
- 沙箱 - 在框架窗口中應該允許或不允許的功能列表
- 無縫 - 提供iframe應該呈現的用戶代理,就像它不可見地是父文檔的一部分
要構建簡單的iframe,請設置源URL和寬度和高度:
請注意,您可以選擇不將像素值用於iframe的設置,但可以決定使用百分比。
如果您正在構建一個響應式網站,其大小應根據不同的屏幕大小進行更改,這些百分比將非常重要。
還有一些屬性在HTML 4.01中有效,但在HTML5中已過時。 由於今天大多數網站都使用HTML5 +,因此這些屬性是您不想使用的屬性(但您可能會在某些傳統文檔中看到)。
- - 使用A元素鏈接到描述
- 使用CSS浮動屬性
- allowtransparency--反之,使用CSS background屬性使ifram透明
- - 使用邊框CSS屬性
- marginheight -相反,使用CSS保證金屬性
- marginwidth-inside,使用CSS保證金屬性
- 相反,使用CSS溢出屬性
IFRAME瀏覽器支持
所有現代瀏覽器都支持IFRAME元素:
- Android的
- 鉻
- 火狐
- Internet Explorer 2+
- iOS / Safari移動
- Netscape 7+
- Opera 3+
- 蘋果瀏覽器
如果上面的列表中沒有顯示版本號,那是因為該瀏覽器的所有版本都支持它。
需要注意的一點是,雖然所有瀏覽器都支持IFRAME元素,但對某些HTML5功能的支持仍然有限。
- 使用溢出來關閉滾動並不可靠。 如果你不想在你的iframe上使用滾動條,你應該繼續使用滾動屬性。
- 目前,任何瀏覽器都不支持srcdoc,沙箱和無縫屬性。
與Iframes鏈接
當你給你的內聯框架一個名字或ID時,你可以用這個框架上的鏈接指向A元素上的屬性。 然後,當用戶點擊鏈接時,它會在引用的iframe中而不是當前窗口中打開。
親自嘗試一下。 在網頁中輸入以下內容:
如果在IFRAME中打開的文檔沒有設置任何目標 ,那麼所有這些鏈接將在與母文檔相同的iframe中打開。
您可以使用此功能使一個 IFRAME中的鏈接更改同一頁面上另一個IFRAME的內容。
IFrames和安全
IFRAME元素本身不會對您或您的讀者造成安全風險。
不幸的是,iframe的聲譽很差,因為它們可以被惡意網站用來包含可以感染訪問者電腦的內容,而不會在網頁上看到它。 這是通過鏈接指向不可見的IFRAME和這些腳本引發惡意代碼來完成的。 用戶點擊鏈接並認為鏈接被破壞,因為似乎沒有任何事情發生,但腳本被阻止,他們看不到它。
也有計算機病毒會將不可見的IFRAME注入到您的網頁中,從而有效地將您的網站變成殭屍網絡。 他們可以通過SQL注入和其他攻擊來做到這一點。
在您的網頁上添加IFRAME時要記住的事情是,您的用戶只與您鏈接到的所有網站的內容一樣安全。 如果您有理由認為網站不值得信任,請不要以任何方式鏈接到網站,絕對不要將其內容包含在IFRAME中。 但是,鏈接到您自己的內置頁面頁面不會對您或您的用戶造成安全風險。
Jennifer Krynin的原創文章。 Jeremy Girard於11/7/16編輯