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

前言

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

什么是iframe

介绍

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

使用

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

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

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

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

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

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

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

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

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

1. 安全隔离： 有时，你可能需要在网页中加载来自不同源的内容，但由于同源策略的限制，使用iframe可以在一定程度上实现安全隔离。
   
2. 跨域通信： 使用postMessage API，你可以在不同的iframe之间进行跨域通信，以实现数据传输和事件处理。
   
3. 多语言支持： 在多语言网站中，你可以使用iframe来嵌入不同语言版本的内容，以便用户切换语言。
   
4. 动态加载内容： 通过JavaScript，你可以动态创建和加载iframe，以便根据用户的交互或其他条件加载不同的内容。
   

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

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

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

<iframe src="iframe.html?param1=value1¶m2=value2"></iframe>

1. 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）等安全漏洞，因此必须小心处理安全性问题。