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】

看一下代碼編寫：