JS——BOM操做（基本用法与实现：open()、close()、scrollTop等了解）

时间 2019-12-04

标签 bom 基本用法实现 open close scrolltop 等了栏目 JavaScript 繁體版

原文原文链接

（1）window.open()html

定义和用法浏览器

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()的用法，以下图：ui

（2）window.close()url

定义和用法spa

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

语法htm

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进行详细说明：

一、各浏览器下 scrollTop的差别
IE6/7/8：
对于没有doctype声明的页面里可使用 document.body.scrollTop 来获取 scrollTop高度；
对于有doctype声明的页面则可使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有本身获取scrollTop的函数： window.pageYOffset ；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；
二、获取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。

以上说明参考自：http://www.javashuo.com/article/p-owmkxajo-gz.html

关于scrollTop的详细用法，转到我的的另外一篇文章（连接： http://www.javashuo.com/article/p-celpktcg-do.html）

（6）系统对话框

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

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

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

看一下代码编写：