html5技術(shù)下網(wǎng)站建設(shè)時iframe調(diào)用方法與注意事項(xiàng)

2022-05-20 分類：網(wǎng)站建設(shè)

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

如何使用IFRAME元素

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

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

HTML5中有三個新特性：

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

要構(gòu)建簡單IFrame，請設(shè)置源URL以及寬度和高度：

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

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

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

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

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

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

與iFrames鏈接

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

<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中打開的文檔沒有設(shè)置任何目標(biāo)，則所有這些鏈接將在與父文檔相同的iframe中打開?？梢允褂么斯δ苁挂粋€IFRAME中的鏈接更改同一頁上另一個IFRAME的內(nèi)容。

iFrame和安全

IFRAME元素本身不會對您或您的讀者構(gòu)成安全風(fēng)險。不幸的是，iframe已經(jīng)得到了壞名聲，因?yàn)樗鼈兛梢员粣阂饩W(wǎng)站用來包含內(nèi)容，這些內(nèi)容可以感染訪問者的計算機(jī)，而不會在頁面上看到它。這是通過讓鏈接指向不可見的iframe并通過這些腳本觸發(fā)惡意代碼來完成的。用戶單擊該鏈接，并認(rèn)為該鏈接已中斷，因?yàn)樗坪鯖]有發(fā)生任何事情，但腳本被設(shè)置在他們看不到它的地方。

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

網(wǎng)站標(biāo)題：html5技術(shù)下網(wǎng)站建設(shè)時iframe調(diào)用方法與注意事項(xiàng)
網(wǎng)頁鏈接：http://www.bm7419.com/news34/155184.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容