iframe是HTML5中唯一允許的框架類型,這些框架本質(zhì)上是您“嵌套”的頁面的一部分。在您從頁面中剪出的空間中,然后可以在外部網(wǎng)頁中調(diào)用。實質(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)用方法與注意事項。
如何使用IFRAME元素
該元素使用HTML5全局元素以及其他幾個元素。四個也是HTML 4.01中的屬性:
HTML5中有三個新特性:
- srcdoc-幀來源的HTML,此屬性優(yōu)先于src屬性中的任何URL
- 沙箱-框架窗口中應(yīng)允許或不允許的功能列表
- 無縫-告訴用戶代理應(yīng)該呈現(xiàn)iframe,就像它是父文檔的不可見的一部分一樣
要構(gòu)建簡單IFrame,請設(shè)置源URL以及寬度和高度:
Alternate text if the iframe cannot be rendered
請注意,您可以選擇不對iframe的設(shè)置使用像素值,但可以決定使用百分比。如果您正在構(gòu)建一個響應(yīng)性網(wǎng)站,其大小應(yīng)隨屏幕大小的不同而變化,這些百分比將非常重要。也有一些屬性在HTML4.01中有效,但在HTML5中過時。由于目前大多數(shù)網(wǎng)站都在使用HTML5+,因此這些屬性是您不想使用的(但您可能會在一些遺留文檔中看到這些屬性)。
- 改為使用A元素鏈接到說明
- 改為使用CSS浮點屬性
- 允許透明-而不是使用CSS背景屬性使ifram透明
- 改為使用邊框CSS屬性
- 邊距高度-而不是使用CSS邊距屬性
- 邊距寬度-而不是使用CSS邊距屬性
- 改為使用CSS溢出屬性
支持IFrame的瀏覽器,幾乎所有現(xiàn)代瀏覽器都支持IFRAME元素,它們分別如下:
- Android
- Chrome
- Firefox
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- Safari
如果上面的列表中沒有顯示版本號,這是因為該瀏覽器的所有版本都支持它。需要注意的一點是,盡管所有瀏覽器都支持IFRAME元素,但對HTML5的某些特性的支持仍然有限。使用溢出關(guān)閉滾動不可靠。如果不希望在iFrame上使用滾動條,則應(yīng)繼續(xù)使用“滾動”屬性。此時,任何瀏覽器都不支持srcdoc、沙箱和無縫屬性。
與iFrames鏈接
當(dāng)您為iframe指定名稱或id時,您可以使用A元素上的屬性將鏈接指向該幀。然后,當(dāng)用戶單擊鏈接時,它將在引用的iframe中打開,而不是在當(dāng)前窗口中打開。你自己試試,在網(wǎng)頁中鍵入以下內(nèi)容:
When you click
this link it will open a new document inside the above window.
如果在iFrame中打開的文檔沒有設(shè)置任何目標(biāo),則所有這些鏈接將在與父文檔相同的iframe中打開??梢允褂么斯δ苁挂粋€IFRAME中的鏈接更改同一頁上另一個IFRAME的內(nèi)容。
iFrame和安全
IFRAME元素本身不會對您或您的讀者構(gòu)成安全風(fēng)險。不幸的是,iframe已經(jīng)得到了壞名聲,因為它們可以被惡意網(wǎng)站用來包含內(nèi)容,這些內(nèi)容可以感染訪問者的計算機,而不會在頁面上看到它。這是通過讓鏈接指向不可見的iframe并通過這些腳本觸發(fā)惡意代碼來完成的。用戶單擊該鏈接,并認為該鏈接已中斷,因為似乎沒有發(fā)生任何事情,但腳本被設(shè)置在他們看不到它的地方。
也有計算機病毒,將注入一個看不見的iframe到您的網(wǎng)頁,有效地將您的網(wǎng)站變成一個僵尸網(wǎng)絡(luò)。他們可以通過SQL注入和其他攻擊來實現(xiàn)這一點。在網(wǎng)頁上包含iframe時要記住的一點是,您的用戶僅與您鏈接到的所有站點的內(nèi)容一樣安全。如果你有理由認為一個網(wǎng)站是不值得信任的,不要以任何方式鏈接到它,更不要把它的內(nèi)容包含在IFRAME中。但是,在iframe中鏈接到您自己的頁面并不會給您或您的用戶帶來安全風(fēng)險。
新聞名稱:html5技術(shù)下網(wǎng)站建設(shè)時iframe調(diào)用方法與注意事項
新聞來源:http://jinyejixie.com/news/155184.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站建設(shè)等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)