今天我都在怀疑，很多项目还用不用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. wcf中netTcpBinding的元素构成

    <security> of <netTcpBinding> <transport> of <netTcpBinding> <message> ...

  2. hud1520Anniversary party(树形DP）

    链接 第一道树形DP 根据左儿子 右兄弟 将多叉树转化成二叉树 结构体里保存取这个节点和不取这个节点的最大值 #include <iostream> #include<cstdio& ...

  3. Datetime中yyyy-MM-dd-hh-mm-ss的格式

    namespace yyyy_MM_dd_hh_mm{    class Program    {        static void Main(string[] args)        { wh ...

  4. bzoj1984

    树链剖分在边上的应用比维护点稍微麻烦一点,是对每条边标号,并且要记录每个点父亲边的编号和重儿子然后注意各种细节线段树上和bzoj1858的维护方法类似,覆盖的优先级高于加具体见程序,完全是为了提升状态 ...

  5. 新一批电子商务解决方案和企业管理应用加入 VM Depot 中国站点

     新一批电子商务解决方案和企业管理应用加入 VM Depot 中国站点. //电子商务平台助力您建设网店// 大约有 6 个最近更新的电子商务程序包已经登陆 VM Depot. 这不仅囊括了全球知 ...

  6. android学习——activity的生命周期

    Android中主要组件之Activity的生命周期,基本都是翻译Android API和个人的理解. 首先看一下Android api中所提供的Activity生命周期图: Activity其实是继 ...

  7. 区别typedef和#define

    1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,只有在编译已被展开的源程序时才会发现可能的错误并报错.例如:#define PI 3.1415 ...

  8. HTML5与CSS3权威指南.pdf9

    第21章 Media Queries相关样式 该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media ...

  9. git diff old mode 100755 new mode 100644

    755 vs 644 在linux下载了Qt的软件仓库,拷贝了一份到windows下.在 msysgit 下,发现所有的文件都被修改了. 用 git diff 查看,发现是: $ git diff u ...

  10. SRM 358(1-250,500pt)

    DIV1 250pt 题意:电视目前停留在第100台,有一个遥控器,可以向上或向下换台(需要按键一次),也可以按一些数字,然后直接跳到该台(需要按键次数等于数字数,不需要按确定键).但是,这个遥控一些 ...