今天我都在怀疑，很多项目还用不用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. Node v4.1.1

    Installing Node.js via package manager curl --silent --location https://deb.nodesource.com/setup_4.x ...

  2. android开发板

    element14-beaglebone-black http://www.embest-tech.cn/shop/star/element14-beaglebone-black-rev-c.html ...

  3. SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据（树形导航）的webpart开发及问题

    转:http://blog.csdn.net/miragesky2049/article/details/7204882 SharePoint2010沙盒解决方案基础开发--关于TreeView树形控 ...

  4. WebSocket学习笔记IE，IOS，Android等设备的兼容性问

    WebSocket学习笔记IE,IOS,Android等设备的兼容性问 一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏 ...

  5. 《C语言程序设计现代方法》第2章 编程题

    7 编写一个程序,要求用户输入一个美金数量,然后显示出如何使用最少的20美元.10美元.5美元和1美元来付款. 提示:将付款金额除以20,确定20美元的数量,然后从付款金额中减去20美元的总金额.对其 ...

  6. Bzoj 1726: [Usaco2006 Nov]Roadblocks第二短路 dijkstra,堆,A*,次短路

    1726: [Usaco2006 Nov]Roadblocks第二短路 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 969  Solved: 468[S ...

  7. ACM2037

    这题采用的是贪心算法,暂不会.

  8. JS中多个onload冲突解决办法

    一  多个window.onload冲突 在一个页面中有两个JavaScript 分别都用到了window.onload一个是:window.onload=externallinks,另一个是:win ...

  9. div border-radius

    可以画个1/4之一的圆也可以画整个圆 <html> <style type="text/css"> div{ background-color: #000; ...

  10. java使用batik转换svg文件

    svg是一种矢量图片格式,用来保存高保真的图片.我们可以用编辑器打开svg,我们可以看到svg文件其实就是一个xml文件,这种文件浏览器也可以识别.因此要查看svg用现成的浏览器就可以了.值得庆幸的是 ...