iframe的基本介绍与使用

一、介绍

iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用<iframe>标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。

二、使用

<iframe>标签的基本用法如下：

<iframe src="URL"></iframe>

三、属性 

属性	描述
allow	允许特定功能的列表，如fullscreen，geolocation等
allowfullscreen	指定是否允许在iframe中使用全屏模式
allowpaymentrequest	指定是否允许在iframe中进行支付请求
allowtransparency	指定iframe是否可以是透明的
class	为iframe定义一个或多个类名
frameborder	指定是否在iframe周围显示边框
height	指定iframe的高度
importance	指定iframe对页面内容的重要性
loading	指定iframe加载时的行为
name	为iframe定义一个名称
referrerpolicy	指定如何发送referer HTTP标头
sandbox	启用iframe的沙盒模式，提高安全性
src	指定要在iframe中显示的文档的URL
srcdoc	在iframe中嵌入HTML代码而不是外部文档
style	定义iframe的CSS样式
title	为iframe定义一个标题
width	指定iframe的宽度

四、注意

虽然 <iframe> 标签可以很方便地实现上述功能，但是需要注意以下几点：

• 嵌入的网页必须与主页面同源，否则会受到浏览器的安全限制。
• 嵌入的网页可能会影响页面性能和加载速度，特别是当嵌入的网页包含大量的资源（如图片、CSS 和 JavaScript）时。
• 嵌入的网页可能会被恶意攻击者用于钓鱼或注入恶意代码的攻击，因此需要谨慎使用。

总之，在使用 <iframe> 标签时，需要仔细权衡其优缺点，确保安全和性能。

五、传值

5.1 URL传参

 可以在iframe的src属性中使用查询参数（也称为URL参数）将数据传递到嵌入的页面。例如，假设iframe嵌入的页面URL是 index.com/page.html，那么可以使用如下的URL来传递数据：

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

  在嵌入的页面中，可以使用JavaScript获取查询参数并使用它们： 

var params = new URLSearchParams(window.location.search);
var param1 = params.get('param1');
var param2 = params.get('param2');

 或者写一个函数获取对应的值（该方法来自拓维的一位前端工程师大佬）：

//从url获取参数
export const getQuery = (name: string, url?: string) => {
  const params = new URLSearchParams(url || window.location.search);
  const value = params.get(name);
  if (value) {
    return value;
  }
  return getQueryString(name, url);
};

export const getQueryString = (name: string, url?: string) => {
  const reg = new RegExp('(^|&|/?)' + name + '=([^&]*)(&|$)', 'i');
  const r = encodeURI(url || window.location.search || window.location.href || window.location.hash)
    .substr(1)
    .match(reg);
  if (r != null) return unescape(r[2]);
  return null;
};

5.2 postMessage（）传参

postMessage()方法是一种用于在不同窗口或文档之间传递消息的通用方法，它可以实现跨域通信。在使用postMessage()方法时，需要在发送消息的窗口（发送方）和接收消息的窗口（接收方）中分别编写代码。

5.2.1 子传父：

子：

// 发送消息给接收方窗口
window.parent.postMessage("Hello, parent!", "http://parent.com");

父：

// 监听message事件，接收消息
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  // 判断消息来源是否是指定的发送方窗口
  if (event.origin === "http://child.com") {
    // 处理接收到的消息
    console.log(event.data);
  }
}

5.2.2 父传子：

父：

创建实例对象：

const iframe = document.getElementById('my-iframe');
const iframeWindow = iframe.contentWindow;

发送消息：

const message = { type: 'GREETINGS', data: 'Hello, child!' };
const targetOrigin = 'http://child.com'; // 指定接收方的源
iframeWindow.postMessage(message, targetOrigin);

子：

接收消息

window.addEventListener('message', receiveMessage, false);

function receiveMessage(event) {
  if (event.origin === 'http://parent.com') { // 验证消息来源
    console.log(event.data); // 处理接收到的消息
  }
}

注意：可以将  targetOrigin 设置为“ * ” 号以匹配所有路径，但可能会有安全风险。谨慎使用。