今天我都在怀疑，很多项目还用不用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. android使用tabhost实现导航

    参考 http://blog.csdn.net/xixinyan/article/details/6771341 http://blog.sina.com.cn/s/blog_6b04c8eb0101 ...

  2. zip压缩解压缩 项目icsharpcode-SharpZipLib-e012155

    大家可以到http://www.icsharpcode.net/opensource/sharpziplib/ 下载SharpZiplib的最新版本,支持Zip, GZip, BZip2 和Tar格式 ...

  3. USACO3.34Home on the Range（DP）

    之前做过一道类似的 国际象棋盘神马的.. 统计出以每个1作为右下角的最大正方形 那么以大于二到这个最大值之间为边的正方形都可以以这个为右下角 累加就可以了 dp[i][j] = min(dp[i-1] ...

  4. 便利的html5 之 required、number 、pattern

    html5对于表单验证提供了很多自识别功能,非常的便利. 看代码, <!--head start--> <include file="Public:head" / ...

  5. HDOJ --- 1258

    #include<map> #include<string> #include<cstdio> #include<cstring> #include&l ...

  6. [SAM4N学习笔记]按键程序(查询方式)

    一.准备工作:      将上一节搭建的工程复制一份,命名为"5.key scanf".这一节主要讲如何使用SAM4N的GPIO输入功能,实现按键的输入. 二.程序编写:      ...

  7. Hadoop-Map/Reduce之单表连接的实现

    MapReduce程序就是根据其特性对数据进行一个简单的逻辑处理,其中最为重要的一个特性就是根据key值将value值进行合并,其次就是在shuffle阶段有排序. 遇到一个MR程序就是要巧妙利用合并 ...

  8. 从源码编译rpi的内核

    Kernel Building https://www.raspberrypi.org/documentation/linux/kernel/building.md There are two mai ...

  9. Shell函数参数

    在Shell中,调用函数时可以向其传递参数.在函数体内部,通过 $n 的形式来获取参数的值,例如,$1表示第一个参数,$2表示第二个参数... 带参数的函数示例: #!/bin/bash funWit ...

  10. JavaScript- 省市联动代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...