今天我都在怀疑,很多项目还用不用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. Https 原理

    HTTPS其实是有两部分组成:HTTP + SSL / TLS, 也就是在HTTP上又加了一层处理加密信息的模块.服务端和客户端的信息传输都会通过TLS进行加密,所以传输的数据都是加密后的数据 1. ...

  2. Unreachable catch block for IOException. This exception is never thrown from the try statement body

    Unreachable catch block for IOException. This exception is never thrown from the try statement body ...

  3. 【转】iOS开发:开发证书知识点总结

    原文网址:http://www.jianshu.com/p/9c166a5e4930 1. Error: An App ID with identifier "*" is not ...

  4. Asp.Net 前后台交互小结

    转自:http://blog.csdn.net/wlccomeon/article/details/17270427 一.前台调用后台           前台调用后台的方法一共可分为两大类:使用Ht ...

  5. Visual Studio 2015 企业版 官方中文版.iso

    Visual Studio 2015 企业版 官方中文版.iso 附上链接 不要积分 谢谢: http://download.csdn.net/detail/onebelowzero2012/9561 ...

  6. [NOIP2005]采药

    2005年NOIP全国联赛普及组 [题目描述 Description] 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个 ...

  7. Write an algorithm such that if an element in an MxN matrix is 0, its entire row and column is set to 0.

      1: /// <summary> 2: /// Write an algorithm such that if an element in an MxN matrix is 0, it ...

  8. parseSdkContent failed Could not initialize class android.graphics.Typeface

    Deleting ".android" is temporarily fixing the problem with me as after sometime it begins ...

  9. css写法效率问题

    这篇文章写的很好了,其实大多数很牛的博客,都是对国外文献的翻译,国内文章的好坏,关键取决于翻译者理解和翻译水平. https://developer.mozilla.org/en-US/docs/We ...

  10. textarea在光标位置插入文字

    最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...