浏览器打开Javascript BOM基础

来源：互联网发布：linux 卸载openjdk 编辑：程序博客网时间：2024/05/29 06:35

最近应用开发的过程中出现了一个小问题，顺便记录一下原因和方法--浏览器打开

关于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>

文章结束给大家分享下程序员的一些笑话语录：马云喜欢把自己包装成教主，张朝阳喜欢把自己包装成明星，李彦宏喜欢把自己包装成的很知性，丁磊喜欢把自己包装的有创意，李开复总摆出一副叫兽的样子。看来的。其实我想说，缺啥补啥，人之常情。