iframe父页面和子页面之间的交互

最新推荐文章于 2025-08-11 16:22:32 发布

黑色的糖果

最新推荐文章于 2025-08-11 16:22:32 发布

阅读量656

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js 文章标签： javascript vue js dom

本文链接：https://blog.csdn.net/Dalin0929/article/details/105041182

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

11 篇文章

订阅专栏

本文详细介绍了如何在父页面与子页面间进行元素获取、方法调用及信息传递，涵盖父页面操作子页面、子页面操作父页面的方法，并提及了与Vue框架结合使用的注意事项。

父页面：(1.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="parId">嵌入</div>
<iframe src="2.html" id="iframeId" name="iframeName"></iframe>
</body>
</html>

子页面：(2.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="DvID">被嵌入</div>
<button id="btn">发送</button>
</body>
</html>

一、父页面操作子页面

1.父页面获取子页面元素

// 根据id获取iframe页面中的元素
//（注：需要写在window.onload或iframe标签的onload中，否则获取不到元素）
var _iframe = document.getElementById("iframeId");
window.onload = function() {
    console.log(window.frames["iframeName"].document.getElementById('btn'));
    console.log(_iframe.contentWindow.document.getElementById('btn'));
}
// 或：
document.getElementById("iframeId").onload = function() {
    console.log(window.frames["iframeName"].document.getElementById('btn'));
    console.log(_iframe.contentWindow.document.getElementById('btn'));
}

2.父页面调用子页面方法

var _iframe = document.getElementById("iframeId");
window.onload = function() {
    _iframe.contentWindow.fun();
}
// 或：
document.getElementById("iframeId").onload = function() {
    _iframe.contentWindow.fun();
}

3.父页面给子页面传递信息

// 子页面监听message：
window.addEventListener('message',function(event) {
    console.log(event.data);
})
// 父页面发送message：
var _iframe = document.getElementById("iframeId");
window.onload = function() {
    _iframe.contentWindow.postMessage({data:'123'},'*');
}

二、子页面操作父页面

1.子页面获取父页面元素

// 根据id获取父页面元素：
window.parent.document.getElementById("parId");
// 或
window.top.document.getElementById("parId");

2.子页面调用父页面方法

// getInfo为父页面方法名
window.top.getInfo();
// 或
window.parent.frames.getInfo();
// 或
window.parent.frames.parent.getInfo();

3.子页面给父页面传递信息

// 父页面监听message：
window.addEventListener('message',function(event) {
    console.log(event.data);
})
// 子页面发送message：
window.top.postMessage('嘻嘻嘻','*');
window.parent.frames.postMessage('哈哈哈','*');
window.parent.frames.parent.postMessage('嘿嘿嘿','*');