作为窗口对象属性的文档元素

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

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

控制台

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

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

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

window.prompt

因为窗口对象存在该属性，导致会出现遍历的失败

Σ（°△°|||）︴

给一个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

作为window对象属性的元素多窗口和窗体相关推荐

window对象属性
window对象属性 window对象中存储的属性和方法比较多,我们只对常用的做说明,不常用的看看就好. 首先是window中的这几个属性,这几个属性存储的值都是对象{}.每个对象对应一种操作,可以理 ...
JavaScript中window对象属性，时间等的总结
Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY.FRAMESET或 FRAME元素时,都会自动建立window对象的实例. ...
window对象提供的功能之窗口最大化
实现窗口最大化的基本思路是:首先打开一个"中转"页面,在该页面中用window.open方法打开一个最大化的窗口,并且在该窗口中将父窗口关闭.实例如下: ex3.html: 代码 ...
javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
Window对象的属性
Window对象的window和self属性都指代当前窗口对象本身.可以使用这两个属性来显示引用当前窗口. 一.Location 对象 Location对象包含有关文档当前位置的信息. Locatio ...
js的window对象与属性的使用
1.BOM的概述 browser object modal :浏览器对象模型. 浏览器对象:window对象. Window 对象会在 <body> 或 <f ...
TypeScript 中为window对象添加属性
众所周知,typescript是一款JavaScript的超集,其作用就是在于让我们开发者在艰辛的开发路途中,避免掉一些不必要的麻烦,这"一些不必要的麻烦"主要体现在于 TypeS ...
JavaScript权威指南--window对象
知识要点 window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一部分 ...
【JavaScript 教程】浏览器—window 对象
作者 | 阮一峰 1.概述浏览器里面,window对象(注意,w为小写)指当前的浏览器窗口.它也是当前页面的顶层对象,即最高一层的对象,所有其他对象都是它的下属.一个变量如果未声明,那么默认就是顶层 ...

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

作为窗口对象属性的文档元素

多窗口和窗体

iframe

打开和关闭窗口

窗口的返回值

关闭窗口

窗体之间的关系

交互窗口中的js

window作用域链

博客

作为window对象属性的元素多窗口和窗体相关推荐

最新文章

热门文章

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

作为窗口对象属性的文档元素

多窗口和窗体

iframe

打开和关闭窗口

窗口的返回值

关闭窗口

窗体之间的关系

交互窗口中的js

window作用域链

博客

作为window对象属性的元素 多窗口和窗体相关推荐

最新文章

热门文章

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

作为window对象属性的元素多窗口和窗体相关推荐