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