Web浏览器中的JavaScript && window对象

window对象是所有客户端JavaScript特性和API的主要接入点。

常用方法

alert

弹出一个对话框用来显示一些信息

setTimeout

注册一个函数,在给定的一段时间之后触发一个回调
<code>
//等待两秒,然后说hello
setTimeout(function() {alert("hello world");},2000);
</code>

window对象中一个最重要的属性是document,他引用Document对象,后者表示显示在窗口中的文档。
window、Document和Element对象上另一个重要的属性集合是事件处理程序相关的属性。

Web文档里的JavaScript

JavaScript程序可以通过Document对象和它包含的Element对象遍历和管理文档内容。

在HTML里嵌入JavaScript

在HTML文档里嵌入JavaScript代码有四种方法:
  • 内联,放置在<script>和</script>标签对之间
  • 放置在游<script>标签的src属性指定的外部文件中
  • 放置在HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定
  • 放在一个URL里,这个URL使用特殊的“JavaScript:”协议
<Script>元素

JavaScript代码可以以内联的形式出现在HTML文件里的<script>和</script>标签之间。
<code>
<script>
//这里是你的javascript代码
</script>
</code>

外部文件中的脚本

<script>标签支持src属性,这个属性指定包含JavaScript代码文件的URL。
用法:
<code>
<script src = "../../scripts/util.js></script>
</code>
使用src属性方式的优点:

  • 可以把大块JavaScript代码从HTML文件中删除,这有助于保持内容和行为的分离,从而简化HTML文件
  • 如果多个Web页面共用相同的JavaScript代码,用src属性可以让你只管理一份代码,而不用在代码改变时编辑每个HTML文件。
  • 如果一个JavaScript代码文件由多个页面共享,就只需要下载它一次,通过使用它的第一个页面——随后的页面就可以从浏览器缓存检索它
  • 由于src属性的值可以是任意的URL,因此来自一个Web服务器的JavaScript程序或Web页面可以使用由另一个Web服务器输出的代码。
  • 从其它网站载入脚本的能力,可以让我们更好的利用缓存。
脚本类型

JavaScript是Web的原始脚本语言。在默认情况下,假定<script>元素包含或引用JavaScript代码。

HTML中的事件处理程序

类似onclick的事件处理程序属性,用相同的名字对应到HTML属性,并且汉可以通过将JavaScript代码放置在HTML属性里来定义事件处理程序。

URL中的JavaScrit

在URL后面跟一个JavaScript:协议限定符,是另一种嵌入JavaScript代码到客户端的方式。

书签

“书签”就是一个保存下来的URL。

JavaScript程序的执行

JavaScript程序的执行有两个阶段:

  • 载入文档内容,并执行<script>元素里的代码
  • 事件驱动阶段,响应异步发生的事件
同步、异步和延迟的脚本

当脚本把文本传递给document.write()时,这个文本被添加到文档输入流中,HTML解析器会在当前位置创建一个文本节点,将文本插入这个文本节点后面。

脚本的执行只在默认情况下是同步和阻塞的。

<script>标签可以由defer和async属性。

  • defer属性使得浏览器延迟脚本的执行,直到文档的载入和解析完成。
  • anync属性使得浏览器可以尽快的执行脚本,而不用在下载脚本时阻塞文档解析。
如果<script>标签同时有两个属性,同时支持两者的浏览器会遵从async属性并忽略defer属性。
事件驱动的JavaScript

如果想要程序响应一个事件,写一个函数,叫做“事件处理程序”、“事件监听器”或“回调”。然后注册这个函数,这样也就会在事件发生时调用它。
addEvenListaner()方法允许注册多个监听器。

功能测试

功能测试是解决不兼容性问题的一种强大技术。
例如:
<code>
if(element.addEventListener){
element.addEventListener("Keydown",handler,false);
element.addEventListener("Keypress",handler,false);
}
else if(element.attachEvent){
element.attachEvent("onKoydown",handler);
element.attachEvent("onKeypress",handler);
}
else{
element.onkeydown = element.onKeypress = handler;
}
</code>

浏览器测试

在客户端JavaScript中检测浏览器类型和版本的方法就是使用Navigator对象。

条件注释

例如:excanvs.js类库在IE里实现<canvas>元素
<code></code>

同源策略

同源策略是对JavaScript代码能够操作哪些Web内容的一条完整的安全限制。
负责管理窗口或窗体中的JavaScript代码以及和其他窗口或帧的交互。

脚本只能读取和所属文档来源相同的窗口和文档的 属性。
不严格的同源策略

为了支持多域名站点,可以使用Document对象的domain属性。

在默认情况下,属性domain存放的是载入文档的服务器的主机名。可以设置这一属性,不过使用的字符串必须具有有效的域前缀或它本身。

如果两个窗口包含的脚本把domain设置成了相同的值,那么这两个窗口就不在受同源策略的约束,他们可以相互读取对方的属性。

Window对象

客户端JavaScript程序的全局对象

setTimeout()和setInterval()

可以用来注册在指定的时间之后单次或重复调用的函数。

  • window对象的setTimeout()方法用来实现一个函数在指定的毫秒数之后运行。setTimeout()返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行。
  • setInterval()和setTimeout()一样,只不过这个函数会在指定的毫秒数的间隔里重复调用。也是返回一个值,传递给clearInterval()用于取消后续函数的调用。
    <code>
    setInterval(updateClock,60000); //每60秒调用一次updateClock();
    </code>

浏览器的定位和导航

window对象的location属性引用的是Location对象,他表示该窗口中当前显示的文档的URL,并定义了方法来使窗口载入新的文档。
Document对象的location属性也引用到Location对象:
<code>window.location === document.location //总是返回true</code>

  • 解析URL
    window对象的location属性引用的是Location对象,表示窗口中当前显示的文档的URL。
    location对象的属性href是一个字符串,后者包含URL的完整文本。
    location对象的toString()方法返回href属性的值。
    Location对象的其他属性——protocol,host,hostname,port,pathname和search,分别表示URL的各个部分。
  • 载入新的文档
    Location对象的assign()方法可以使窗口载入并显示你指定的URL中的文档。
    replace()方法也类似,但是他会在载入新文档之前会从浏览历史中把当前文档删除。
    reload()方法可以让浏览器重新载入当前文档。
    是浏览器跳转到新的页面的另一种方法是直接把新的URL赋给location属性:
    <code>location = "http://www.oreilly.com"</code>
    还可以把相对URL赋给location,它们会相对当前URL进行解析:
    <code>location = "page2.html"</code>
    纯粹的片段标识符是URL的一种类型,会让页面滚动到文档的某个位置。
    <code>location = "#top"</code>

浏览历史

window对象的history属性引用的是该窗口的History对象,History对象是用来把窗口的浏览历史文档和文档状态列表的形式表示。

方法:
  • back()
    使浏览器在浏览历史中后退一格。
  • foward()
    使浏览器在卢兰历史中前进一格。
  • go()
    接受一个参数,可以在历史列表向前向后跳过任意多个页。

浏览器和屏幕信息

  • Navigator对象
    window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象。
    Navigator对象有4个属性:appName、appVersion、userAgent、platForm。
  • Screen对象
    提供有关窗口显示的大小和可用的颜色数量的信息。
    width和height指定的是以像素为单位的窗口大小
    availWidth和availHeight指定的是实际可用的显示大小
    colorDepth指定的是显示的BPP的值

对话框

  • alert()向用户显示一条消息并等待用户关闭对话框
  • confirm()也显示一条消息,要求用户单击“确定”或“取消”按钮,并返回一个布尔值
  • prompt()同样也显示一条消息,等待用户输入字符串,并返回那个字符串。

错误处理

Window对象的onerror属性是一个事件处理程序,当未捕获的异常传播到调用栈上时就会调用它,并把错误的信息输出到浏览器的JavaScript控制台上。如果给这个属性赋一个函数,那么只要这个窗口放生了JavaScript错误,就会调用该函数。

window.onerror的第一个参数是描述错误的一条消息,第二个参数是一个字符串,它存放引发错误的JavaScript代码所在的文档的URL,第三个参数是文档中发生错误的行数。

多窗口和窗体

HTML文档经常使用<iframe>来嵌套多个文档,由<iframe>所创建的嵌套浏览上下文使用它自己的window对象所表示的。

  • 打开窗口
    使用window对象的open()方法尅打开一个新的浏览器窗口。window.open()载入指定的URL到新的或已存在的窗口中,并返回代表那个窗口的window对象。
    open()的返回值是代表命名或新创建的窗口的window对象。
  • 关闭窗口
    方法close()关闭一个窗口
    要显式的使用标识符window,这样可以避免混淆Window对象的close()方法和Document对象的close()方法。

窗体之间的关系

任何窗口或窗体中的JavaScript代码都可以将自己的窗口和窗体引用为window和self。

  • 窗体可以用parent属性引用彪悍他的窗口或窗体的window对象
    <code>parent.history.back();</code>
  • 如果一个窗口是顶级窗口或标签,而不是窗体,那么其parent属性引用的就是这个窗口本身:
    <code>parent == self;</code>
  • 如果一个窗体包含在另一个窗体中,而后者又包含在顶级窗口中,那么该窗体就可以使用parent.parent来引用顶级窗口。
  • top属性引用的都是指向包含它的顶级窗口。

窗体是通过<iframe>元素创建的。可以用获取其他元素的方法来获取一个表示<iframe>的元素对象。

  • 假定文档里有<ifrme id = "f1">,那么表示该ifame的元素对象就是:
    <code>var iframeElement = document.getElementById("f1");</code>

<iframe>元素有contentWindow属性,引用该窗体的Window对象,所以此窗体的Window对象就是:
<code>var childFrame = document.getElementById("f1").contentWindow</code>

可以进行反向操作,从表示窗体的Window对象来获取窗体的<iframe>元素——用window对象的frameElement属性。
<code>var elt = document.getElementById("f1");
var win = elt.contentWindow;
win.frameElement === elt;
window.frameElement === null;</code>

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

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,749评论 0 8
  • 摘要:Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中,Window 对象是全局...
    晓小东_1920阅读 278评论 0 2
  • window对象是客户端JavaScript程序的全局对象,包含多数的属性和方法。 计时器 Window对象包含2...
    kissLife阅读 1,358评论 0 0
  • 在利用JavaScript进行前端开发时,不可避免地要与浏览器窗口进行交互。浏览器的一些对象,例如可以移动,调整浏...
    DarkSpy13阅读 1,725评论 0 12
  • 窗外,月光如水、如霜 夜,有点清冷、凄凉 噔……噔……噔…… ——这是母亲起夜,拐杖点地的声响 一下……两下……三...
    吴生善阅读 251评论 0 4