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>

 


__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/archive/2013/05/11/3072560.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Paxster  阅读(474)  评论(2)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae