扫盲HTML BOM

HTML BOM(Javascript window)

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

Window 对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数

浏览器对象模型 (BOM)

浏览器对象模型(Browser Object Model (BOM))尚无正式标准。

由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。


内容一览表


文章目录一览表



一,Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一

调用这些方法和属性时,可以省略Window


Window 子对象

Window的子对象主要有如下几个:

1,JavaScript document 对象

2,JavaScript frames 对象

3,JavaScript history 对象

4,JavaScript location 对象

5,JavaScript navigator 对象

6,JavaScript screen 对象

window尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的窗口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

```

document.documentElement.clientHeight

document.documentElement.clientWidth

```

或者

document.body.clientHeight

document.body.clientWidth


window方法

window.open() - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸




二,window子对象

1,JavaScript document 对象

渲染引擎在解析HTML对象时,会生成一个document对象,

即文档对象,它是HTML文档的根节点。

每一个元素都会生成对应的DOM对象,由于元素之间有层级关系,整个HTML代码解析结束后,会生成一个由不同节点组成的树形结构,成为DOM树。

document用于描述DOM树的状态和属性,并提供了很多操作DOM的API。


2,JavaScript frames 对象

frame指HTML子框架,即在浏览器里嵌入另一个窗口。

父框架和子框架拥有独立的作用域和上下文。

    window.frames返回的是一个类数组的对象,

对象的内容是当前页面中的<iframe>元素。这些<iframe>元素可以通过索引号来获得


3,JavaScript history 对象

window.history 对象包含浏览器的历史,window可以省略。

这些历史记录以栈(FIFO)的形式保存。页面前进则入栈,页面返回则出栈。

它是一个只读对象,为了保护用户的隐私,JavaScript在获取这个对象时会受到限制。

History对象不允许未授权代码访问会话历史(session history)中的其他页面地址,

但可以导航到其他会话历史指向的页面。

未授权代码无法清除history,也不能禁止后退/前进功能。

最接近于操作history的方法是location.replace()方法,它可以将会话历史中的当前页面地址替换成指定地址。

history的方法

history.back()跳转到历史记录中的前一个链接

history.forward()跳转到历史记录中的后一个链接


4,JavaScript location 对象

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

这种方法既可以用于具有onclick事件的标签,也可以用于满足某些条件进行跳转,特点是方便且灵活。

window.location 对象在编写时可不使用 window 这个前缀。 一些例子:

一些实例:

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口 (80 或 443)

location.protocol 返回所使用的 web 协议(http:// 或 https://)

location.href 属性返回当前页面的 URL


5,JavaScript navigator 对象

window.navigator 对象包含有关访问者浏览器的信息。

警告!!!

来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:

navigator 数据可被浏览器使用者更改

一些浏览器对测试站点会识别错误

浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测

由于 navigator 可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象,您可以使用对象来检测浏览器。例如,由于只有 Opera 支持属性 "window.opera",您可以据此识别出 Opera。

例子:if (window.opera) {...some action...}

可参考 JavaScript Navigator 对象的参考手册


6,JavaScript screen 对象

window.screen 对象包含有关用户屏幕的信息。

这些信息可以用来了解客户端硬件的基本配置。

window.screen对象在编写时可以不使用 window 这个前缀。

一些属性:

screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度

(以像素计,减去界面特性,比如窗口任务栏。)




三,JavaScript 弹窗

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框

1,警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法

window.alert("sometext");

window.alert() 方法可以不带上window对象,直接使用alert()方法。

eg:alert("Hello\nHow are you?");

2,确认框

确认框通常用于验证是否接受用户操作。

当确认卡弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。

语法

window.confirm("sometext");

window.confirm() 方法可以不带上window对象,直接使用confirm()方法。

eg:var r=confirm("按下按钮!");

按下确定按钮,r值为true;反之,为false

3,提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

语法

window.prompt("sometext","defaultvalue");

window.prompt() 方法可以不带上window对象,直接使用prompt()方法。

eg:var person=prompt("请输入你的名字","Harry Potter");

输入后,person为输入值;未修改输入,则person取默认值



四,JavaScript 计时事件

通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法



1,setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

语法

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前缀,直接使用函数setInterval()。

setInterval() 第一个参数是函数(function)。

第二个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:   

myVar=setInterval("javascript function",milliseconds);

然后你可以使用clearInterval() 方法来停止执行。

window.clearInterval(myVar)


2,setTimeout() 方法

语法

window.setTimeout("javascript 函数",毫秒数);

如何停止执行?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法和使用方法与setInterval相同

!!!:两者的差别是setInterval会间隔指定时间循环执行代码,setTimeout会间隔指定时间后执行一次代码




五,JavaScript Cookies

Cookies 用于存储 web 页面的用户信息。

由于 JavaScript 是运行在客户端的脚本,所以可以使用JavaScript来设置运行在客户端的Cookies

什么是 Cookies?

Cookies 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。

Cookies 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时,他的名字可以记录在 cookie 中。

在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

Cookies 以名/值对形式存储,如下所示:   

username=John Doe

当浏览器从服务器上请求 web 页面时, 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

1,使用 JavaScript 创建Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

2,读取Cookie

var x = document.cookie;

3,修改 Cookie

在 JavaScript 中,修改 cookies 类似于创建 cookies,如下所示: 

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

4,删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:   

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意,当您删除时不必指定 cookie 的值。

5,设置cookie值的函数

function setCookie(cname,cvalue,exdays)        {       

var d = new Date();       

d.setTime(d.getTime()+(exdays*24*60*60*1000));       

var expires = "expires="+d.toGMTString();       

document.cookie = cname + "=" + cvalue + "; " + expires;       

}

6.获取 cookie 值的函数

然后,我们创建一个函数用户返回指定 cookie 的值:   

function getCookie(cname)        {       

var name = cname + "=";       

var ca = document.cookie.split(';');       

for(var i=0; i<ca.length; i++)        {       

  var c = ca[i].trim();       

  if (c.indexOf(name)==0) return c.substring(name.length,c.length);       

  }       

return "";       

}

参考文档:W3Cschool :https://www.w3cschool.cn/javascript/8bkjyf21.html

简书Nikkkki睡不醒https://www.jianshu.com/p/0c8b34111e95

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