BOM主要用于管理浏览器窗口,提供了独立的,可以与浏览器窗口进行互动的功能,这些功能与任何网页内容无关。BOM由多个对象组成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。
1,使用window对象
1.1 访问浏览器窗口
浏览器对象简单说明如下:
- window:客户端JavaScript中的顶层对象。每当<body>或<frameset>标签出现时,window对象就会被自动创建
- navigator:包含客户端有关浏览器的信息
- screen:包含客户端显示屏的信息
- history:包含浏览器窗口访问过的URL信息
- location:包含当前网页文档的URL信息
- document:包含整个HTML文档,可被用来访问文档内容,及其所有页面元素
1.2 全局作用域
客户端JavaScript代码都在全局上下文环境中允许,window对象提供了全局作用域。由于window对象是全局对象,因此所有的全局变量都被视为该对象的属性。
1.3 使用系统测试方法
window对象定义了3个人机交互的接口方法,方便开发人员对JavaScript脚本进行测试。
- alert()
- confirm()
- prompt()
1.4 打开和关闭窗口
使用window对象的open()方法,可以打开一个新窗口。用法如下。
window.open(URL,name,features,replace)
参数说明如下:
- URL:可选字符串,声明在新窗口中显示文档的url
- name:声明新窗口的名称
- features:声明新窗口要显示的标识浏览器的特征
- replace:规定了装载到窗口的URL是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。
1.5 使用定时器
2,使用navigator对象
navigator对象包含了浏览器的基本信息,如名称,版本和系统等。通过window.navigator可以引用该对象,并利用它的属性来读取客户端基本信息,navigator对象属性说明如下:
appCodeName appMinorVersion appName appVersion browserLanguage cookieEnabled cpuClass onLine platform systemLanguage userAgent userLanguage
2.1 浏览器检测方法
1,特征检测法
if(document.getElementsByName){ //如果存在,使用该方法获取a元素 var a = document.getElementsByName("a"); } else if(document.getElementsByTagName){ //如果存在,使用该方法获取a元素 var a= document.getElementsByTagName("a"); }
2,字符串检测法
var s = window.navigator.userAgent; alert(s);
2.2 检测浏览器类型和版本号
<script> var ua = navigator.userAgent.toLowerCase(); var info = { ie:/msie/.test(ua) && !/opera/.test(ua), op:/opera/.test(ua), sa:/version.*safari/.test(ua), ch:/chrome/.test(ua), ff:/gecko/.test(ua) && !/webkit/.test(ua) }; (info.ie) && alert("IE"); (info.op) && alert("Opera"); (info.sa) && alert("Safari"); (info.ff) && alert("Firefox"); (info.ch) && alert("Chrome"); </script>
2.3 检测用户操作系统
var isWin = (navigator.userAgent.indexOf("Win") != -1); var isMac = (navigator.userAgent.indexOf("Mac") != -1); var isUnix = (navigator.userAgent.indexOf("X11") != -1); var isLinux = (navigator.userAgent.indexOf("Linux") != -1);
2.4 检测插件
略
3,使用location对象
location对象存储当前页面与位置(URL)相关的信息,表示当前显示文档的Web地址。使用window对象的location属性可以访问。
location对象定义了8个属性,如下
href(网站URL) protocol host hostname port pathname search hash
location对象还定义了两个方法,reload()和replace()
reload():重新装载当前文档 replace():重新装载一个新的文档而无须为它创建一个新的历史记录
4,使用history对象
back() forward() go()
5,使用screen对象
availHeight availWidth height width
6,使用document对象
6.1 动态访问文档对象
示例:使用name访问文档元素
<img name="img1" src="bg.gif" /> <form name="form" method="post" action="http://www.mysite.cn/navi/"> </form> <script> alert(document.img1.src); //返回图像地址 alert(document.form.action); //返回表单提交的路径 </script>
示例:使用文档对象集合快速索引
<img name="img" src="bg.gif" /> <form name="form" method="post" action="http://www.mysite.cn/navi/"> </form> <script> alert(document.images[0].src); //返回图像地址 alert(document.forms[0].action); //返回表单提交的路径 </script>
示例:如果对象定义有name属性,也可以使用文本下标来引用对象的元素对象。
<img name="img1" src="bg.gif" /> <form name="form" method="post" action="http://www.mysite.cn/navi/"> </form> <script> alert(document.images["img1"].src); //返回图像地址 alert(document.forms["form"].action); //返回表单提交的路径 </script>
6.2 动态生成文档内容
使用document对象的write()方法。
<script> document.write("<p>helloworld</p>") </script> <body> </body>