iframe之父子页面通信

一月清辉

已于 2022-03-19 10:14:43 修改

阅读量8.2k

点赞数 4

分类专栏： javascript 文章标签： iframe父子页面的通信

于 2020-08-05 21:13:52 首次发布

原文链接：https://www.cnblogs.com/s313139232/p/10430151.html

版权

javascript 专栏收录该内容

134 篇文章 15 订阅

订阅专栏

文章目录

iframe之父子同源页面的通信

1、获取子页面的 window 对象 ----- `获取iframe节点的contentWindow属性`

获取子页面的 window 对象，即获取了子页面的所有变量和方法，获取方法如下：

// iframe id
document.getElementById('menuIframe').contentWindow
 
// iframe name
window.frames['menuIframe'].window
 
// iframe index 当前窗体的第几个 iframe
window.frames[1].window

2、子 iframe 获取父页面----- `window.parent`

window.parent 即为当前页面的上一级页面的 window 对象

window.parent

3、Demo

parent.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<iframe src="./children.html" name="iframeContainer" id="iframeContainer"></iframe>
	</body>
	<script type="text/javascript">
		function parentHello() {
			alert("this is parent hello function!");
		}

		//必须在页面加载完成再操作dom
		window.onload = function() {
			//document.getElementById('iframeContainer').contentWindow.sayChild(); 
			//window.frames['iframeContainer'].window.sayChild(); 
			window.frames[0].window.sayChild();
		}

	</script>

</html>

children.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
	<button onclick="say()">告诉父页面</button>
    <script type="text/javascript">
        function sayChild() {
            alert("this is sub hello function!");
        }
        
        function say(){
        	window.parent.parentHello();
        }
        
    </script>
</body>
</html>

与打开的同源新标签页面通信

发送消息----- `postMessage`

页面对象.postMessage(message, targetOrigin);

父获子页面对象：document.getElementById("otherPage").contentWindow

子获父页面对象：

window.parent : 获取父页面的window对象 、
window.opener : 获取打开这个页面的那个页面的window对象

接收消息----- `监听message方法`

window.addEventListener("message", function(event) {       
    console.log(event, event.data);   
}, false);

案例如下

// A页面-----接收页，从此页面打开B页面
<body>
    <a href="javascript:;" onclick="window.open('./message.html')">xxxx</a>
    <script>
        var readFlag = false;
        window.addEventListener('message', function (e) {
            console.log(e.data);
        }, false)
    </script>
</body> 
 
 
 
//B页面---发送页 ，向打开这个页面的A页面发送信息。
<body>
    <button class="btn">点击</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
       
        $('.btn').click(function () {
             // iframe 嵌套的情况下，获取父页面
            //window.parent 用于iframe嵌套情况下寻找上级window对象
            //window.parent.postMessage({ readFlag: false }, '*')

            //跳转打开新页面的情况下，获取父页面，即打开新页面的原始页面
            var targetWindow = window.opener; // 获取打开此页面的window对象
            targetWindow.postMessage({ readFlag: false }, '*')
        })
    </script>
</body>