iframe是html中用于嵌入另一完整頁面的標簽，其核心作用是實現“畫中畫”效果。優點包括：1.方便集成第三方內容如視頻或地圖；2.提供隔離性避免css與JS沖突；3.支持并行加載提升性能；4.實現模塊化便于維護。缺點有：1.增加http請求影響性能；2.不利于SEO內容抓取；3.存在xss等安全風險；4.可能影響可訪問性。規避方法包括減少使用、優化資源、使用sandbox屬性及提供替代文本。通信可通過postmessage api實現，動態創建或移除iframe可用JavaScript完成，sandbox屬性常見取值包括allow-same-origin、allow-scripts等以限制權限。
iframe標簽就像網頁中的一個“畫中畫”，它允許你在當前頁面嵌入另一個完整的HTML頁面。 優點是方便集成第三方內容，缺點是可能影響頁面性能和SEO。
iframe標簽允許在當前HTML頁面中嵌入另一個HTML文檔。 它創建一個獨立的瀏覽上下文，可以用來加載來自不同來源的內容。
iframe的基本用法
iframe的使用非常簡單，只需要一個標簽即可。 關鍵屬性包括src（指定嵌入頁面的URL）、width和height（設置iframe的尺寸）。
立即學習“前端免費學習筆記（深入）”；
<iframe src="https://www.example.com" width="600" style="max-width:90%"></iframe>
這段代碼會在當前頁面中創建一個600×400像素的區域，并顯示https://www.example.com的內容。 如果你的src指向的是同域下的資源，那事情會簡單很多，否則，跨域問題會成為一個你需要關注的點。
iframe的優點有哪些？為什么開發者喜歡用它？
- 方便集成第三方內容： 這是iframe最常見的用途。 比如，嵌入視頻（youtube, Vimeo）、地圖（Google Maps）、廣告等。 你不需要自己實現復雜的功能，直接引用別人的頁面就行。
- 隔離性： iframe內部的內容和外部頁面是隔離的。 這意味著iframe中的JavaScript和css不會影響到外部頁面，反之亦然。 這在引入不可信的第三方代碼時非常有用，可以避免潛在的安全風險。
- 并行加載： 理論上，iframe中的內容可以和主頁面并行加載，這在某些情況下可以提高頁面加載速度。 但實際上，瀏覽器對iframe的加載策略可能會有所不同，具體效果取決于瀏覽器的實現。
- 模塊化： 可以將頁面的一部分內容放到iframe中，方便維護和更新。 例如，可以將網站的導航欄放到一個iframe中，這樣修改導航欄只需要修改一個文件，而不需要修改所有頁面。
iframe的缺點是什么？又該如何規避？
- 性能問題： iframe會增加HTTP請求的數量，并且iframe內部的資源也需要加載和渲染，這會增加頁面的整體加載時間。 此外，iframe可能會導致頁面重繪和重排，影響頁面的性能。 規避方法是： 盡量減少iframe的使用，如果必須使用，則優化iframe內部的內容，例如壓縮圖片、使用CDN等。
- SEO問題： 搜索引擎對iframe中的內容抓取有限，這可能會影響網站的SEO。 規避方法是： 盡量避免在iframe中放置重要的內容，如果必須放置，則提供替代方案，例如使用標簽提供文本描述。
- 安全性問題： 如果iframe中的內容來自不可信的來源，可能會存在安全風險，例如XSS攻擊。 規避方法是： 盡量只引用可信來源的iframe，并使用sandbox屬性限制iframe的權限。sandbox屬性可以限制iframe執行腳本、訪問Cookie等，從而降低安全風險。
<iframe src="https://www.example.com" sandbox="allow-scripts allow-same-origin"></iframe>
- 可訪問性問題： 某些輔助技術可能無法正確處理iframe，這會影響網站的可訪問性。 規避方法是： 為iframe提供明確的標題（使用title屬性），并確保iframe中的內容符合可訪問性標準。
如何實現iframe與父頁面之間的通信？
iframe和父頁面之間的通信是一個常見的需求。 由于安全原因，跨域的iframe和父頁面之間不能直接訪問對方的JavaScript對象。 但是，可以通過postMessage API來實現跨域通信。
- 父頁面向iframe發送消息：
const iframe = document.getElementById('myIframe'); iframe.contentWindow.postMessage('Hello from parent!', 'https://www.example.com');
- iframe接收父頁面發送的消息：
window.addEventListener('message', function(event) { if (event.origin !== 'https://your-parent-domain.com') return; // 驗證消息來源 console.log('Received message:', event.data); });
注意： 在使用postMessage API時，一定要驗證消息的來源（event.origin），以防止跨站腳本攻擊。
如何動態創建和移除iframe？
有時候，我們需要根據用戶的操作動態創建和移除iframe。 可以使用JavaScript來實現。
- 動態創建iframe：
const iframe = document.createElement('iframe'); iframe.src = 'https://www.example.com'; iframe.width = '600'; iframe.height = '400'; document.body.appendChild(iframe);
- 動態移除iframe：
const iframe = document.getElementById('myIframe'); iframe.parentNode.removeChild(iframe);
iframe的sandbox屬性有哪些取值？它們分別有什么作用？
sandbox屬性用于限制iframe的權限，可以取多個值，用空格分隔。 常用的取值包括：
- allow-same-origin: 允許iframe使用與父頁面相同的源。 如果不設置此屬性，iframe將被視為一個獨立的源，無法訪問父頁面的Cookie、LocalStorage等。
- allow-scripts: 允許iframe執行JavaScript腳本。
- allow-forms: 允許iframe提交表單。
- allow-top-navigation: 允許iframe修改頂層瀏覽器的位置。 如果不設置此屬性，iframe將無法通過window.top.location修改父頁面的URL。
- allow-popups: 允許iframe打開新的窗口或標簽頁。
- allow-pointer-lock: 允許iframe使用Pointer Lock API。
如果不指定sandbox屬性，iframe將受到最嚴格的限制。 建議根據實際需求，謹慎選擇sandbox屬性的取值，以降低安全風險。
