作为window对象属性的元素 多窗口和窗体

作为window对象属性的文档元素

如果html文档中用id属性为元素命名。并且如果 window对象没有此名字的属性,则window对象会赋予一个属性,其名字为id属性的值,其值指向该元素
html

<div id="ming"></div>

控制台

window.ming;
<button id="ming"></button>

由于window对象是作用域链的最顶层,即id属性为脚本访问的全局变量。如上方的,可以通过变量ming来达到引用此元素的目的。其中button为一个按钮
但是如果window对象已经具有此名字的属性。不会发生上述情况,因为ID已经被占用。
如果在代码中声明并赋值给全局变量x,那么显示声明会隐藏隐式声明的元素变量。如果脚本中的变量声明出现在命名元素之前,那么变量的存在会阻止元素获取它的window属性。如果脚本中的变量声明出现在命名元素之后,那么变量的显式会覆盖属性的隐式值。即,显示的是显式的声明。
举一个查找元素id的例子

var ui = ["input", "prompt", "heading"];
ui.forEach((id) => {    // 进行一次循环
    ui[id] = document.getElementById(id);
    console.log(ui[id]);
});

html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="./index.js"></script>
</head>
<body>
    <div id="input">111</div>
    <button id="prompt">1111</button>
    <div id="heading">1111</div>
</body>
</html>

好吧,因为浏览器厂商可以随便给加属性,导致很容易出现显式和隐式的问题。所以呢,一般不用,并且输出的结果,全是null,没有该id。
为什么呢。因为script脚本在头部先进行加载,无法获得完整的dom树,导致dom树获取全为空值,因为在处理js脚本的时候,dom树渲染是阻塞的,除非允许异步渲染,加载完成以后进行渲染,或者是异步的随机渲染。

window.prompt

因为window对象存在该属性,导致会出现遍历的失败

Σ( ° △ °|||)︴

给一个id进行查找

var $ = (id) => { return document.getElementById(id); };
var ui = {};
ui.prompt = $('prompt');
console.log(ui);

多窗口和窗体

一个web浏览器有多个标签,每一个标签页都是一个独立的浏览上下文(即,每一个独立的标签都是一个线程,有些时候,浏览器会进行线程的合并)。每一个标签页都有一个独立的window对象。而且相互之间不干扰。每个标签页中运行的脚本通常并不知道其他便签页的存在。更不会和其他标签页的window对象进行交互操作或者操作其文档内容。
窗口和其他窗口并不是没有完全的关系。一个窗口或标签页中的脚本可以打开新的窗口或者标签页。当一个脚本这样做,多个窗口可以相互操作

iframe

已经处于半废弃的inframe标签。挺无奈的,已经快废了。
不过学习还是学习一下吧
iframe是用来嵌套多个文档的。由iframe所创建的嵌套浏览上下文是用自己的window对象表示的。每一个iframe都是一个独立的window对象。
对于客户端js来说,窗口,标签页,iframe和框架都是浏览上下文。对于js来说都是window对象。和独立的不同之处在于,js脚本能够看到其祖先和子孙

打开和关闭窗口

使用window的open可以打开一个新的标签页
window.open将会载入指定的url到新的或者已经存在的窗口中(取决于如何设置)。并返回代表那个窗口的window对象。
open()第一个参数会在新窗口中显示文档的url,如果参数省,或为空,将会使用空白页面进行显示

about:blank

脚本无法通过简单的猜测窗口的名字来操纵窗口的web应用。只有设置了允许导航的页面才可以。
即,当且仅当窗口包含的文档来自相同的源,或者这个脚本打开的哪个窗口。(或者递归打开的窗口),脚本才能通过名字指定存在的窗口,或者如果是一个窗口内嵌在另一个窗口里的窗体,那么在它们的脚本之间可以相互导航。使用

_top(顶级祖先窗口)

_parent(直接父级窗口)

来获取上下文。

窗口名字
窗口名字,运行open()方法引用已存在的窗口。并同时可以作为标签a和标签form的taget的值,表示加载到哪

open第三个参数表明如何打开这个标签的,以及大小(一般弹窗广告喜欢这样做)

// 打开允许改变大小的浏览器的窗口,包含地址栏,工具栏和地址栏
var w = window.open("http://www.baidu.com/", "smallwin", "windth=200, height=350, statue=yes");

在新的窗口中运行

window.name
"smallwin"

第四个参数只在第二个参数命名的时候有用,是在当前(原先)窗口是替换掉历史记录,还是新建一个历史记录,默认是后者,因为要指定名称,才会在历史记录中储存

窗口的返回值

var w = window.open();
w.alert('about to visit https://www.google.com.hk/')    // 在新的窗口调用alert()方法
w.location = "https://www.google.com"   // 设置窗口的location,完成页面的跳转

w保存的是跳转网页的window对象的值

关闭窗口

如果已经使用open()打开窗口,同样可以用close()关闭其窗口

w.close();
undefined

这样可以将w开的窗口将其关闭
如果要关闭本窗口可以调用

close()

这样就完成了页面的关闭
即使一个窗口已经关闭了,那么其window对象仍旧保存在其父窗口,直到父窗口关闭,window对象彻底的消失。其closed的值为true,并且document的值为null,其方法也不能使用

窗体之间的关系

window对象的方法open()可以打开并创建一个新的window对象(即创建一个新的窗口)并且该窗口是具有opener属性,根据该属性,可以打开其原始窗口。
即,通过这样两个窗口可以实现相互引用。或者调用对方的方法。
如果一个窗口是顶级窗口,标签

parent == self
true

self 属性返回窗体本身,表明parent指向其窗体
如果一个窗体是在另外一个窗体之中,则parent.parent将会是顶级窗口。不管其嵌套了多少层,包括使用top属性指向的都是最顶层窗口。
如果window本身就是顶层窗口,则top就是其窗口本身。其top就是parent

交互窗口中的js

每个窗口窗体都是js的执行上下文。以window对象作为全局对象,这样的话,一个窗口窗体中的代码可以应用到其他窗口或者窗体(并且同源策略没有进行阻止)。那么他们之间可以完成交互。
好啦,不在过多解释,毕竟这个已经没有什么用的了

window作用域链

window对象是客户端js的全局变量,但是从技术上不是,web浏览器每次向窗口或者窗体载入新的内容的时候,都是开始一个新的js执行上下文,包含一个新创建的全局对象。事实上,全局对象会在窗口或窗体载入新内容时被替换,即window对象实际不是全局对象,是一个代理,即windowProxy

ps 需要注意一点的是在多个标签或者窗体的时候,每个窗体仅仅为一个线程,线程之间使用的是一个浏览器定义好的api 即 Window.localStorage 或者是 Cookie 加 轮询达到多个标签之间的通信的目的。

博客

www.iming.info

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 198,932评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,554评论 2 375
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 145,894评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,442评论 1 268
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,347评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,899评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,325评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,980评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,196评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,163评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,085评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,826评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,389评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,501评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,753评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,171评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,616评论 2 339

推荐阅读更多精彩内容