window

Window 尺寸

Windows的一些方法

Window History

一些方法：

Window Location

Window Navigator

Windows 彈窗

系統提示框

計時事件

BOM事件

JavaScript的盒子模型

client系列

offset系列

scroll系列

獲取

設定

獲取html

獲取body

獲取可視區域的寬度或高度

回到頂部按鈕實作

BOM（Browser Obejct Model）:瀏覽器物件模型

window

所有瀏覽器都支持 window 物件，它表示瀏覽器視窗，

所有 JavaScript 全域物件、函式以及變數均自動成為 window 物件的成員，

全域變數是 window 物件的屬性，

全域函式是 window 物件的方法，

甚至 HTML DOM 的 document 也是 window 物件的屬性之一：

window.document.getElementById("header");

與此相同：

document.getElementById("header");

Window 尺寸

有三種方法能夠確定瀏覽器視窗的尺寸，

對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 瀏覽器視窗的內部高度(包括滾動條)
window.innerWidth - 瀏覽器視窗的內部寬度(包括滾動條)

對于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Windows的一些方法

window.open() - 打開新視窗

window.close() - 關閉當前視窗
window.moveTo() - 移動當前視窗
window.resizeTo() - 調整當前視窗的尺寸

window的方法

open(url, name,specs,replace); 打開視窗
- url:本地/在線路徑/地址
- name :_self / _blank 當前視窗 /新的視窗
- specs:外觀設定
- replace：規定了裝載到視窗的 URL 是在視窗的瀏覽歷史中創建一個新條目，還是替換瀏覽歷史中的當前條目
  - true - URL 替換瀏覽歷史中的當前條目，
  - false - URL 在瀏覽歷史中創建新的條目，
close(); 關閉視窗

  btns[0].onclick = function () {
            var res = window.open("https://www.taobao.com", "_blank", "width=400,height=400;", false);

            // open方法的回傳值是window,是新視窗的瀏覽器頂層物件
            console.log(res);
        }

        btns[1].onclick = function () {
            // 關閉當前視窗
            window.close();
        }

Window History

window.history 物件包含瀏覽器的歷史，

window.history物件在撰寫時可不使用 window 這個前綴，

為了保護用戶隱私，對 JavaScript 訪問該物件的方法做出了限制，

一些方法：

go(); 重繪

go(0) 重繪

go(1)前進

go(-1)后退

history.back() - 與在瀏覽器點擊后退按鈕相同，加載歷史串列中的前一個 URL
history.forward() - 與在瀏覽器中點擊向前按鈕相同，加載歷史串列中的下一個 URL，

<body style="background-color: blue;">
    <button>前進</button>
    <button>重繪</button>
    <a href="./2.test.html">第一個頁面</a>
    <script>
        var btns =document.getElementsByTagName("button");

        btns[0].onclick = function(){
            // 前進
            // window.history.forward();
            history.go(1);
        }


        btns[1].onclick = function(){
            // 重繪
            // window.history.go();
            window.history.go(0);
        }

<body style="background-color: yellow;">
    <button>后退</button>
    <button>重繪</button>
    <a href="./1.test1.html">第二個頁面</a>
    <script>
        var btns =document.getElementsByTagName("button");

        btns[0].onclick = function(){
            // 后退
            // window.history.back();
            history.go(-1);
        }

    </script>

Window Location

window.location 物件用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面，

href:完整的url地址（字串）可以設定也可以獲取
pathname:訪問路徑
protocol 協議 ->https /http
port 埠號
hostname：域名
hash: 哈希值
search:獲取?后邊的內容包含問號

location.hostname 回傳 web 主機的域名
location.pathname 回傳當前頁面的路徑和檔案名
location.port 回傳 web 主機的埠（80 或 443）
location.protocol 回傳所使用的 web 協議（http:// 或 https://）

 console.log(window.location);

        // href:完整的url地址（字串）  可以設定  也可以獲取
        console.log(location.href);
        // 'https://www.taobao.com/'

        // 設定到瀏覽器的地址欄
        // location.href = "https://www.baidu.com";

        // pathname:訪問路徑
        // https://error.taobao.com/app/tbhome/common/error.html
        console.log(location.pathname); // ->  /app/tbhome/common/error.html


        // 在線url地址：協議 ->https     域名：www.taobao.com  埠號  https默認埠號443
        console.log(location.protocol); //https

        // port  埠號
        // http://127.0.0.1:5500/09.location.html
        console.log(location.port);

        // hostname： 域名
        // 'https://www.taobao.com/'
        console.log(location.hostname);


        // http://127.0.0.1:5500/09.location.html#hello
        // hash：哈希值  獲取#號后邊內容 包含
        console.log(location.hash);

        // http://127.0.0.1:5500/09.location.html?name=haha&age=100
        // search:獲取?后邊的內容包含問號
        console.log(location.search);

Window Navigator

window.navigator 物件包含有關訪問者瀏覽器的資訊，

來自 navigator 物件的資訊具有誤導性，不應該被用于檢測瀏覽器版本，這是因為：

navigator 資料可被瀏覽器使用者更改
一些瀏覽器對測驗站點會識別錯誤
瀏覽器無法報告晚于瀏覽器發布的新作業系統

<div id="example"></div>
<script>
txt = "<p>瀏覽器代號: " + navigator.appCodeName + "</p>";
txt+= "<p>瀏覽器名稱: " + navigator.appName + "</p>";
txt+= "<p>瀏覽器版本: " + navigator.appVersion + "</p>";
txt+= "<p>啟用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬體平臺: " + navigator.platform + "</p>";
txt+= "<p>用戶代理: " + navigator.userAgent + "</p>";
txt+= "<p>用戶代理語言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

    // 包含瀏覽器資訊 （瀏覽器資訊物件）
        console.log(window.navigator);

        // 用戶資訊  userAgent  可以做兼容處理
        console.log(window.navigator.userAgent);  

        // 是否有網路  onLine  有:true  沒有:false
        console.log(window.navigator.onLine);

Windows 彈窗

可以在 JavaScript 中創建三種訊息框：警告框、確認框、提示框，

系統提示框

alert(提示內容); 彈窗
prompt(提示內容); 帶有輸入的用戶提示框
- 確定：回傳輸入內容
- 取消：回傳null
confirm(提示內容); 用戶提示框
- 確定：回傳 true
- 取消：回傳 false

計時事件

通過使用 JavaScript，我們有能力做到在一個設定的時間間隔之后來執行代碼，而不是在函式被呼叫后立即執行，我們稱之為計時事件，

在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

setInterval() - 間隔指定的毫秒數不停地執行指定的代碼，
setTimeout() - 在指定的毫秒數后執行指定代碼，

注意: setInterval() 和 setTimeout() 是 HTML DOM Window物件的兩個方法，

BOM事件

window.onload:保證所有的資源（樣式，結構，圖片，音頻，視頻...）加載完畢再去執行函式中的js代碼 //DOM事件

window.onscroll:滾動事件，在滾動條滾動的程序中實時觸發

window.onresize:視窗尺寸大小改變觸發的事件

   // window.onload:保證所有的資源（樣式，結構，圖片，音頻，視頻...）加載完畢再去執行函式中的js代碼
       window.onload = function(){
         //js代碼
        }
// onscroll  和  onresize 都屬于高頻發事件
        // window.onscroll:滾動事件，在滾動條滾動的程序中實時觸發
        window.onscroll = function () {
            console.log("哈哈");
        }

        // window.onresize:視窗尺寸大小改變觸發的事件
        window.onresize = function () {
            console.log("視窗大小變了");
        }

JavaScript的盒子模型

獲取到的值都是具體的數值

client系列
- clientWidth / clientHeight: 元素 width/height + 左右padding / 上下padding
- clientLeft / clientTop:左邊框/上邊框
offset系列
- offsetWidth / offsetHeight:clientWidth / clientHeight + 左右border / 上下的border
- offsetLeft / offsetTop:獲取距離最近已經定位父級元素的距離，沒有已經定位的父級元素就是獲取距離body的距離 (從當前元素的外邊框到已經定位父級元素的內邊框)
- offsetParent:獲取最近已經定位的父級元素,沒有已經定位的父級元素獲取到的就是body
scroll系列
- scrollWidth / scrollHeight
  - 內容沒有溢位就相當于clientWidth/clientHeight
  - 內容有有溢位：左padding/上padding + 真實內容的高度，獲取到的值是一個約等于的值，是不夠精確的在不同瀏覽下可能值是不一樣，因為不同瀏覽器對行高，字體大小渲染機制不一樣
- scrollLeft / scrollTop:滾動條滾動的距離

獲取

// 宣告了檔案型別使用html,沒有宣告檔案型別用body
var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;

設定

document.documentElement.scrollLeft = document.body.scrollLeft = 200;
document.documentElement.scrollTop = document.body.scrollTop = 200;

獲取html

document.documentElement

獲取body

document.body

  console.log(document.documentElement,document.body);


        // 獲取滾動條滾動的距離
        // 宣告了檔案型別使用html,沒有宣告檔案型別用body
        console.log(document.documentElement.scrollLeft);
        console.log(document.documentElement.scrollTop);

        // 滾動事件
        window.onscroll = function () {
            // 用html
            // console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop);
            // 用body
            // console.log(document.body.scrollLeft,document.body.scrollTop);

            // 獲取
            // 兼容處理 
            var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(scrollL,scrollT);

        }

        box.onclick =function(){
            // 設定
            // document.documentElement.scrollLeft = 200;
            // document.documentElement.scrollTop = 200;

            document.documentElement.scrollLeft = document.body.scrollLeft = 200;
            document.documentElement.scrollTop = document.body.scrollTop = 200;
        }

獲取可視區域的寬度或高度

宣告了檔案型別就用html,沒有宣告就用body

//宣告了檔案型別用html  沒有宣告檔案型別用body
//var winW = document.body.clientWidth;
//var winH = document.body.clientHeight;

var winW = document.documentElement.clientWidth;
var winH = document.documentElement.clientHeight;

回到頂部按鈕實作

<body style="height: 3000px;background: linear-gradient(yellow,orangered,skyblue);">
    <div>點我</div>
    <script>
        // 首屏高度 + 滾動條最大滾動距離 == 真實頁面高度

        var div = document.getElementsByTagName("div")[0];

        // 獲取首屏的的高度
        var winH = document.documentElement.clientHeight;
        // 系結事件
        window.onscroll = function () {
            // 獲取滾動條滾動的距離
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
            // 首屏的高度 + 滾動條滾動的距離 >= 2500
            if (winH + scrollT >= 2500) {
                div.style.display = "block";
            } else {
                div.style.display = "none";
            }
        }


        // 回到頂部
        div.onclick = function(){
            // 防止用戶多次點擊先清除定時器
            clearInterval(this.timer);
            // this快取
            var _this = this;
            // 設定定時器
            this.timer = setInterval(function(){
                // this- >window
                // 獲取滾動條滾動距離
                var scroT = document.documentElement.scrollTop || document.body.scrollTop;

                // 在當前滾動距離的基礎上 減去一個固定的值
                var speed = scroT - 200;

                // 到達目標值清除定時器
                if(speed <= 0){
                    // clearInterval(div.timer);
                    clearInterval(_this.timer);
                }
                // 設定滾動的距離
                document.documentElement.scrollTop = document.body.scrollTop = speed;
            },30);
        }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/353419.html

標籤：其他

上一篇：最新系統漏洞--Esri Arcgis Server跨站腳本漏洞

下一篇：怎么定義 Vue-Router 的動態路由?

JavaScript瀏覽器BOM

window

Window 尺寸

Windows的一些方法

Window History

一些方法：

Window Location

Window Navigator

Windows 彈窗

系統提示框

計時事件

BOM事件

JavaScript的盒子模型

client系列

offset系列

scroll系列

獲取

設定

獲取html

獲取body

獲取可視區域的寬度或高度

回到頂部按鈕實作