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

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

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

如何使用IFRAME元素

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

來(lái)源URL
窗口高度
窗口寬度
窗口名稱(chēng)

HTML5中有三個(gè)新特性：

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

要構(gòu)建簡(jiǎn)單IFrame，請(qǐng)?jiān)O(shè)置源URL以及寬度和高度：

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

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

改為使用A元素鏈接到說(shuō)明
改為使用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

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

與iFrames鏈接

當(dāng)您為iframe指定名稱(chēng)或id時(shí)，您可以使用A元素上的屬性將鏈接指向該幀。然后，當(dāng)用戶(hù)單擊鏈接時(shí)，它將在引用的iframe中打開(kāi)，而不是在當(dāng)前窗口中打開(kāi)。你自己試試，在網(wǎng)頁(yè)中鍵入以下內(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中打開(kāi)的文檔沒(méi)有設(shè)置任何目標(biāo)，則所有這些鏈接將在與父文檔相同的iframe中打開(kāi)?？梢允褂么斯δ苁挂粋€(gè)IFRAME中的鏈接更改同一頁(yè)上另一個(gè)IFRAME的內(nèi)容。

iFrame和安全

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

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

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

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

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

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