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

作者：正经夜光杯 | 2024-08-18 13:02:14

踩

iframe 交互

父页面：(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>
1
2
3
4
5
6
7
8
9
10
11

子页面：(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
2
3
4
5
6
7
8
9
10
11

一、父页面操作子页面

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'));
}
1
2
3
4
5
6
7
8
9
10
11
12

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

var _iframe = document.getElementById("iframeId");
window.onload = function() {
    _iframe.contentWindow.fun();
}
// 或：
document.getElementById("iframeId").onload = function() {
    _iframe.contentWindow.fun();
}
1
2
3
4
5
6
7
8

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
2
3
4
5
6
7
8
9

二、子页面操作父页面

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

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

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

// getInfo为父页面方法名
window.top.getInfo();
// 或
window.parent.frames.getInfo();
// 或
window.parent.frames.parent.getInfo();
1
2
3
4
5
6

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

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

三、iframe与vue一起使用

推荐使用方法三

（注：使用时父子页面可能会存在跨域问题会影响部分方法使用。）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/997568