一、介绍

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 设置为“ * ” 号以匹配所有路径，但可能会有安全风险。谨慎使用。

iframe的基本介绍与使用相关推荐

iframe的简单介绍
一.什么是iframe? iframe也称作嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入在现有的网页中使用会创建包含另外一个文档的内联框架(行内框架) 二.如何使用? & ...
python3之Scrapy+Selenium切换iframe抓取网易云音乐排行榜
Scrapy+Selenium切换iframe抓取网易云音乐排行榜 iframe标签 Selenium (WEB自动化工具) Scrapy 框架 iframe标签了解一下iframe 百度百科介绍的 ...
网页子窗口iframe的用法
对于网页子窗口iframe的相关介绍,可参考以下链接: W3school中对iframe的介绍接下来看看iframe的用法: <!DOCTYPE html> <html lang= ...
iframe放大显示_iframe标签使用和在移动端（缩放）适配问题
这是我做项目遇到的问题希望对你有帮助,忽喷! [iframe与window对象(contentwindow)] var detialIframe=document.all("detialIf ...
使用自开发的代理服务器解决 SAP UI5 FileUploader 上传文件时遇到的跨域访问错误试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
用 TableModel Free 框架简化 Swing 开发——JTable
用 TableModel Free 框架简化 Swing 开发从 TableModel 的负担中解脱出来 Michael Abernethy, 软件工程师 II, EMC 简介: 本文将介绍 Tab ...
智能多媒体内容设计在阿里巴巴的应用
http://idi.zju.edu.cn/wp-content/uploads/2020/11/59a1dff68908308effc05fb811f9b0ed.pdfhttp://idi.zju. ...
齐博CMS个模板目录
首先要明确的几点: 1. 做一套新风格前,必须要知道三要素: 模板图片及CSS目录,新风格的参数配置文件,新风格的模板存放目录 2. 地方门户模板存放路径: 网站的头部模板是 \template\d ...
selenium使用大全
selenium使用使用selenium有一个硬性条件,1;使用Google浏览器 2:下载chromedrive.exe工具. 驱动的下载地址如下: http://chromedriver.sto ...

iframe的基本介绍与使用