js中parent和opener的区别
类别:Web前端 浏览量:4161
时间:2013-12-25 js中parent和opener的区别
js中parent和opener的区别opener
opener用于在window.open的页面引用执行该window.open方法的的页面的对象。例如:A页面通过window.open()方法弹出了B页面,在B页面中就可以通过opener来引用A页面,这样就可以通过这个对象来对A页面进行操作。
parent
parent用于在iframe,frame中生成的子页面中访问父页面的对象。例如:A页面中有一个iframe或frame,那么iframe或frame中的页面就可以通过parent对象来引用A页面中的对象。这样就可以获取或返回值到A页面中。
parent指父窗口,在FRAMESET中,FRAME的PARENT就是FRAMESET窗口。 opener指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。 两者肯定不一样。
parent是相对于框架来说父窗口对象 opener是针对于用window.open打开的窗口来说的父窗口,前提是window.open打开的才有。
实例介绍
window.parent
a页面
<html>
<head><title>主页面</title></head>
<body>
<form name="form1" id="form1"><input type="text" name="username" id="username"/></form>
<iframe src="b页面" width=100%></iframe>
</body>
</html>
b页面
<html>
<head><title></title>
<script type="text/javascript">function UpdateParent()
{
var _parentWin = window.parent ;
_parentWin.form1.username.value = "xxxx" ;
}
</script>
</head>
<body>
<form name="form1" id="form1">
<p> </p>
<p align="center">
<input type="button" name="button" id="button" value="更新主页面的UserName内容" onClick="UpdateParent();">
</p>
<p> </p>
</form></body>
</html>
window.opener
a页面
<html>
<head>
<title>主页面</title>
<script type="text/javascript">
function openSubWin()
{var _width = 300 ;
var _height = 200 ;var _left = (screen.width - _width) / 2 ;
var _top = (screen.height - _height) / 2 ;
window.open("b页面",null,
"height=" + _height + ",width=" + _width + ",status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=" + _left + ",top=" + _top);
}
</script>
</head>
<body><form name="form1" id="form1"><input type="text" name="username" id="username"/><input type="button" value="弹出子页面" onClick="openSubWin();"></form></body>
</html>
b页面
<html>
<head>
<title>子页面</title>
<script type="text/javascript">function UpdateParent()
{
var _parentWin = window.opener ;
_parentWin.form1.username.value = "xxxx" ;
}
</script>
</head>
<body>
<form name="form1" id="form1">
<p> </p>
<p align="center">
<input type="button" name="button" id="button" value="更新主页面的UserName内容" onClick="UpdateParent();">
</p>
<p> </p>
</form>
</body>
</html>
您可能感兴趣
- javascript编程中的promise(JavaScript如何利用Promise控制并发请求个数)
- js怎么做一个计时器(JavaScript实现简单计时器)
- javascript执行类的所有方法(Javascript中异步等待的深入理解)
- js数组去重的十种方法(JavaScript常用数组去重实战源码)
- javascript函数工具有哪些(如何让你的JavaScript函数更加优雅详解)
- javascript 开发网站(帮你提高开发效率的JavaScript20个技巧)
- js 定时切换图片(JavaScript定时器实现无缝滚动图片)
- Javascript操作DOM
- js使用递归解析(关于JavaScript递归经典案例题详析)
- JavaScript实现网页版贪吃蛇游戏(JavaScript实现网页版贪吃蛇游戏)
- 使用javascript数组循环(JavaScript数组reduce方法的语法与实例解析)
- javascript作用域实例(JavaScript defineProperty如何实现属性劫持)
- 在html中使用javascript实例代码(原生 JS+CSS+HTML 实现时序图的方法)
- javascript构造重复数组(JavaScript平铺数组转树形结构的实现示例)
- javascript 自带格式化时间(JavaScript内置日期、时间格式化时间实例代码)
- js中事件的三个阶段(JavaScript中事件冒泡机制示例详析)
- ()
- 对你思念入骨的女人,跟你见面时会有这几种表现,藏都藏不住(对你思念入骨的女人)
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
- 如何快速赚钱(如何快速赚钱方法真实有效)
- 这里输入关键词(如何输入关键词)
- 熊猫中国国宝(熊猫国宝酒53酱香)
热门推荐
- mysql查询慢有哪些原因(MySQL 查询速度慢的原因)
- docker-compose部署实例(详解docker-compose速度太慢解决方式)
- nodejs格式化教程(nodejs利用readline提示输入内容实例代码)
- css3编程实战(详解CSS3开启硬件加速的使用和坑)
- 数据恢复操作类型包括误写入恢复(delete误删数据使用SCN号恢复推荐)
- python菜单栏教程(Python3.5实现的三级菜单功能示例)
- python在txt指定行添加文本(Python修改文件往指定行插入内容的实例)
- C#中Nullable<T>
- php面向对象3大特征(PHP面向对象程序设计重载overloading操作详解)
- mysql日志功能介绍(mysql日志系统的简单使用教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9