JavaScript window物件

雲崖先生發表於2020-08-12
JavaScript物件

window物件

　　window物件是一個全域性的物件，我們使用的alert()就是window物件下的方法。只是因為它是全域性的所以並不需要加上字首。像前面說的Math物件就是非全域性的。因此需要加上字首。

　　所有的瀏覽器都支援window物件，按理說一個HTML文件就應該對應一個window物件。並且從功能上來講它是控制瀏覽器視窗的，window物件並不需要建立物件，而是直接使用即可。

image-20200810192053470

常用方法

方法名描述
輸入框系列  
alert() 顯示帶有一段訊息和一個確認按鈕的警告框
confirm() 顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊(可用變數接受trun或者false)
prompt() 顯示可提示使用者輸入的對話方塊(可用變數接收輸入的內容)
視窗系列  
open() 開啟一個新的瀏覽視窗或者查詢一個已命名的視窗
close() 關閉瀏覽器視窗
定時器系列  
setInterval() 按照指定的週期（以毫秒計）來呼叫函式或計算表示式，迴圈呼叫。
clearInterval() 取消由 setInterval() 設定的 timeout
setTimeout() 在指定的毫秒數後呼叫函式或計算表示式，只呼叫一次。
clearTimeout() 取消由 setTimeout() 方法設定的 timeout
滾動條系列  
scrollTo() 把內容滾動到指定的座標。

輸入框系列

alert

　　顯示帶有一段訊息和一個確認按鈕的警告框

<script>
​
    "use strict";
​
    alert("hello,world");  // window為全域性物件，不用加字首
​
</script>

image-20200810192842827

confirm

　　顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊(可用變數接受true或者false)

<script>
​
    "use strict";
​
    let select = confirm("雲崖是個帥哥對嗎?");  // window為全域性物件，不用加字首
​
    console.log(select); // 點選確定是true，取消是false
​
</script>

image-20200810193515078

prompt

　　顯示可提示使用者輸入的對話方塊(可用變數接收輸入的內容)

<script>
​
    "use strict";
​
    let message = prompt("請輸入資訊");  // window為全域性物件，不用加字首
​
    console.log(message); // HELLO,WORLD
​
</script>

image-20200810193701503

視窗系列

open

　　開啟一個新的瀏覽視窗或者查詢一個已命名的視窗

　　方法詳解: open()方法用於開啟一個新視窗並進入指定網址

　　引數1：網址名稱

　　引數2：新視窗的名稱

　　引數3：新視窗的引數

<script>
​
    "use strict";
​
    open("http://www.google.com"); // 開啟一個新視窗，進入指定的網址
​
</script>

<script>
​
    "use strict";
​
    open("","","width=200,resizable=no,height=100,"); // 開啟一個新視窗，寬度200，高度100
​
</script>

image-20200810194458259

close

　　關閉當前的瀏覽器視窗

<script>
​
    "use strict";
​
    let select = confirm("點選確定關閉當前視窗");
​
    if (select) { close() };
​
</script>

image-20200810194821513

定時器系列

setInterval

　　按照指定的週期（以毫秒計）來呼叫函式或計算表示式，迴圈呼叫。

<script>
​
    "use strict";
​
    setInterval(() => {
​
        console.log("hello,world");
​
    }, 3000);  // 每隔3000毫秒執行一次
 
</script>

clearInterval

　　取消由 setInterval() 設定的 timeout，這代表將不會繼續迴圈執行setInterval()中的程式碼。

　　以下示例將演示使用setInterval()與clearInterval()製作一個定時器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
​
    <input class="show" type="text" readonly placeholder="開始計時">
    <button onclick="start(this)">開始計時</button>
    <button onclick="end(this)">停止計時</button>
​
</body>
​
<script>
​
    "use strict";
​
    let tag = null;
​
    function start(ele) {
​
        if (tag == null) {
            let time = new Date().toLocaleString();
            ele.previousElementSibling.value = time;
​
        }
​
        tag = setInterval(() => {
            let time = new Date().toLocaleString();
            ele.previousElementSibling.value = time;  // 上一個兄弟標籤
        }, 1000);
​
    }
    
    function end(ele) {
​
        clearInterval(tag); // 取消繼續迴圈
        tag = null;
        ele.previousElementSibling.previousElementSibling.value = "繼續計時";
​
    }
​
</script>
</html>

關鍵幀

setTimeout

　　在指定的毫秒數後呼叫函式或計算表示式，只呼叫一次。

<script>
​
    "use strict";
​
    setTimeout(() => {
​
        console.log("hello,world");
​
    }, 3000);  // 3000毫秒後列印一次hello，world
 
</script>

clearTimeout

　　取消由 setTimeout() 設定的 timeout，這代表將不會繼續迴圈執行setTimeout()中的程式碼。

關鍵幀

<script>
​
    "use strict";
​
    let tag = setTimeout(() => {
​
        alert("HELLO,WORLD");
​
    }, 1000); // 一千毫秒後將列印HELLO,WORLD
​
    let select = confirm("如果您點選確定，會有一個彈窗在1s後向您打招呼，如果您點選取消，則沒有彈窗向您打招呼。");
​
    if (select == false) {
​
        clearTimeout(tag);
​
    }
    // 由於同步任務在巨集任務之前，所以先執行同步任務。
    
</script>

History和Location

　　History和Location是Window物件下的兩個子物件。其中History包含使用者在瀏覽器視窗中訪問過的URL，而Location物件包含有關當前URL的資訊。

　　History的功能類似於瀏覽器上的這兩個功能，並且使用length可以返回瀏覽器歷史中的URL數量。

History

　　這玩意兒不推薦使用，它相當於瀏覽器上的這兩個按鍵。

　　History物件在實際應用中比較少見。但是我印象中在某一些小說網站使用較多。但是更多的是目前都在使用<a>標籤進行跳轉頁面的操作。

image-20200810212742434

History下的方法名描述
back() 載入history列表中的前一個URL
forward() 載入 history 列表中的下一個 URL
go() 載入 history 列表中的某個具體頁面

　　back與forward例項

　　以下有兩個H5頁面，一個為主頁一個為首頁。

// 主頁
<body>
​
    <a href="子頁.html">跳轉到子頁</a>
    <button onclick="history.forward()">forward</button>
​
</body>
// 子頁
<body>
        <button onclick="history.back()">back-返回到主頁</button>
</body>

關鍵幀

　　go例項

　　使用go()也可以達到上述效果，但是裡面引數要設定成+1或者-1。

// 主頁
<body>
​
    <a href="子頁.html">跳轉到子頁</a>
    <button onclick="history.go(1)">go(1)</button>
​
</body>
// 子頁
<body>
        <button onclick="history.go(-1)">go(-1)-返回到主頁</button>
</body>

關鍵幀

Location

　　Location物件也是Window物件下的一個子物件，它主要包含了一些URL的資訊。

屬性描述
hash 設定或返回從井號 (#) 開始的 URL（錨）。
host 設定或返回主機名和當前 URL 的埠號。
hostname 設定或返回當前 URL 的主機名。
href 設定或返回完整的 URL。
pathname 設定或返回當前 URL 的路徑部分。
port 設定或返回當前 URL 的埠號。
protocol 設定或返回當前 URL 的協議。
search 設定或返回從問號 (?) 開始的 URL（查詢部分）。
屬性描述
assign() 載入新的文件。
reload() 重新載入當前文件。
replace() 用新的文件替換當前文件。 
<script>
​
    "use strict";
​
    location.assign("http://www.google.com/");
    // 頁面跳轉訪問google，不能通過瀏覽器自帶的back返回。
​
    location.reload();
    // 重新整理當前頁面，類似F5重新整理功能
​
    location.replace("http://www.google.com/");
    // 使用google來替換當前頁面，不能通過瀏覽器自帶的back返回
​
</script>

 

相關文章