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

原创

mySoul

发布于 2018-08-04 18:16:41

2.2K0

文章被收录于专栏：mySoulmySoul

作为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对象的值