Html页面与页面间的交互
Html页面与页面间的交互
White feathe
发布于 2022-04-13 14:11:41
发布于 2022-04-13 14:11:41
分别为：window.parent 与 window.opener两者
简单介绍：
1、window.opener 是 window.open 打开的子页面调用父页面对象
window.opener 只是对弹出窗口的母窗口的一个引用。
比如：a.html中，通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中，就可以通过window.opener（省略写为opener）来引用a.html，包括a.html的document等对象，操作a.html的内容。
附上window.opener效果图：
window.opener实现的效果图
a.html的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父页面</title>
</head>
<body>
<input type="button" name="button" id="button" value="提交" onclick="open()" />
<input type="text" name="textfield" id="textfield" />
</body>
<script>
function open() {
window.open("b.html");
}
</script>
</html>b.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子页面</title>
</head>
<body>
<button onclick="aaa()">更改父页面的文件</button>
</body>
<script>
function aaa() {
/**
* //更改父页面的元素
* window.opener 返回的是创建当前窗口的那个父窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm
*/
window.opener.document.getElementById('textfield').value = '123123123';
}
</script>
</html>2、window.parent 是iframe页面调用父页面对象
parent表示父窗口，比如一个A页面利用iframe或frame调用B页面，那么A页面所在窗口就是B页面的parent。
a.html的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>parent测试</title>
</head>
<body>
<form name="form1" id="form1">
<input type="text" name="username" id="username"/>
</form>
<iframe src="b.html" width=100%></iframe>
</body>
</html>b.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
b页面
</body>
<script>
//如果我们需要在b.html中要对a.html中的username文本框赋值（就如很多上传功能，上传功能页在ifrmae中，上传成功后把上传后的路径放入父页面的文本框中）
window.parent.form1.username.value = "z这里是b页面赋值操作";
</script>
</html>gitHub地址：这里写链接内容
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-10-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录