js中几个对象的区别和用法

今天总结一下js中几个对象的区别和用法：
首先来说说 parent.window与top.window的用法
"window.location.href"、"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转
"top.location.href"是最外层的页面跳转
举例说明：
如果A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的iframe，如果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与window.openner区别
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="获取父窗口内的文本框值" οnclick="getpValue();">
</body>
</html>

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" οnclick="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="获取父窗口内的文本框值" οnclick="getpValue();">
</body>
</html>

下面来举几个常用的例子：
parent.window与top.window一般在分割的页面即 frameset或iframe中使用
注销整个框架后返回到login.aspx：parent.window.location='Login.aspx'或者
top.window.location='Login.aspx'
window.parent也是常在框架中使用，
刷新：window.parent.location.reload();或者刷新某个框架：window.parent.MainForm.location.reload();
获得其他框架的元素值：window.parent.MainForm.form1.text1.value;
window.opener主要是获得通过超链接或者 window.open() 打开本身页面的页面的一些，比如获得值，刷新等
刷新：window.opener.location.reload();
获值：window.opener.document.getElement("txtName").value;
后退：top.playFrame.history.go(-1);
前进： top.playFrame.history.go(1);
刷新： top.playFrame.location.reload();
就总结到这里，这些对象很实用

posted on 2014-01-15 15:37 system_esc 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/systemEsc/p/3520945.html

js中几个对象的区别和用法相关推荐

  1. js中parentNode和parentElement的区别和用法

    了解本篇的基础必须知道什么是节点,关于html dom节点知识点和节点类型的知识,分别看<js节点都有哪些类型?怎么判断是哪种节点类型?>和<js属性节点获取和移除>,下面直接 ...

  2. js中数组和对象的区别方法

    可以使用:instanceof function isArray(obj) {return obj instanceof Array; } function isObject(obj){return ...

  3. Js中apply与call的区别与用法

    解析: apply与call是更改对象的内部指针,即改变对象的this指向的内容. call与apply的第一个参数都是要传入给当前对象的对象,及函数内部的this.后面的参数都是传递给当前对象的参数 ...

  4. JS中some和every的区别和用法

    some和every是数组中迭代的方法 相同点:some和every都有三个参数,即item→当前项,index→当前的索引值,array→数组本身:都可以遍历数组 不同点: some相当于逻辑关系中 ...

  5. return true Java_[Java教程]js中return,return true,return false的用法及区别

    [Java教程]js中return,return true,return false的用法及区别 0 2015-11-16 23:00:03 1.语法及返回方式 ①返回控制与函数结果 语法为:retu ...

  6. uniapp 获取到js文件var一个变量怎么获取到这个变量值_浅析Js中const,let,var的区别及作用域...

    理解:let变量的作用域只能在当前函数中 js中const,let,var的区别及作用域_lianzhang861的博客-CSDN博客​blog.csdn.net 全局作用域中,用 const 和 l ...

  7. js中的extend的用法及其JS中substring与substr的区别

    1.    JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...

  8. js中DOM, DOCUMENT, BOM, WINDOW 区别

    全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...

  9. 你还认为JS中万物皆对象？

    经常在国内的各大网站博客上看到一句话,叫做JS中万物皆对象,那是否真是如此? 那么,我们先来捋一捋JS中的数据类型,JS中的数据类型有下面几种 Undefined Null Boolean Numbe ...

最新文章

  1. 【深度学习笔记】关键点检测——标签（Ground Truth）构建
  2. HDU 1301 Jungle Roads(裸最小生成树）
  3. 2021.12.17自制望远镜调焦座材料
  4. uva437巴比伦塔
  5. 战队口号霸气押韵8字_高考励志班级口号霸气押韵大全
  6. C++设计模式之四 模板模式
  7. Ubuntu系统详细分析【1-10】
  8. 又见回文数 NYOJ781
  9. 最新版的Python写春联，支持行书隶书楷书，不再有缺失汉字
  10. android壁纸服务,android壁纸服务流程浅析
  11. 关于IE上embed自动播放
  12. 《爱的五种语言》阅读笔记
  13. 微信电脑版多用户登录
  14. ubuntu依赖库下载（pkgs）
  15. XUGU：利空频传，建网站如何去赚钱？
  16. Spring MVC中的Model, ModelMap, 和ModelAndView
  17. 搭建传奇游戏，都需要准备什么东西。
  18. 仙剑奇侠传7御灵有什么用？御灵的作用与培养策略
  19. 跨境物流的主要操作流程是怎样的?
  20. VMware虚拟机启动后黑屏，无论怎么按都是不动弹

热门文章

  1. 2021年基金什么时候布局？
  2. 两台电脑之间如何快速传输几百G的文件？
  3. 本地Nginx+Hosts配置本地前端代码和后端代码联调
  4. power bi 背景图_Power BI桌面饼图树
  5. SQL Server中的身份功能教程
  6. 横向扩展 纵向扩展 数据库_扩展数据库–减少扩展的艺术
  7. ssas表格模型 权限控制_如何使用DAX函数查询SSAS表格模型数据库
  8. aws rds监控慢sql_使用AWS Lambda函数自动启动/停止AWS RDS SQL Server
  9. 数据库创建存储过程_创建存储过程来修复孤立的数据库用户
  10. 计算两个日期相差天数的最简洁的代码