今天总结一下js中几个对象的区别和用法:

1.首先来说说 parent.window与top.window的用法

"window.location.href","location.href"    是本页面跳转
"parent.location.href" 是上一层页面跳转
"top.location.href" 是最外层的页面跳转

举例说明:
如果A,B,C,D都是窗口,D是C的iframe,C是B的iframe,B是A的iframe,

D ->  C  ->  B-> A  框架顺序  A是最外层的框架

如果D中js这样写

"window.location.href"、"location.href":        D页面跳转
"parent.location.href": C页面跳转
"top.location.href": A页面跳转 现在终于明白了连接的时候target的用法了:
_blank: 重新打开一个窗口
_parent:父窗口执行重定向
_self: 自身页面重定向
_top: 第一个父窗口重定向
综上所述可知:parent.window:父窗口对象 top.window:第一个父窗口的对象

window.parent 是iframe页面调用父页面对象,当我们想从iframe内嵌的页面中访问外层页面是可以直接利用window.parent获取;

例子如下:
A.html

<html>
<head>
<title>父页面</title>
</head>
<body>
<form id="form1" action="">
<div>
输入值:
<input type="text" name="username" id="username" /><br />
<iframe src="b.html" width="400px" height="300px"></iframe>
</div>
</form>
</body>
</html>

B.html

<html>
<head>
<script type="text/javascript">
function getpValue()
{
document.getElementByIdx_x_x_x("span1").innerText=window.parent.document.getElementByIdx_x_x_x("username").value;
}
</script>
</head>
<body>
<span>文本框值为:</span><span id="span1"></span><br />
<input type="button" value="获取父窗口内的文本框值" onclick="getpValue();">
</body>
</html>
document.frames对象可以引用iframe里的页面,也可以引用frameset里的页面.
可以这样
document.frames[0].document.getElementById('xx');
可以这样
document.frames[0].document.body.innerHTML;

window.opener 是window.open或超链接<a> 打开的子页面调用父页面对象

例子如下
a.html

<html>
<head>
<title>父页面</title>
<script type="text/javascript">
function openB()
{
window.open('b.html','b','width=400,height=200,status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=200,top=100');
}
</script>
</head>
<body>
<form id="form1" action="">
<div>
输入值:
<input type="text" name="username" id="username" /><br />
<input type="button" value="打开窗口B" onclick="openB();" /><br />
<a href="b.html" target="_blank">超链接打开B页面</a>
</div>
</form>
</body>
</html>

b.html

<html>
<head>
<script type="text/javascript">
function getpValue()
{
document.getElementByIdx_x_x_x("span1").innerText=window.opener.document.getElementByIdx_x_x_x("username").value;
}
</script>
</head>
<body>
<span>文本框值为:</span><span id="span1"></span><br />
<input type="button" value="获取父窗口内的文本框值" onclick="getpValue();">
</body>
</html>

window.parent与window.openner 之前的总结的更多相关文章

  1. window.parent与window.openner区别介绍

    今天总结一下js中几个对象的区别和用法: 首先来说说 parent.window与top.window的用法 "window.location.href"."locati ...

  2. window.parent与window.openner

    window.parent与window.openner区别介绍 作者: 字体:[增加 减小] 类型:转载 今天总结一下js中几个对象的区别和用法,对这几个概念混淆的朋友可以看看 今天总结一下js中几 ...

  3. JavaScript中,window.opener是什么?window.parent和window.opener有啥区别?

    来自CSDN的问答: window.opener是什么啊? ++++++++++++++++++++++++++++++++++++++++++++++++++ 弹出本窗体的句柄 比如你想点一个按钮直 ...

  4. window.parent与window.opener的区别

    有这样一个需求,弹出一个新窗口 并从该新页面的select选择框中选择需要的类别,再返回到之前的父窗口页面的某个文本框中.这里就要用到window.parent和window.opener 如题两种方 ...

  5. (转)window.parent和window.opener区别

    下面一段代码是关于window.parent和window.opener区别 来讲的,我们如果要用到iframe的值传到另一框架就要用到window.opener.document.getElemen ...

  6. window.parent 与 window.opener

    window.parent针对iframe,window.opener针对window.open 父页面parent.jsp: <%@ page language="java" ...

  7. window.parent与window.opener的区别与使用

    window.parent 是iframe页面调用父页面对象 举例: a.html 如果我们需要在b.html中要对a.html中的username文本框赋值(就如很多上传功能,上传功能页在ifrma ...

  8. window.parent 与 Window.top

    window.parent 返回当前窗口的父窗口对象. 如果一个窗口没有父窗口,则它的 parent 属性为自身的引用. 如果当前窗口是一个 <iframe>, <object> ...

  9. window.parent 、window.top及window.self 详解

    在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口. 1. window.self ...

随机推荐

  1. 坑爹的BFC;块格式上下文

    Formatting context(FC) Formatting context 是 W3C CSS2.1 规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位 ...

  2. 【CodeForces 624D】Array GCD

    题 You are given array ai of length n. You may consecutively apply two operations to this array: remo ...

  3. 解决启动Biee控制台乱码问题

    在安装完Biee后,大家都可以看到在程序中可以找到启动BI服务的地方 点击上图中的启动bi服务则在window系统中会弹出一个dos窗口,来显示执行启动服务的操作,如下图 上图显示的是正常情况,本人安 ...

  4. request.getAttribute() 和 request.getParameter() 有何区别?

    HttpServletRequest类既有getAttribute()方法,也由getParameter()方法,这两个方法有以下区别: (1)HttpServletRequest类有setAttri ...

  5. RequestMethod.DELETE相关,如何用jquery实现RequestMethod.DELETE请求

    Spring MVC添加支持Http的delete.put请求!(HiddenHttpMethodFilter) Spring3.0之后->Spring MVC过滤器-HiddenHttpMet ...

  6. 移动H5页面,keyup事件不好使用处理解决

    1.mouse事件换成touch,pointer事件,keyup换成textInput事件

  7. bzoj1069 SCOI2007 最大土地面积

    1069: [SCOI2007]最大土地面积 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 2560  Solved: 983 Description ...

  8. Redis Installation、Configuration、Program Based On Redis Learning

    目录 . Redis 简介 . Redis安装配置 . 编程使用Redis . 使用Lua脚本 1. Redis 简介 0x1: Redis是什么 Redis是一款Nosql类型的基于key-valu ...

  9. iOS应用开发最佳实践系列一:编写高质量的Objective-C代码

          本文由海水的味道编译整理,转载请注明译者和出处,请勿用于商业用途! 点标记语法 属性和幂等方法(多次调用和一次调用返回的结果相同)使用点标记语法访问,其他的情况使用方括号标记语法. 良好的 ...

  10. 深入解析MySQL分区(Partition)功能

    自5.1开始对分区(Partition)有支持 = 水平分区(根据列属性按行分)= 举个简单例子:一个包含十年发票记录的表可以被分区为十个不同的分区,每个分区包含的是其中一年的记录. === 水平分区 ...