parent.window.opener实现跨页面通讯

最新推荐文章于 2025-07-05 21:17:06 发布

原创最新推荐文章于 2025-07-05 21:17:06 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端技术专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现跨页面信息传递和跳转的方法，包括如何让A页面跳转到指定URL同时B页面也进行相应跳转，以及如何在不同标签页间发送和接收数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有人在技术交流群里提了个问题，瞬间引起我强烈的好奇心，“通过JS改变上一来源页面内信息，包括跳转等功能”。

也许有人见过在父子iframe通讯，但两个页面之间的通讯很少见。

跨标签跳转页面

从A页面进入B页面，进入B页面的同时，A页面跳转到另一个页面。（有时候你也会遇到这个问题，就是跳到一个页面后，来源页面变成了某某广告页面。）
在这里插入图片描述

建立页面A.html，在body里写一个a链接就像这样：

<a href="b.html" target="_blank">弹出B页面</a>

这里唯一要注意的一点是target属性，必须为”_blank”，其他的都不行，不设置也不行。
2. 建立页面B.html，在页面写入JS代码

<script>
	parent.window.opener.location = "http://blog.youkuaiyun.com/a0405221";
</script>

这里opener是来源页面的意思，将来源页面跳转到”http://blog.youkuaiyun.com/a0405221”，很简单的就完成的一个效果，实际上用起来能让看到的技术摸不着头脑（为什么在我网站打开别人的广告，我的网站也会跳转了？哈哈，好腹黑的技能。）

跨标签通讯

在这里插入图片描述

页面1代码中，添加一个input框（用于接收信息），写一个接收信息的JS（另外还可以使用postMessage向B页面发送消息）

<body>
	<a href="b.html" target="_blank">弹出B页面</a>
	<input type="text" id="aipt">
</body>
<script>
	function getInfo(val){
		$("#aipt").val();
	}
	
</script>

页面2代码中获得文本框“bipt”的内容以后，通过parent.window.opener发送到页面1，后面跟着的是页面1里定义好的方法，这里实际上就是执行来源页里的JS。

<body>
	<input type="text" id="bipt">
	<button id="bbtn" onclick="sendInfo()">发送</button>
</body>
</html>
<script>
	function sendInfo(){
		var a = document.getElementById('bipt').value;
		parent.window.opener.getInfo(a);
	}
</script>

iframe父子页面之间的通讯

给子页面id为button的文本框设置文字"test"，（这里注意myFrame为iframe的name=”myFrame”

myFrame.window.document.getElementById("button").value="test";
parent.window.document.getElementById("button").value="test";//给父页面id为button的文本框设置文字"test"