Javascript BOM基础
关于BOM---IE3.0与Netscape Navigator3.0浏览器有浏览器对象模型特性，允许访问和操控浏览器窗口。研发者通过使用BOM，可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作。BOM是JavaScript应用中唯一没有相关标准的部分，这是BOM真正独特且经常出现问题的所在。 BOM主要处理浏览器窗口与框架，但事实上，浏览器特有的JavaScript扩展都被认作是BOM的一部分。
open()方法---打开一个新的浏览器窗口。如下一个例子：当单击“打开窗口”时，会打开一个新的标签页，地址为百度的首页。
关于打开目标：
- blank在新窗口中打开被链接文档。
- self默认。在相同的框架中打开被链接文档。
- parent在父框架集中打开被链接文档。
- top在整个窗口中打开被链接文档。
这个和<a>标签的目标很相似。
1 <script> 2 window.onload=function(){ 3 var obtn=document.getElementById('btn'); 4 obtn.onclick=function(){ 5 window.open('http://www.baidu.com/','_blank')//这里的两个属性分别为：要打开的地址，打开的方式（有top,parent,blank,self） 6 }; 7 }; 8 </script> 9 </head> 10 11 <body> 12 <input type="button" id="btn" value="打开窗口"/> 13 </body>
代码运行器模拟，实例说明：页面中有一个文本框和一个“运行代码”按钮，把相应的代码放在文本框内就可以运行这些代码，在一个新的窗口中。这个效果和一些js的特效的源码下载网站很相似。
1 <script> 2 window.onload=function(){ 3 var otxt=document.getElementById('text'); 4 var obtn=document.getElementById('btn'); 5 6 obtn.onclick=function(){ 7 var oNewWin=window.open('about:blank'); 8 oNewWin.document.write(otxt.value); 9 }; 10 }; 11 </script> 12 </head> 13 <body> 14 <textarea id="text" cols="20" rows="10"></textarea> 15 <input type="button" id="btn" value="运行代码"/> 16 </body>
navigator.userAgent-- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
下面的代运行之后会弹出一大串东西，包括浏览器的版本，内核等等信息。
1 <script> 2 alert(window.navigator.userAgent); 3 </script>
location---返回浏览器的当前页面的网址
1 <script> 2 //alert(window.loaction); 3 window.location="http://www.baidu.com/" 4 </script>
尺寸和坐标
可视区尺寸---clientWidth / clientHeight
滚动距离---document.body.scrollLeft / documentelement.scrollTop
常用方法和事件
confirm用来弹出窗口提示信息，如下代码：
prompt用来弹出输入框，第一个值为提示语，第二个为默认值；个人觉得prompt和vb语言里面的inputbox()函数很像。
1 <script> 2 //var a=confirm('最近过得好吗？'); 3 //alert(a); 4 var b=prompt('请输入你的成绩','100'); 5 alert(b); 6 </script>
广告侧边栏---实例说明：把广告固定在网页的左边和右边中间，无论窗口怎么移动，位置都不会改动。
下面的代码仅仅是使用CSS实现，但是IE不支持position：fixed这个属性，所以在IE下使用JS来实现在。
1 <title>广告侧边栏</title> 2 <style> 3 #div1{width:100px;height:100px;background:blue;position:fixed;right:0;top:50%;margin-top:-50px;};//只做了右边的一个，有点不懂为什么margin-top要为-50px;,只知道top：50%是为了让div居中。哪位大神知道？ 4 </style> 5 </head> 6 <body style="height:1500px;"> 7 <div id="div1"></div> 8 </body>
使用js实现
1 <script> 2 window.onresize=window.onload=window.onscroll=function ()//使用相等来使当浏览器窗口的大小改变的时候，当加载页面的时候，当滚动页面的时候都要实现函数 //里面的效果。 3 { 4 var oDiv=document.getElementById('div1'); //获取div 5 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//垂直滚动条的到窗口顶部的距离 6 var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2; //t=（浏览器可视区域的高度-div的offsetHeight）/2 7 8 oDiv.style.top=scrollTop+t+'px'; 9 }; 10 </script> 11 </head> 12 13 <body style="height:2000px;"> 14 <div id="div1"> 15 </div> 16 </body>
回到顶部效果，这种效果很常见。实例代码如下：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 #btn1 {position:fixed; bottom:0; right:0;} //把“回到顶部”按钮绝对定位在页面的右下角 6 </style> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>回到顶部</title> 9 <script> 10 window.onload=function () 11 { 12 var oBtn=document.getElementById('btn1'); //获取元素 13 var bSys=true; 14 var timer=null; 15 16 //如何检测用户拖动了滚动条 17 window.onscroll=function () 18 { 19 if(!bSys) 20 { 21 clearInterval(timer); //清楚定时器，为了停止不断向上滑动的滚动条 22 } 23 bSys=false; 24 }; 25 26 oBtn.onclick=function () 27 { 28 timer=setInterval(function (){ 29 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 30 var iSpeed=Math.floor(-scrollTop/8); 31 32 if(scrollTop==0) 33 { 34 clearInterval(timer); //如果滚动条已经滑动到了顶部，就不再执行定时器，这是为了避免向下滑动滚动条的时候触发事件 35 } 36 37 bSys=true; 38 document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed; 39 }, 30); 40 }; 41 }; 42 </script> 43 </head> 44 <body style="height:10000px;"> //给页面足够的高，以便产生滚动条 45 <input id="btn1" type="button" value="回到顶部" /> 46 </body> 47 </html>