JS——BOM操作（基本用法与实现：open()、close()、scrollTop等了解）-优快云博客

本文介绍了JavaScript中window对象的相关方法和属性。包括open()方法用于打开新窗口，close()方法用于关闭窗口，还提到了navigator.userAgent和location。重点讲解了各浏览器下获取scrollTop值的差异及完美赋值短语，同时对documentElement和body进行了说明。

（1）window.open()

定义和用法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

语法

window.open( URL,name,specs,replace) [默认填写url，name这两个参数值即可]

详细介绍可前往： https://www.runoob.com/jsref/met-win-open.html

看一下代码编写：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>     
 8     <script>
 9         window.onload=function(){
10             var oBtn=document.getElementById('btn');
11 
12             oBtn.onclick=function(){
13                 window.open('http://baidu.com','_blank')   
14                 //参数一：url地址
15                 //参数二：同a标签里面的target属性；有四个可选值：_blank(新窗口，默认) _self(当前窗口) _parent  _top
16                 //一般用window.open()参数填写两个即可
17             }
18         }
19     </script>
20 </head>
21 <body>
22     <input type="button" value="click" id="btn">
23 </html>

另外一种window.open()的用法，如下图：

（2）window.close()

定义和用法

close() 方法用于关闭浏览器窗口。

语法

window.close()

说明

方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。

在火狐浏览器中，只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。

【此代码示例不演示】

（3）window.navigator.userAgent

定义：

获取当前浏览器版本

（4）window.location

定义：

获取当前页面的地址/网址

用法：

不光可以读、还可以写　　例如：window.location='http://baidu.com' 即可转到指定页面

（5）document.documentElement.scrollTop(获取滚动条位置)

【通俗来讲就是：获取当前页面的滚动条纵坐标位置】

接下来对scrollTop进行详细说明：

1、各浏览器下 scrollTop的差异
IE6/7/8：
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度；
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有自己获取scrollTop的函数： window.pageYOffset ；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；
2、获取scrollTop值
完美的获取scrollTop 赋值短语：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。
仔细观察这句赋值，你发现啥了没？？
没错，就是 window.pageYOffset (Safari) 被放置在 || 的中间位置。
因为当 数字0 与 undefine 进行或运算时，系统默认返回最后一个值。即或运算中 0 == undefine ;
当页面滚动条刚好在最顶端，即scrollTop值为 0 时。 IE 下 window.pageYOffset (Safari) 返回为 undefine ，此时将window.pageYOffset (Safari) 放在或运算最后面时， scrollTop 返回 undefine , undefine 用在接下去的运算就会报错咯。
而其他浏览器无论 scrollTop 赋值或运算顺序如何都不会返回 undefine. 可以安全使用..
所以说到头还是IE的问题咯. 杯具…
精神有点恍惚，不知道有没有表达清楚。
不过最后总结出来这句实验过OK，大家放心使用；
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

documentElement 和 body 相关说明：

body是DOM对象里的body子节点，即 <body> 标签；

documentElement 是整个节点树的根节点root，即<html> 标签；

DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。

以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。

以上说明参考自：https://www.cnblogs.com/YangJieCheng/p/8108216.html

关于scrollTop的详细用法，转到个人的另一篇文章（链接： https://www.cnblogs.com/ytraister/p/10953015.html）

（6）系统对话框

1》警告框：alert（‘内容’）　　　　　　【没有返回值】

2》选择框：confirm（‘提问的内容’）　【确认：返回true；取消：返回false】

3》输入框：prompt（）　　　　　　　【确认：返回输入的内容；取消：返回null】

看一下代码编写：