了解 iframe 內(nèi)嵌框架：深度解析其工作原理和流程

美工學(xué)習(xí)

如果您想在您的網(wǎng)站上嵌入視頻或音頻等外部內(nèi)容，內(nèi)嵌框架 (iframe) 已被證明對(duì)此非常有用。 標(biāo)簽提供了一種簡單而優(yōu)雅的解決方案來容納 html 文檔中的外部內(nèi)容。 通常，網(wǎng)站訪問者甚至不會(huì)注意到他們正在查看外部內(nèi)容。 但是如何添加 iframe 呢？

iframe 標(biāo)簽是做什么用的？

通常，網(wǎng)站是一個(gè) HTML 文檔。 要插入其他元素，必須使用一個(gè)框架，以便輕松嵌入文檔、圖像甚至視頻。 過去，這是通過使用普通的 HTML 框架來解決的，但現(xiàn)在已經(jīng)不再使用了。 相反，iframe 標(biāo)簽已成為嵌入第三方內(nèi)容的流行選擇。 iframe 中的內(nèi)容是分開的，這意味著它是單獨(dú)加載的，并且可以獨(dú)立于網(wǎng)站的其余部分進(jìn)行導(dǎo)航。

這就是為什么使用內(nèi)聯(lián)框架來集成來自其他網(wǎng)站（例如 YouTube 視頻或百度地圖）的內(nèi)容和組件的原因之一。 甚至社交媒體插件或特定應(yīng)用程序也可以通過 iframe 以及 HTML 文檔進(jìn)行整合。

內(nèi)嵌框架的結(jié)構(gòu)

內(nèi)嵌框架是通過 iframe 標(biāo)簽在 HTML 代碼中創(chuàng)建的。

1. <iframe>...</iframe>

復(fù)制代碼

為了正確填寫框架，您需要指定以下屬性：

1. src：嵌入內(nèi)容的來源，以 URL 形式指定。
   
2. width：框架的寬度，可以以像素或百分比指定。
   
3. height：框架的高度，可以以像素或百分比指定。
   
4. name：特定 iframe 的名稱。
   
5. sandbox：連接內(nèi)聯(lián)框架與特定的安全措施。
   
6. srcdoc：包含要在 iframe 中顯示的 HTML 代碼。

復(fù)制代碼

還有一些其他屬性，其中許多已經(jīng)過時(shí)并且自 HTML5 以來就不再受支持。 如果你想進(jìn)一步指定外部內(nèi)容，你應(yīng)該為這些功能求助于 CSS 解決方案。

1. scrolling：內(nèi)嵌框架是否應(yīng)該單獨(dú)滾動(dòng)？
   
2. align：框架的對(duì)齊方式是什么？
   
3. frameborder：框架邊框應(yīng)該透明嗎？
   
4. longdesc：框架的詳細(xì)描述。
   
5. marginwidth：左右邊距的寬度。
   
6. marginheight：上下邊距的寬度。
   
7. vspace：iframe 周圍的垂直空間。

復(fù)制代碼

iframe 的實(shí)際內(nèi)容及其部分結(jié)構(gòu)只能通過使用這些屬性來安排。 標(biāo)記括號(hào)內(nèi)一般沒有內(nèi)容。 此空間用于容納替代文本。 在瀏覽器不加載 iframe 的地方，將顯示 iframe 的文本。 然而，如今這種情況很少見。 所有流行的瀏覽器，如 Chrome、Firefox 和 Safari 都可以顯示 iframe 內(nèi)容。

iframe 如何工作？

iframe（內(nèi)嵌框架）是HTML文檔中的一個(gè)標(biāo)簽，可以將另一個(gè)網(wǎng)頁嵌入到當(dāng)前網(wǎng)頁中。它的工作原理如下：

1. 當(dāng)瀏覽器加載包含 iframe 標(biāo)簽的 html 頁面時(shí)，會(huì)根據(jù) iframe 標(biāo)簽的 src 屬性指定的網(wǎng)址，向該網(wǎng)址發(fā)送請(qǐng)求。
   
2. 服務(wù)器接收請(qǐng)求后，會(huì)返回網(wǎng)頁的 HTML、CSS 和 JS 文件等資源。
   
3. 瀏覽器會(huì)根據(jù)服務(wù)器返回的內(nèi)容，將 iframe 中的 src 指向的網(wǎng)頁渲染出來，并將其嵌入到包含 iframe 標(biāo)簽的頁面中。
   
4. 這樣用戶就可以在當(dāng)前網(wǎng)頁中看到嵌入的網(wǎng)頁內(nèi)容，而且可以通過父窗口和子窗口之間的通信，實(shí)現(xiàn)一些特殊的功能。

復(fù)制代碼

需要注意的是，由于 iframe 可以嵌入任何網(wǎng)頁，因此也會(huì)帶來一定的安全風(fēng)險(xiǎn)，如惡意代碼注入等問題。因此，在使用 iframe 的過程中，應(yīng)謹(jǐn)慎考慮安全性和隱私問題。

一個(gè)有效的 iframe 通常是這樣的：

1. <iframe src="http://example.org/demo.html" height="400" width="800" name="demo">
   
2.   <p>您的瀏覽器不支持 iframe！</p>
   
3. </iframe>

復(fù)制代碼

在此示例中，代碼指向另一個(gè)網(wǎng)站上的 HTML 文檔。 可以使用 iframe 標(biāo)簽合并位于網(wǎng)絡(luò)服務(wù)器上的 HTML 文檔。 在這種情況下，您只需添加文件名，可能還有所需文檔位置的路徑。

提示
如果您想在您的網(wǎng)站上嵌入 YouTube 視頻，您可以使用內(nèi)嵌框架。 視頻平臺(tái)在相關(guān)視頻的頁面上為此提供了相應(yīng)的代碼。

為了以一種吸引人的方式創(chuàng)建 iframe，必須使用 CSS。 在大多數(shù)情況下，這只會(huì)創(chuàng)建框架本身。 如果內(nèi)容來自外部來源，您很少可以自定義要在您自己的網(wǎng)站上顯示的內(nèi)容。 通過一些 CSS 技巧，可以將 iframe 集成到響應(yīng)式網(wǎng)頁設(shè)計(jì)中。

iframe 的優(yōu)缺點(diǎn)

如果您想將來自外部資源的元素嵌入到您自己的站點(diǎn)中，則內(nèi)嵌框架很有用。 他們可以繼續(xù)瀏覽該網(wǎng)站，而不是將用戶轉(zhuǎn)到另一個(gè)域。 結(jié)果，用戶友好性大大提高。 此外，集成具有一些技術(shù)優(yōu)勢(shì)。 iframe 的內(nèi)容獨(dú)立于網(wǎng)站的其余內(nèi)容加載。 這樣，內(nèi)容對(duì)用戶可用，即使其他頁面元素尚未加載。

實(shí)際上，內(nèi)嵌框架正變得越來越不重要，因?yàn)樵摲椒ù嬖谌毕荨?例如，它沒有適當(dāng)?shù)靥幚韥碜运阉饕�擎的嵌入元素�?這會(huì)影響搜索引擎優(yōu)化，從而影響網(wǎng)站的排名。 與 iframe 相關(guān)的安全風(fēng)險(xiǎn)更受關(guān)注。 如果您嵌入外部內(nèi)容，可能會(huì)損害您的系統(tǒng)。 例如，iframe 中的內(nèi)容可能包含有害插件，或者網(wǎng)站所有者可能在沒有意識(shí)到的情況下成為網(wǎng)絡(luò)釣魚攻擊的受害者。

隨著數(shù)據(jù)保護(hù)成為網(wǎng)站所有者和用戶日益關(guān)注的問題，iframe 引起了激烈的爭(zhēng)論。 內(nèi)嵌框架通常用于收集用戶數(shù)據(jù)的社交媒體插件，即使網(wǎng)站訪問者沒有與“喜歡”或“分享”按鈕進(jìn)行交互或者是注冊(cè)用戶也是如此。是不是非常有意思

道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒問題，點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟�免費(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！