1.javascript 对象之 bom 对象
BOM(Browser Object Mode)浏览器对象模型,是 Javascript 的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为 BOM
2.bom 对象图示
3.通过上图,可以看出 window 是 bom 对象的核心,在它的分支下面,划分为 document,frames,history,location,navigation,screen
- 3-1、window 是 bom 的核心对象。顾名思义,窗口对象。它表示整个浏览器窗口,主要用来操作浏览器窗口。同时, window 对象还是 ECMAScript 中的 Global 对象,因而所有全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下。
弹出框方法,可以省略 window
alert("提示信息");
confirm("确认信息");
prompt("弹出输入框");
open("url地址", "_black或_self", "新窗口的大小");
close(); // 关闭当前的网页
定时器和清除定时器
setTimeout(回调函数函数,间隔时间) 延时器,只会执行一次;
clearTimeout(定时器名称) 清除延迟器,用于停止执行setTimeout()方法;
setInterval(回调函数,间隔时间) 设置定时器,可以无限执行;
clearInterval() 方法用于停止或者清楚定时器
- 3-2、document 对象
它是 window 对象的一个属性,可以用来处理页面文档
对象属性:
document.title //设置文档标题等价于HTML的<title>标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期,只读属性
document.fileModifiedDate //文件修改日期,只读属性
document.fileSize //文件大小,只读属性
document.cookie //设置和读出cookie
document.charset //设置字符集 简体中文:gb2312
----------------------------
常用对象方法:
document.write() //动态向页面写入内容
document.createElement(Tag) //创建一个html标签对象
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
document.body.appendChild(oTag)
- 3-3、location 对象
对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。 一些例子:
location.reload();页面重新加载,在本页面使用
locatiion.replace('url');页面也是可以重新加载,在本页面使用
location.herf = 'url 地址'
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.portocol 返回页面使用的 web 协议。 http:或 https:
- 3-4、navigator 对象
提供了与浏览器的相关信息。userAgent(用户代理) 是最常用的属性,可以用来判断用户使用的浏览器,判断浏览器类型
判断是移动端还是 PC
( “Android”, “iPhone”, “SymbianOS”, “Windows Phone”, “iPad”, “iPod”
window.navigator 对象在编写时可不使用 window 这个前缀。
navigator.appCodeName 返回当前所用的浏览器的代码块,例如: Mozilla
navigator.appMinorVersion: 返回浏览器的次级版本。(IE4, Opera支持);
navigator.appName: 返回浏览器的名称(历史性遗留问题,返回都是Netscape)
navigator.browserLanguage: 返回当前浏览器的语言(只有 IE 和 Opera 支持)
navigator.cookieEnabled: 返回指明浏览器中是否启用 cookie 的布尔值(cookie 是记录我们登陆账号密码等信息,
navigator.cpuClass: 返回浏览器系统的 CPU 等级 (只有 IE 支持)
navigator.onLine: 返回指明系统是否处于脱机模式的布尔值(脱机,就是你电脑是否联网) ;
navigator.platform: 返回运行浏览器的操作系统平台
navigator.systemLanguage: 返回当前操作系统的默认语言(只支持 IE)
navigator.userAgent: 返回由客户机发送服务器的 user-agent 头部的值
navigator.userLanguage: 返回操作系统设定的自然语言(IE 和 Opera 支持)
navigator.plugins: 返回包含客户端安装的所有插件的数组
Navigator对象方法
javaEnabled(): 规定浏览器是否支持并启用了 java
taintEnabled(): 规定浏览器是否启用数据污点(data tainting)
- 3-5、screen 对象
主要用来获取用户的屏幕信息。
window.screen 对象在编写时可以不使用 window 这个前缀
height: 获取整个屏幕的高。
width : 获取整个屏幕的宽。
availHeight: 整个屏幕的高减去系统部件的高( 可用的屏幕宽度 )
availWidth : 整个屏幕的宽减去系统部件的宽(可用的屏幕高度 )
coloDepth :用户浏览器表示的颜色为数,通常为32位(每像素的位数)
pixelDepth: 用户浏览器表示的颜色为数,通常为32位(每像素的位数。ie不支持此属性)
- 3-6、history 对象
history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。因为 history 是 window 对象的属性,因此每个浏览器窗口、每个标签页乃至每个框架,都有自己的 history 对象与特定的 window 对象关联。
window.history 对象在编写时可不使用 window 这个前缀。
back() 返回上一页。
forward() 返回下一页。
go('') -1 表示上一页,1 表示下一页,0表示刷新。
length表示访问的url地址的个数,初始为1,
HTML5 新增的方法,增改记录
history.pushState()和 history.replaceState(),
用来在浏览历史中添加和修改记录。state 属性用来保存记录对象,而 popstate 事件用来监听 history 对象的变化
*注意:IE9不支持;
history.pushState()方法向浏览器历史添加了一个状态。pushState()方法带有三个参数:一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址
history.pushState(state, title, url);
history.replaceState方法的参数与pushState方法一模一样,不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目
也许我写的并不是你想要的,但是你的浏览就是对我最大的鼓励和支持,如果写的有出入的地方,下方给我留言。