使用window.opener完成两个页面参数传递

最新推荐文章于 2025-04-29 09:37:13 发布

原味青豆

最新推荐文章于 2025-04-29 09:37:13 发布

阅读量9.6k

点赞数 1

文章标签： html

本文链接：https://blog.youkuaiyun.com/u013111454/article/details/80763747

版权

本文介绍了如何使用JavaScript的window.opener属性在父页面和子页面之间传递参数。示例展示了一个父页面（包含一个input字段和打开子页面的按钮）和一个子页面（包含一个关闭自身并调用父页面方法的按钮）。在IE浏览器中，允许操作后可正常工作，而在谷歌浏览器中，由于安全机制，本地文件环境下opener属性可能不生效，但在服务器环境下运行正常。

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

父页面：

<html>
<body>

<script type="text/javascript">
function demo(){
window.open("b.html");
}
function de(n){
document.getElementById('a').value = n;
}
</script>
<input type="text" name="a" id="a">
<input type="submit" name="submit" value="submit" οnclick="demo()">
</body>

</html>

子页面

子页面调用父页面的de方法，同时将参数传递给de方法中

<html>
<body>

<script type="text/javascript">
function demo2(){
// window.opener.document.all.a.value = "liweixu";
window.opener.de("liweixu");
window.close();
}
</script>
<input type="submit" name="submit" value="submit2" οnclick="demo2()">
</body>

</html>

注：

问题：谷歌浏览器在子页面上点击选择按钮毫无反应,IE上需要通过允许可以实现

原因：是opener属性的缘故,但不是谷歌浏览器的兼容性问题,首先要知道js安全机制原则上是不能访问本地文件的,并且谷歌浏览器的安全设置级别比较高,认定你在"本地"应用opener属性的时候是通过js打开本地文件,所以操作被截止.

但是,在实际开发环境中是不会产生这个问题的,因为当把页面文件部署到服务器上,通过谷歌浏览器输入 localhost/****** 或者 127.0.0.1/****** 访问该页面,是没有毛病的。