当被问到你使用过iframe吗？有哪些优点和缺点？

前言

之前做需求遇到过这样的场景，两个不同的平台，其中一个平台需要使用另一个平台的某个页面，在没有用微前端和独立封装组件库的时候。就想到了使用iframe，直接将另一个页面嵌入到需要的页面里面。2即使是不同源的也没问题。

什么是iframe

介绍

前端的iframe（内联框架）是一种HTML元素，它允许你在网页中嵌入另一个网页或文档。通过使用iframe，你可以在一个网页中显示来自不同源或同一源的内容，这对于嵌入地图、视频、广告或其他外部资源非常有用。

使用

<iframe>（内联框架）在前端开发中有多种作用和使用场景。以下是一些常见的用途和场景：

1. 嵌入外部网页： 最常见的用途是在你的网页中嵌入其他网站的内容。这可以用于显示其他网站的页面、地图、社交媒体小部件、外部应用程序或其他在线资源。

   <iframe src="https://www.example.com"></iframe>
   

2. 嵌入本地网页： 你可以使用iframe来嵌入同一网站内的其他页面或本地HTML文件。这对于在一个页面中显示多个内容块或小部件非常有用。

   <iframe src="other-page.html"></iframe>
   

3. 视频和音频嵌入： 你可以使用iframe来嵌入在线视频和音频播放器，例如YouTube、Vimeo、SoundCloud等。

   <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
   

4. 广告显示： 广告网络通常使用iframe来嵌入广告，以便在多个网站上显示广告内容。

   <iframe src="https://advertisements.com/advert"></iframe>
   

5. 安全隔离： 有时，你可能需要在网页中加载来自不同源的内容，但由于同源策略的限制，使用iframe可以在一定程度上实现安全隔离。

6. 跨域通信： 使用postMessage API，你可以在不同的iframe之间进行跨域通信，以实现数据传输和事件处理。

7. 多语言支持： 在多语言网站中，你可以使用iframe来嵌入不同语言版本的内容，以便用户切换语言。

8. 动态加载内容： 通过JavaScript，你可以动态创建和加载iframe，以便根据用户的交互或其他条件加载不同的内容。

iframe页面如何接收父级页面的参数

为了更灵活的使用iframe嵌套，iframe页面接收父级页面的参数，可以针对不同情况展示不同的内容。有几种方法可以实现这种参数传递：

1. URL查询参数： 你可以将参数作为查询字符串附加到iframe的src属性中。iframe页面可以通过JavaScript来解析URL中的查询参数并使用它们。

   父级页面：

   <iframe src="iframe.html?param1=value1&param2=value2"></iframe>
   

   iframe页面：

   // 解析查询参数
   var urlParams = new URLSearchParams(window.location.search);
   var param1 = urlParams.get('param1');
   var param2 = urlParams.get('param2');
   

2. postMessage API： 使用postMessage API，你可以将参数作为消息发送给iframe页面。这提供了更灵活的方式来传递数据，包括跨域通信。

   父级页面：

   var iframe = document.getElementById('myIframe');
   iframe.contentWindow.postMessage({ param1: 'value1', param2: 'value2' }, 'https://example.com');
   

   iframe页面：

   window.addEventListener('message', function(event) {
     if (event.origin === 'https://example.com') {
       // 处理从父级页面发送的消息
       var data = event.data;
       var param1 = data.param1;
       var param2 = data.param2;
     }
   });
   

3. Cookie： 如果iframe和父级页面位于同一域名下，你可以使用Cookie来在它们之间共享数据。请注意，这只适用于同一域名的情况。

   父级页面：

   document.cookie = 'param1=value1; path=/';
   document.cookie = 'param2=value2; path=/';
   

   iframe页面：

   // 从Cookie中读取参数
   var param1 = getCookie('param1');
   var param2 = getCookie('param2');
   

优点与缺点

优点：

1. 内容嵌入： 最大的优点之一是能够在一个网页中嵌入其他网页或内容。这使得可以轻松地在你的网站上显示来自不同源的内容，如外部网站、媒体、广告等。

2. 代码分离： 使用iframe，你可以将网站的不同部分拆分为独立的HTML文档，这有助于代码的分离和维护。

3. 安全性隔离： 由于浏览器的同源策略，iframe可以提供安全性隔离，防止来自嵌入内容的恶意代码影响主页面。

4. 多语言支持： 可以使用iframe来加载不同语言版本的内容，以满足多语言网站的需求。

5. 跨域通信： 通过postMessage API，你可以在不同的iframe之间进行跨域通信，实现数据传输和事件处理。

缺点：

1. 性能开销： 使用大量的iframe可能会导致性能问题，因为每个iframe都需要加载和渲染，增加了页面的复杂性。

2. SEO问题： 搜索引擎爬虫可能不会正确解释和索引iframe中的内容，这可能会影响到网站的搜索引擎排名。

3. 访问性问题： 屏幕阅读器等辅助技术可能难以处理iframe中的内容，从而影响到网站的可访问性。

4. 页面加载时间： 如果你嵌入的内容来自慢速服务器或需要长时间加载，可能会延长整个页面的加载时间。

5. 外观一致性： 嵌套的iframe可能会导致外观和样式的不一致性，因为每个iframe都可以有自己的CSS规则。

6. 用户体验问题： 如果不妥善处理，iframe可能会导致用户体验问题，如滚动问题、点击穿透等。

7. 安全风险： 如果不小心，iframe可以用于点击劫持（clickjacking）等安全漏洞，因此必须小心处理安全性问题。