今天我都在怀疑，很多项目还用不用iframe这个框架做页面布局。

如果你有兴趣想告诉我，请给我留言。

一. 说明

注：这里top和window.top等价，window是可以省略的，有得情况下不允许省略，如：
 function func(){

　　var top=100;

　　var tWin=window.top;

}

window和self都表示当前窗口本身；

top是最顶层的window

parent是上级window

opener是打开当前窗口的window

二.举个栗子

以下是a.html的主要html：

<body>

　　<iframe id="frm" ... src="b.html"></iframe>

　　<script>

　　　　var t="A页面";   //这个是A页面中window对象的一个属性，和window.t='A页面'等级

　　</script>

</body>

以下是b.html的主要html脚本：

<body>

　　<script>

　　　　function showWin(){

　　　　　　window.open("c.html");

　　　　}

　　　　var t="B页面";

　　</script>

　　<iframe id="frm" ....src="c.html"></iframe>

　　<input type="button" value="..." onclick="showWin()" />

</body>

以下是c.html的主要html脚本：

<body>

　　<script>

　　　　var t="C页面";

　　　　alert(window.t);

　　　　alert(self.t);

　　　　alert(top.t);

　　　　alert(parent.t);

　　　　alert(opener.t);

　　</script>

</body>

按照以上的设计，运行a.html页面，会弹出以下信息：

// C页面；

// C页面；

// A页面；

// B页面；

// 页面脚本报错，提示opener.t为空或不是对象；

点击b.html页面上的按钮，弹出c.html页面，页面弹出信息除了最后一个，其他的都和上面一样：

// C页面；

// C页面；

// A页面；

// B页面；

// B页面；--------- 只有这个不一样，以为是C页面是被B页面打开的

基础之 window-self-top-opener的更多相关文章

  1. js 对象 window,parent,top,opener,document

    Js 对象 window top parentWindow 当前html 页面Parent 当前html 页面的父页面Top 当前html页面的祖页面Window ==parent = top 当前页 ...

  2. html中window对象top 、self 、parent 等属性

    window对象用法: http://www.w3school.com.cn/htmldom/dom_obj_window.asp top 属性返回最顶层的先辈窗口. 该属性返回对一个顶级窗口的只读引 ...

  3. js中window对象的opener属性的一个坑

    2018-05-08 17:48:33 今天我编写代码碰到了一个让我纠结了很久的坑,特别想在此说一下,让其他人避免我踏过的这个坑. 这个坑就是:在我自己写的子窗口中用opener属性却获取不到父窗口的 ...

  4. Python3 tkinter基础 Text window 文本框中插入按钮

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. UI基础:UIView(window,frame,UIColor,CGPoint,alpha,CGRect等) 分类： iOS学习-UI 2015-06-30 20:01 119人阅读 评论(0) 收藏

    UIView 视图类,视图都是UIView或者UIView子类 UIWindow 窗口类,用于展示视图,视图一定要添加window才能显示 注意:一般来说,一个应用只有一个window 创建一个UIW ...

  6. Android 环境搭建、基础窗口window／Mac

    1.五步搞定Android开发环境部署--非常详细的Android开发环境搭建教程 2.Android开发学习之路--MAC下Android Studio开发环境搭建 4.Android常用开发工具以 ...

  7. linux 基础 复制window文件到linux

    1.下载pscp工具:地址 2.dos执行命令: pscp F:\his.rar root@192.168.3.137:/tmp/test

  8. Java Script 基础

    一. JS的简介 JavaScript是一种网页编程技术,经常用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言,类似C语言和Java的语法 事先不编译:逐行执行:无需 ...

  9. JavaScript基础入门07

    目录 JavaScript 基础入门07 BOM window对象 Navigator对象 Screen 对象 Location对象 History 对象 JavaScript 基础入门07 BOM ...

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

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

随机推荐

  1. bzoj2893

    有起点终点的限制的路径覆盖首先tarjan缩点成DAG似乎不能按照二分匹配的做法做那么建立源汇拆点i,i',这两点之间连一条下界为1上界无穷的边,其它边都是下界为0,上界正无穷然后就是有源有汇的最小流 ...

  2. 【转】Windows7 下安装 JDK 7 时版本冲突问题解决

    原文网址:http://wxl24life.iteye.com/blog/1966058 自己电脑上一直用的 JDK 版本是 1.6,今天决定更新到 1.7,在安装 JDK 1.7 后,控制台输入 j ...

  3. Flash正则例子

    var jack:String = "zhuhai"; var arr:Array = ["23", "4", "67" ...

  4. WEB安全测试的类型

    1.跨站脚本(XSS) XSS又叫CSS(CROSS SET SCRIPT),跨站脚本攻击.它指的是恶意攻击者往WEB页面里插入恶意的html代码,当用户浏览该页面时,嵌入其中的html代码会被执行, ...

  5. 曾经记录——asp.net中的点滴

    “<%#....%>”这是数据绑定,里面可以调用C#的方法,比如在数据控件里执行绑定某个字段<%# Eval("Name")%>这样帮顶一个Name的字段. ...

  6. 城市连动纯js代码DEMO

    前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  7. MyEclipse中Web项目的发布和运行

    1.右键对应项目的名称:MyEclipse|Add and Remove Project Deployments... 2.点击Add按钮,选择Tomcat7.x,Deploy type选择Explo ...

  8. 多目标遗传算法 ------ NSGA-II （部分源码解析） 拥挤距离计算 crowddist.c

    /* Crowding distance computation routines */ # include <stdio.h> # include <stdlib.h> # ...

  9. Http 缓存

    常用Http缓存页asp.net 页面上加上 <%@ OutputCache Duration="10" VaryByParam="None" %> ...

  10. ajax 小案例

    ajax 异步提交数据,实现无刷新提交表单 ajax.html <!DOCTYPE html> <html> <head> <meta charset=&qu ...