JavaScript window對象

時間 2020-08-13

標籤 javascript window 對象欄目 JavaScript 简体版

原文原文鏈接

window對象

　　window對象是一個全局的對象，咱們使用的alert()就是window對象下的方法。只是由於它是全局的因此並不須要加上前綴。像前面說的Math對象就是非全局的。所以須要加上前綴。html

　　全部的瀏覽器都支持window對象，按理說一個HTML文檔就應該對應一個window對象。而且從功能上來說它是控制瀏覽器窗口的，window對象並不須要建立對象，而是直接使用便可。瀏覽器

經常使用方法

方法名	描述
輸入框系列
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>

confirm

　　顯示帶有一段消息以及確認按鈕和取消按鈕的對話框(可用變量接受true或者false)網站

<script>

    "use strict";

    let select = confirm("雲崖是個帥哥對嗎?");  // window爲全局對象，不用加前綴

    console.log(select); // 點擊肯定是true，取消是false

</script>

prompt

　　顯示可提示用戶輸入的對話框(可用變量接收輸入的內容)this

<script>

    "use strict";

    let message = prompt("請輸入信息");  // window爲全局對象，不用加前綴

    console.log(message); // HELLO,WORLD

</script>

窗口系列

open

　　打開一個新的瀏覽窗口或者查找一個已命名的窗口google

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

　　參數1：網址名稱3d

　　參數2：新窗口的名稱code

　　參數3：新窗口的參數htm

<script>

    "use strict";

    open("http://www.google.com"); // 打開一個新窗口，進入指定的網址

</script>

<script>

    "use strict";

    open("","","width=200,resizable=no,height=100,"); // 打開一個新窗口，寬度200，高度100

</script>

close

　　關閉當前的瀏覽器窗口

<script>

    "use strict";

    let select = confirm("點擊肯定關閉當前窗口");

    if (select) { close() };

</script>

定時器系列

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>標籤進行跳轉頁面的操做。

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。