《JavaScript 权威指南》读书笔记 13 - Window 对象

本章介绍 Window 对象的属性和方法

计时器

setTimeout() 和 setInterval() 可以用来注册指定时间之后调用的函数,不同的是 setInterval 会在指定毫秒数的间隔里重复调用。它们都返回一个值,这个值可以传递给 clearInterval/clearTimeout,用于取消后续函数的调用

由于历史原因(通常不建议这么做),setTimeout 和 setInterval 的第一个参数可以作为字符串传入。如果是字符串,当到达指定时间时相当于执行 eval 字符串内容

// 4 秒后显示 log
var t1 = setTimeout(function () {
    console.log('show after 4s');
}, 4000);

function fn() { console.log('show every 1s'); }
setTimeout('fn()', 1000);

浏览器定位和导航

Window 对象的 location 属性引用的是 Location 对象,它表示窗口中当前显示的文档 URL。并且定义了方法来使窗口载入新的文档

Document 对象上的 location 属性也引用到 Location 对象:

window.location = document.location

Document 对象也有一个 URL 属性,是文档首次载入后保存的该文档的 URL 静态字符串。如果定位到文档中的片段标识符(如#table-of-content,其实就是锚点),Location 对象会做相应的更新,而 document.URL 属性不会

解析 URL

Location 对象的 href 属性是一个字符串,后者包含 URL 的完整文本。Location 对象的 toString() 方法返回 href 属性的值,因此会隐式调用 toString() 的情况下,可以使用 location 代替 location.href

这个对象的其它属性——protocol, host, hostname, port, pathname 和 search 分别表示 URL 的各个部分。它们称为「URL 分解」属性,同时被 link 对象(通过 HTML 文档中的 a 和 area 元素创建)支持

url

载入新的文档

Location 对象的 assign() 方法可以使用窗口载入并显示你指定的 URL 中的文档。replace() 方法也类似,但它在 载入新文档之前会从浏览器历史中把当前文档删除,assign 会产生一个新的历史记录,也就是说可以使用浏览器的返回按钮到上一页,replace 则不行

浏览历史

Window 对象的 history 属性用来把窗口的浏览历史用文档和文档状态列表的形式表示。history 对象的 length 属性表示浏览历史列表中的元素数量,但是脚本并不能访问已保存的 URL

history 对象的 bace() 和 forward() 方法与浏览器的「后退」和「前端」按钮一样。go() 方法接收一个整数参数,可以在历史列表中向前(正数)或向后(负数)跳过任意多个页

history.go(-2);     // 后退两个历史记录

如果窗口包含多个子窗口(比如 iframe 元素),子窗口的浏览历史也会被记录,这音中着在主窗口调用 history.back() 可能会使子窗口跳转而主窗口不变

浏览器和屏幕信息

Window 对象的 navigator 属性引用的是包含浏览器厂商和版本信息的 navigator 对象。navigator 有四个属性用于提供关于运行中的浏览器版本信息,并且可以用来做浏览器嗅探

appName

Web 浏览器的全称。在 IE 中,就是「Microsoft Internet Explorer」,在 Firefox 中就是「Netscape」

appVersion

此属性通常以数字开始,并跟着包含浏览器厂商和版本信息的详细字符串。字符串前面的数字通常是 4.5 或 5.0,表示它是第 4 或 5 代兼容的浏览器

userAgent

浏览器在它的 USER-AGENT HTTP 头部中发送的字符串。这个属性通常包含 appVersion 中的所有信息,以及其它细节

platform

在其上运行浏览器的操作系统字符串

screen 对象

screen 对象提供有关窗口显示的大小和可用的颜色数量信息,属性 width 和 height 指定的是以像素为单位的窗口大小。属性 avilWidth 和 avilHeight 指定的是实际可用的显示大小,它们排除了像浏览器任务栏这样的特性所占用的屏幕空间

对话框

Window 对象提供了 3 个方法来向用户显示简单的对话框。

alert() 向用户显示一条消息并等待用户关闭 confirm() 也显示一条消息并要求用户单击「确定」或「取消」,并返回一个布尔值 prompt() 也显示一条消息并等待用户输入字符串,并返回那个字符串

do {
    var name = prompt('What is your name?');
    var correct = confirm('You entered: ' + name + '\n\
                            Click OK to processed or Cancel to re-enter')
} while(!correct)

这三个方法都会产生阻塞,也就是说,在用户关掉它们所显示的对话框之前,它们不会返回,这就意味着在弹出一个对话框前,代码就会停止运行。如果当前正在载入文档,也会停止载入。直到用户用要求的输入进行响应为止

错误处理

Window 对象的 onerror 属性是一个事件处理程序,当未捕获的异常传播到调用栈上的时候就会触发它,并把错误消息输出到浏览器的 JavaScript 控制台上,onerror 事件处理函数调用通过三个字符串参数,而不是事件对象。分别是错误信息产生错误的页面地址错误源代码的行号,onerror 的返回值也很重要,如果 onerror 处理程序返回 false,表示它通知浏览器事件处理程序已经处理错误了,不需要其它操作。Firefox 则刚好相反

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

如果 HTML 文档中用 id 属性来为元素命名,并且如果 Window 对象没有此名字的属性(并且这个id是个合法的标识符),Window 对象会赋予一个属性,它的名字就是 id 属性的值,而它的值指向表示文档元素的 HTMLElement 对象

元素 ID 作为全局变量的隐式应用是 Web 浏览器进化过程中遗留的问题,主要是出于兼容性的考虑。但并不推荐使用这种做法

多窗口和窗体

Web 浏览器的窗口中每一个标签页都是独立的「浏览上下文」(browsing context),每一个上下文都有独立的 Window 对象,而且相互之间不干扰,也不知道其他标签页的存在

但是窗口并不总是和其它窗口完全没关系,因为可以通过脚本打开新的窗口或标签页。如果这么做就可以通过脚本跨窗口进行操作(参照之前的 同源策略

打开和关闭窗口

使用 Window 对象的 open() 方法可以打开一个新的浏览器窗口

var windowObjectReference = window.open(url, name, [features]);

第一个参数 url 是要在新窗口中显示文档的 URL,如果参数省略,默认会使用空页面的 URL about:blank

第二个参数 name 表示打开窗口的名字,如果指定的是一个已经存在的窗口名字(并且脚本允许跳转到那个窗口),会直接用已存在的窗口。否则,会打开新的窗口,并将这个指定的名字赋值给它。如果省略此参数,会使用指定的名字「_blank」打开一个新的未命名窗口

第三个参数 features(非标准)是一个以逗号分隔的列表,包含表示打开窗口的大小和各种属性

open() 也可以有第四个参数,且只在第二个参数命名的是一个存在的窗口时才有用。它是一个布尔值,
此文章转载自互联网-《《JavaScript 权威指南》读书笔记 13 - Window 对象》

免责声明:

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。

本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。

如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

发表评论:

抱歉,检测到您未登录,需要评论,请先