html5技術下網站建設時iframe調用方法與注意事項

2022-05-20 分類：網站建設

iframe是HTML5中唯一允許的框架類型，這些框架本質上是您“嵌套”的頁面的一部分。在您從頁面中剪出的空間中，然后可以在外部網頁中調用。實質上，iframe就是設置在網頁內部的另一個瀏覽器窗口。你可以在需要包含外部內容的網站上找到常用的iFrame，比如百度地圖或優酷視頻，這兩個流行的網站都在他們的嵌入代碼中使用iframe。在網站建設或者一些B/S系統的網站開發中，iframe應用頗為廣泛頻繁。這也是本文討論的主題，接下來讓我們一起看看在html5技術下，網站建設時iframe調用方法與注意事項。

如何使用IFRAME元素

該元素使用HTML5全局元素以及其他幾個元素。四個也是HTML 4.01中的屬性：

來源URL
窗口高度
窗口寬度
窗口名稱

HTML5中有三個新特性：

srcdoc-幀來源的HTML，此屬性優先于src屬性中的任何URL
沙箱-框架窗口中應允許或不允許的功能列表
無縫-告訴用戶代理應該呈現iframe，就像它是父文檔的不可見的一部分一樣

要構建簡單IFrame，請設置源URL以及寬度和高度：

<iframe src="URL" width="200px" height="200px">
Alternate text if the iframe cannot be rendered
</iframe>

請注意，您可以選擇不對iframe的設置使用像素值，但可以決定使用百分比。如果您正在構建一個響應性網站，其大小應隨屏幕大小的不同而變化，這些百分比將非常重要。也有一些屬性在HTML4.01中有效，但在HTML5中過時。由于目前大多數網站都在使用HTML5+，因此這些屬性是您不想使用的(但您可能會在一些遺留文檔中看到這些屬性)。

改為使用A元素鏈接到說明
改為使用CSS浮點屬性
允許透明-而不是使用CSS背景屬性使ifram透明
改為使用邊框CSS屬性
邊距高度-而不是使用CSS邊距屬性
邊距寬度-而不是使用CSS邊距屬性
改為使用CSS溢出屬性

支持IFrame的瀏覽器，幾乎所有現代瀏覽器都支持IFRAME元素，它們分別如下：

Android
Chrome
Firefox
Internet Explorer 2+
iOS / Safari Mobile
Netscape 7+
Opera 3+
Safari

如果上面的列表中沒有顯示版本號，這是因為該瀏覽器的所有版本都支持它。需要注意的一點是，盡管所有瀏覽器都支持IFRAME元素，但對HTML5的某些特性的支持仍然有限。使用溢出關閉滾動不可靠。如果不希望在iFrame上使用滾動條，則應繼續使用“滾動”屬性。此時，任何瀏覽器都不支持srcdoc、沙箱和無縫屬性。

與iFrames鏈接

當您為iframe指定名稱或id時，您可以使用A元素上的屬性將鏈接指向該幀。然后，當用戶單擊鏈接時，它將在引用的iframe中打開，而不是在當前窗口中打開。你自己試試，在網頁中鍵入以下內容：

<iframe id="myIframe" src="http://webdesign.about.com/#lp-main" height="200px" width="500px">
<p>This is my iframe
</iframe>
<p>
When you click <a target="myIframe">this link</a> it will open a new document inside the above window.
</p>

如果在iFrame中打開的文檔沒有設置任何目標，則所有這些鏈接將在與父文檔相同的iframe中打開?？梢允褂么斯δ苁挂粋€IFRAME中的鏈接更改同一頁上另一個IFRAME的內容。

iFrame和安全

IFRAME元素本身不會對您或您的讀者構成安全風險。不幸的是，iframe已經得到了壞名聲，因為它們可以被惡意網站用來包含內容，這些內容可以感染訪問者的計算機，而不會在頁面上看到它。這是通過讓鏈接指向不可見的iframe并通過這些腳本觸發惡意代碼來完成的。用戶單擊該鏈接，并認為該鏈接已中斷，因為似乎沒有發生任何事情，但腳本被設置在他們看不到它的地方。

也有計算機病毒，將注入一個看不見的iframe到您的網頁，有效地將您的網站變成一個僵尸網絡。他們可以通過SQL注入和其他攻擊來實現這一點。在網頁上包含iframe時要記住的一點是，您的用戶僅與您鏈接到的所有站點的內容一樣安全。如果你有理由認為一個網站是不值得信任的，不要以任何方式鏈接到它，更不要把它的內容包含在IFRAME中。但是，在iframe中鏈接到您自己的頁面并不會給您或您的用戶帶來安全風險。

網站標題：html5技術下網站建設時iframe調用方法與注意事項
網頁鏈接：http://www.2m8n56k.cn/news34/155184.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設等

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

html5技術下網站建設時iframe調用方法與注意事項