iframe是HTML5中唯一允許的框架類型,這些框架本質(zhì)上是您“嵌套”的頁面的一部分。在您從頁面中剪出的空間中,然后可以在外部網(wǎng)頁中調(diào)用。實(shí)質(zhì)上,iframe就是設(shè)置在網(wǎng)頁內(nèi)部的另一個(gè)瀏覽器窗口。你可以在需要包含外部內(nèi)容的網(wǎng)站上找到常用的iFrame,比如百度地圖或優(yōu)酷視頻,這兩個(gè)流行的網(wǎng)站都在他們的嵌入代碼中使用iframe。在
網(wǎng)站建設(shè)或者一些B/S系統(tǒng)的網(wǎng)站開發(fā)中,iframe應(yīng)用頗為廣泛頻繁。這也是本文討論的主題,接下來讓我們一起看看在html5技術(shù)下,
網(wǎng)站建設(shè)時(shí)iframe調(diào)用方法與注意事項(xiàng)。
如何使用IFRAME元素
該元素使用HTML5全局元素以及其他幾個(gè)元素。四個(gè)也是HTML 4.01中的屬性:
HTML5中有三個(gè)新特性:
- srcdoc-幀來源的HTML,此屬性優(yōu)先于src屬性中的任何URL
- 沙箱-框架窗口中應(yīng)允許或不允許的功能列表
- 無縫-告訴用戶代理應(yīng)該呈現(xiàn)iframe,就像它是父文檔的不可見的一部分一樣
要構(gòu)建簡單IFrame,請(qǐng)?jiān)O(shè)置源URL以及寬度和高度:
<iframe src="URL" width="200px" height="200px">
Alternate text if the iframe cannot be rendered
請(qǐng)注意,您可以選擇不對(duì)iframe的設(shè)置使用像素值,但可以決定使用百分比。如果您正在構(gòu)建一個(gè)響應(yīng)性網(wǎng)站,其大小應(yīng)隨屏幕大小的不同而變化,這些百分比將非常重要。也有一些屬性在HTML4.01中有效,但在HTML5中過時(shí)。由于目前大多數(shù)網(wǎng)站都在使用HTML5+,因此這些屬性是您不想使用的(但您可能會(huì)在一些遺留文檔中看到這些屬性)。
- 改為使用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
如果上面的列表中沒有顯示版本號(hào),這是因?yàn)樵摓g覽器的所有版本都支持它。需要注意的一點(diǎn)是,盡管所有瀏覽器都支持IFRAME元素,但對(duì)HTML5的某些特性的支持仍然有限。使用溢出關(guān)閉滾動(dòng)不可靠。如果不希望在iFrame上使用滾動(dòng)條,則應(yīng)繼續(xù)使用“滾動(dòng)”屬性。此時(shí),任何瀏覽器都不支持srcdoc、沙箱和無縫屬性。
與iFrames鏈接
當(dāng)您為iframe指定名稱或id時(shí),您可以使用A元素上的屬性將鏈接指向該幀。然后,當(dāng)用戶單擊鏈接時(shí),它將在引用的iframe中打開,而不是在當(dāng)前窗口中打開。你自己試試,在網(wǎng)頁中鍵入以下內(nèi)容:
<iframe id="myIframe" src="http://webdesign.about.com/#lp-main" height="200px" width="500px">
When you click <a target="myIframe">this link</a> it will open a new document inside the above window.
如果在iFrame中打開的文檔沒有設(shè)置任何目標(biāo),則所有這些鏈接將在與父文檔相同的iframe中打開??梢允褂么斯δ苁挂粋€(gè)IFRAME中的鏈接更改同一頁上另一個(gè)IFRAME的內(nèi)容。
iFrame和安全
IFRAME元素本身不會(huì)對(duì)您或您的讀者構(gòu)成安全風(fēng)險(xiǎn)。不幸的是,iframe已經(jīng)得到了壞名聲,因?yàn)樗鼈兛梢员粣阂饩W(wǎng)站用來包含內(nèi)容,這些內(nèi)容可以感染訪問者的計(jì)算機(jī),而不會(huì)在頁面上看到它。這是通過讓鏈接指向不可見的iframe并通過這些腳本觸發(fā)惡意代碼來完成的。用戶單擊該鏈接,并認(rèn)為該鏈接已中斷,因?yàn)樗坪鯖]有發(fā)生任何事情,但腳本被設(shè)置在他們看不到它的地方。
也有計(jì)算機(jī)病毒,將注入一個(gè)看不見的iframe到您的網(wǎng)頁,有效地將您的網(wǎng)站變成一個(gè)僵尸網(wǎng)絡(luò)。他們可以通過SQL注入和其他攻擊來實(shí)現(xiàn)這一點(diǎn)。在網(wǎng)頁上包含iframe時(shí)要記住的一點(diǎn)是,您的用戶僅與您鏈接到的所有站點(diǎn)的內(nèi)容一樣安全。如果你有理由認(rèn)為一個(gè)網(wǎng)站是不值得信任的,不要以任何方式鏈接到它,更不要把它的內(nèi)容包含在IFRAME中。但是,在iframe中鏈接到您自己的頁面并不會(huì)給您或您的用戶帶來安全風(fēng)險(xiǎn)。
網(wǎng)站標(biāo)題:html5技術(shù)下網(wǎng)站建設(shè)時(shí)iframe調(diào)用方法與注意事項(xiàng)
網(wǎng)頁鏈接:http://m.rwnh.cn/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)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)