转行学前端的第 58 天 : 了解 BOM window 弹窗管理

我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。

今日学习目标

之前主要基于搜索来了解 Javascript 异步管理, 当天其实学的不太明白,之后刚好掘金也停止服务了一天,所以昨天还是去基于一些资料加深我对异步管理的理解.

然后今天主要是基于搜索来学习 window 弹窗管理相关，又是适合学习的一天，加油，小又又！！！！

今日学习概要

弹窗属性学习
- window.closed && window.opener
- window.self，window.window
- window.top，window.parent
弹窗方法学习
- window.open()
- window.close()
- window.stop()
- window.alert()
- window.confirm()
- window.prompt()

属性学习

window.opener

基础语法

var objRef = window.opener;

详细说明

返回打开当前窗口的那个窗口的引用，例如：在window A中打开了window B，B.opener 返回 A.

如果当前窗口是由另一个窗口打开的, window.opener保留了那个窗口的引用. 如果当前窗口不是由其他窗口打开的, 则该属性返回 null.

案例

window.open('test');

window.opener
/*
global {window: global, self: global, location: Location, closed: false, frames: global, …}
blur: ƒ ()
close: ƒ ()
closed: false
focus: ƒ ()
frames: global {window: global, self: global, location: Location, closed: false, frames: global, …}
length: 0
location: Location {}
opener: null
parent: global {window: global, self: global, location: Location, closed: false, frames: global, …}
postMessage: ƒ ()
self: global {window: global, self: global, location: Location, closed: false, frames: global, …}
top: global {window: global, self: global, location: Location, closed: false, frames: global, …}
window: global {window: global, self: global, location: Location, closed: false, frames: global, …}
__proto__: Window
*/

确实在打开窗体之后,window.opener是有值的~~~~·

window.closed

基础语法

isClosed = windowRef.closed;

详细说明

此只读属性表示所引用的窗口是否关闭。

可能的值：

true: 窗口已被关闭。
false: 窗口是打开的。

案例

下面的示例演示怎样更改一个已打开的弹出窗口的URL。尝试更改URL之前，它使用window.opener属性来检查有窗口被打开，并且该窗口没有关闭：

// Check that an opener exists and is not closed
if (window.opener && !window.opener.closed) {
  window.opener.location.href = "http://www.mozilla.org";
}

请注意，弹出窗口只能访问打开他们的窗口。

好像没看到效果~~~~~

window.self

基础语法

objRef = window.self

详细说明

返回一个指向当前 window 对象的引用。

这个和我之前学习 js对象的时候引用应该是一个意思

window.self 几乎总是用来判断当前 window 是不是父 frameset 中的第一个 frame。

案例

window.self

window.parent.frames[0] != window.self

window.window

详细说明

window对象的 window 属性指向这个window对象本身。因此以下表达式所返回的window对象都是同一个。

window.window
window.window.window
window.window.window.window
  ...

好处说明

将 window 属性指向该window对象本身的目的，是为了更容易引用全局对象。不然，就得在最开始写代码的时候进行手动赋值：var window = this; 。
另外一个原因是如果没有这个属性，就不能像这样方便的写： window.open('http://google.com/')，而只能这样： open('http://google.com/')
使用该属性还有一个原因，有些库，特别是JavaScript模块希望能够提供OOP版本和非OOP版本。

例如，如果引用了 this.window.location.href ，JavaScript 模块就可以在它定义的类里面定义一个 window 属性（因为默认没有全局性的 window 变量存在），这个属性可以在将window对象传进这个模块的类的构造器之后被创建。

这样，这个类的方法中的 this.window 就指向了window对象。在没有命名空间的版本中，this.window 会重新指向window对象，从而很容易获取到文档的位置。

还有一个优点，这个类（即使这个类定义在模块外面）的对象可以随意地改变对window的引用，而如果有一个写死了的window的引用就做不到这样。类内部的默认值仍然可以设置成当前的window对象。

案例

脚本中的全局变量实际上是window对象的属性：

var global = {data: 0};
alert(global === window.global); // displays "true"

不用写 window. 前缀就可以访问window对象的内置属性：

setTimeout("alert('Hi!')", 50); // equivalent to using window.setTimeout.
alert(window === window.window); // displays "true"

window.top

基础语法

var topWindow = window.top;

详细说明

返回窗口层级最顶层窗口的引用。

window.parent 返回当前窗口的直接父对象，而 window.top 返回最顶层的窗口对象。

当你在处理父窗口的子框架（subframe），而你想获取顶层框架时，这个属性相当有用。

案例

window.parent === window.top

window.parent

基础语法

var parentWindow = window.parent;

详细说明

返回当前窗口的父窗口对象.

如果一个窗口没有父窗口,则它的 parent 属性为自身的引用.

如果当前窗口是一个 <iframe>, <object>, 或者 <frame>,则它的父窗口是嵌入它的那个窗口.

案例

window.parent === window.top

方法学习

window.open()

基础语法

let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);

参数说明

strUrl

新窗口需要载入的url地址。strUrl可以是web上的html页面也可以是图片文件或者其他任何浏览器支持的文件格式。

如果strUrl 是一个空值，那么打开的窗口将会是带有默认工具栏的空白窗口（加载about:blank）。

strWindowName

新窗口的名称。该字符串可以用来作为超链接 <a> 或表单 <form> 元素的目标属性值。字符串中不能含有空白字符。注意：strWindowName 并不是新窗口的标题。

如果没有指定名称，则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。

strWindowFeatures

可选参数。是一个字符串值，这个值列出了将要打开的窗口的一些特性(窗口功能和工具栏) 。字符串中不能包含任何空白字符，特性之间用逗号分隔开。参考下文的位置和尺寸特征。

看了一下这个属性,好多啊~~~,感觉今天基础了解一下吧~~~

返回值

WindowObjectReference

打开的新窗口对象的引用。如果调用失败，返回值会是 null 。如果父子窗口满足“同源策略”，你可以通过这个引用访问新窗口的属性或方法。

详细说明

Window 接口的 open() 方法，是用指定的名称将指定的资源加载到浏览器上下文（窗口 window ，内嵌框架 iframe 或者标签 tab ）。

open() 方法，创建一个新的浏览器窗口对象，如同使用文件菜单中的新窗口命令一样。strUrl 参数指定了该窗口将会打开的地址。

注意：调用window.open()方法以后，远程 URL 不会被立即载入，载入过程是异步的。（实际加载这个URL的时间推迟到当前脚本块执行结束之后。窗口的创建和相关资源的加载异步地进行。）

案例

const strWindowFeatures = `
    menubar=yes,
    location=yes,
    resizable=yes,
    scrollbars=yes,
    status=yes
`;

function openRequestedPopup() { 
    return window.open(
        "http://www.cnn.com/", 
        "CNN_WindowName", 
        strWindowFeatures
    );
}
openRequestedPopup()

案例中的网站好像一直没加载~~~~~

window.close()

基础语法

window.close();

详细说明

Window.close() 方法关闭当前窗口或某个指定的窗口。

该方法只能由 Window.open() 方法打开的窗口的 window 对象来调用。如果一个窗口不是由脚本打开的，那么，在调用该方法时，JavaScript 控制台会出现类似下面的错误：不能使用脚本关闭一个不是由脚本打开的窗口。或 Scripts may not close windows that were not opened by script.。

同时也要注意，对于由 HTMLIFrameElement.contentWindow 返回的 Window 对象，close() 也没有效果。

案例

这个例子展示了如何使用这个方法关闭使用 window.open() 打开的窗口

// 用于存储将要打开的窗口（的引用）的全局变量
var openedWindow;

function openWindow() {
  openedWindow = window.open('moreinfo.htm');
}

function closeOpenedWindow() {
  openedWindow.close();
}

执行了 open 的效果

执行了 close 的效果

刚刚开的窗体被关闭啦~~~~~

window.stop()

基础语法

window.stop()

详细说明

window.stop() 方法的效果相当于点击了浏览器的停止按钮。由于脚本的加载顺序，该方法不能阻止已经包含在加载中的文档，但是它能够阻止图片、新窗口、和一些会延迟加载的对象的加载。

案例

// 用于存储将要打开的窗口（的引用）的全局变量
var openedWindow;

function openWindow() {
  openedWindow = window.open('moreinfo.htm');
}

function stopOpenedWindow() {
  openedWindow.stop();
}
openWindow();
stopOpenedWindow();

原本加载效果

停止加载效果

window.alert()

基础语法

window.alert(message);

参数说明

message

是要显示在对话框中的文本字符串,如果传入其他类型的值,会转换成字符串.

详细说明

显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。

警告对话框使用在无需用户确认的情况下,否则应该使用其他类型的对话框,比如confirm, prompt.

这里显示的对话框是一个模态窗口,它能阻止用户对浏览器窗口界面的其他部位进行操作,你不应该过多的使用这种模态窗口.

扩展开发者有时候需要使用nsIPromptService接口来代替该alert方法.

案例

window.alert("你好,我是小又又!");

这个弹窗是我写的,很棒~~~~

window.confirm()

基础语法

result = window.confirm(message);

参数说明

message 是要在对话框中显示的可选字符串。

返回值

result 是一个布尔值，表示是选择确定还是取消 (true表示OK)。

详细说明

Window.confirm() 方法显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框。

对话框是弹出式(modal)的(也即alert样式, 译者注). 直到这个对话框被点击后, 后面的脚本才会运行. 请勿滥用此功能, 这里列出了很多个理由: 请放弃使用对话框来确认信息.

案例

if (window.confirm("Do you really want to leave?")) { 
  window.open("exit.html", "Thanks for Visiting!");
}

点击取消就没有什么效果了,点击了确认,就新开了一个页面

window.prompt()

基础语法

result = window.prompt(text, value);

参数说明

text 用来提示用户输入文字的字符串，如果没有任何提示内容，该参数可以省略不写。
value

文本输入框中的默认值，该参数也可以省略不写。不过在 Internet Explorer 7 和 8 中，省略该参数会导致输入框中显示默认值"undefined"。

返回值

result

用来存储用户输入文字的字符串，或者是 null。

详细说明

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。

案例

var sign = prompt("你是谁?");
if (sign == "小又又"){
   alert("哇! 小又又很高兴认识你~~~~~");
}

哈哈哈~~~~

今日学习总结

今日心情

今日主要是基于搜索来基础学习 window 弹窗管理相关属性和方法,印象比较深的就是alert 和confirm 感觉比较酷, 希望明天学到更多的内容~~~~

最近在看掘金文章的时候,一直有看到一个活动的宣传,然后看到了好像有一期女性大佬专场的活动,虽然我现在还不算程序媛,但是想着了解没错的观念,已经报名了~~~~,期待大会真的能让我抄的走~~~~,不知道看我文章的,有没有也报名了这场活动的~~~~~

本文使用 mdnice 排版