https://www.jb51.net/javascript/31553808l.htm
iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用 <iframe> 标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。
1
| <iframe src="URL"></iframe>
|
虽然 <iframe> 标签可以很方便地实现上述功能，但是需要注意以下几点：
嵌入的网页必须与主页面同源，否则会受到浏览器的安全限制。
嵌入的网页可能会影响页面性能和加载速度，特别是当嵌入的网页包含大量的资源（如图片、CSS 和 JavaScript）时。
嵌入的网页可能会被恶意攻击者用于钓鱼或注入恶意代码的攻击，因此需要谨慎使用。
总之，在使用 <iframe> 标签时，需要仔细权衡其优缺点，确保安全和性能。
传值
URL传参
可以在iframe的src属性中使用查询参数（也称为URL参数）将数据传递到嵌入的页面。例如，假设iframe嵌入的页面URL是 index.com/page.html，那么可以使用如下的URL来传递数据：
1
| <iframe src="index.com/page.html?param1=value1¶m2=value2"></iframe>
|
在嵌入的页面中，可以使用JavaScript获取查询参数并使用它们：
1
2
3
| var params = new URLSearchParams(window.location.search);
var param1 = params.get('param1');
var param2 = params.get('param2');
|
或者写一个函数获取对应的值（该方法来自拓维的一位前端工程师大佬）：
5.2 postMessage（）传参
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| //从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;
};
|
postMessage()方法是一种用于在不同窗口或文档之间传递消息的通用方法，它可以实现跨域通信。在使用postMessage()方法时，需要在发送消息的窗口（发送方）和接收消息的窗口（接收方）中分别编写代码。
5.2.1 子传父：
子：
1
2
| // 发送消息给接收方窗口
window.parent.postMessage("Hello, parent!", "http://parent.com");
|
父：
1
2
3
4
5
6
7
8
9
10
| // 监听message事件，接收消息
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
// 判断消息来源是否是指定的发送方窗口
if (event.origin === "http://child.com") {
// 处理接收到的消息
console.log(event.data);
}
}
|
5.2.2 父传子：
父：
创建实例对象：
1
2
| const iframe = document.getElementById('my-iframe');
const iframeWindow = iframe.contentWindow;
|
发送消息：
1
2
3
| const message = { type: 'GREETINGS', data: 'Hello, child!' };
const targetOrigin = 'http://child.com'; // 指定接收方的源
iframeWindow.postMessage(message, targetOrigin);
|
子：
接收消息
1
2
3
4
5
6
7
| window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
if (event.origin === 'http://parent.com') { // 验证消息来源
console.log(event.data); // 处理接收到的消息
}
}
|
以上就是iframe的基本介绍与使用的详细内容.
