JavaScript -- 時光流逝（九）：Window 對象、Navigator 對象

来源:https://www.cnblogs.com/ChengWenHao/archive/2018/11/05/JavascriptPart9.html
-Advertisement-
Play Games

JavaScript: 知識點回顧篇（九）：Window 對象、Navigator 對象 ...


JavaScript -- 知識點回顧篇（九）：Window 對象、Navigator 對象

1. Window 對象

　　1.1 Window 對象的屬性

        (1) closed: 返回視窗是否已被關閉。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    var myTestWindowdow;
    function openTestWindow(){
        myTestWindowdow=window.open("","","width=200,height=100");
    }
    function closeTestWindow(){
        if (myTestWindowdow){
            myTestWindowdow.close();
        }
    }
    function checkTestWindow(){
        if (!myTestWindowdow){
            document.getElementById("msg").innerHTML="測試視窗沒有被打開!";
        }
        else{
            if (myTestWindowdow.closed){
                document.getElementById("msg").innerHTML="測試視窗被關閉!";
            }
            else{
                document.getElementById("msg").innerHTML="測試視窗沒有被關閉!";
            }
        }    
    }
</script>
</head>
<body>
    <input type="button" value="打開測試視窗" onclick="openTestWindow()" /><br/>
    <input type="button" value="關閉測試視窗" onclick="closeTestWindow()" /><br/>
    <input type="button" value="測試視窗狀態" onclick="checkTestWindow()" /><br/>
    <div id="msg"></div>
</body>
</html>

 

        (2)  defaultStatus: 設置或返回視窗狀態欄中的預設文本。

　　　　status: 設置或返回視窗狀態欄的文本。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    //設置預設狀態欄文本
    window.defaultStatus="我會顯示在瀏覽器的狀態欄中! !";
    //設置狀態欄文本
    //window.status="我會顯示在瀏覽器的狀態欄中! !";
</script>
</head>
<body>
</body>
</html>


        (3) frames: 返回視窗中所有命名的框架。該集合是 Window 對象的數組，每個 Window 對象在視窗中含有一個框架。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function changeAllframe() {
    var frames = window.frames;
    var i;

    for (i = 0; i < frames.length; i++) {
        frames[i].location = "https://www.baidu.com";
    }
}
</script>
</head>
<body>
    <button onclick="changeAllframe()">點我</button><br/>
    <iframe src="https://www.baidu.com"></iframe>
    <iframe src="https://www.taobao.com"></iframe>
    <iframe src="https://www.hao123.com/"></iframe>
</body>
</html>


       (4) innerHeight: 返回視窗的文檔顯示區的高度。innerWidth: 返回視窗的文檔顯示區的寬度。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function getWidthAndHeight(){
        var w=window.innerWidth;
        var h=window.innerHeight;
        x=document.getElementById("myInfo");
        x.innerHTML="Width: " + w + " Heigth: " + h;
    }
</script>
</head>
<body>
    <button onclick="getWidthAndHeight()">獲取innerWidth,innerHeight</button><br/>
    <div id="myInfo"></div>
</body>
</html>


        (5) localStorage: 用於長久保存數據，保存的數據沒有過期時間，直到手動去刪除。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function getClickCount() {
        if(typeof(Storage) !== "undefined") {
            if (localStorage.clickcount) {
                localStorage.clickcount = Number(localStorage.clickcount)+1;
            } else {
                localStorage.clickcount = 1;
            }
            document.getElementById("myInfo").innerHTML = "你已經點擊了 " + localStorage.clickcount + " 次。";
        } else {
            document.getElementById("myInfo").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
</script>
</head>
<body>
    <button onclick="getClickCount()">點擊</button><br/>
    <div id="myInfo"></div>
</body>
</html>

瀏覽器不支持時：

瀏覽器支持時：


        (6) length: 返回在當前視窗中frames的數量。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function getframeCount() {
        document.getElementById("myInfo").innerHTML = "有frame " + frames.length + " 個。";
    }
</script>
</head>
<body>
    <button onclick="getframeCount()">點擊</button><br/>
    <div id="myInfo"></div>
    <iframe src="https://www.baidu.com"></iframe>
    <iframe src="https://www.taobao.com"></iframe>
    <iframe src="https://www.hao123.com/"></iframe>
</body>
</html>


        (7) name: 設置或返回視窗的名稱。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var myWindow;
    function openWin(){
        myWindow=window.open('','myTestWindow','width=200,height=100');
        myWindow.document.write("<p>視窗名稱為: " + myWindow.name + "</p>");
    }
</script>
</head>
<body>
    <button onclick="openWin()">點擊</button><br/>
</body>
</html>


        (8) opener: 可返回對創建該視窗的 Window 對象的引用。當使用window.open()打開一個視窗，您可以使用此屬性返回來自目標視窗源（父）視窗的詳細信息。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function openNewWindow(){
        myNewWindow=window.open('','','width=200,height=100');
        myNewWindow.document.write("這是我新打開的視窗");
        myNewWindow.focus();
        myNewWindow.opener.document.write("這個是源視窗");
    }
</script>
</head>
<body>
    <button onclick="openNewWindow()">點擊</button><br/>
</body>
</html>


        (9)  outerHeight: 返回視窗的外部高度，包含工具條與滾動條。
              outerWidth: 返回視窗的外部寬度，包含工具條與滾動條。
              pageXOffset: 設置或返回當前頁面相對於視窗顯示區左上角的 X 位置。
              pageYOffset: 設置或返回當前頁面相對於視窗顯示區左上角的 Y 位置。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function getWidthAndHeight(){
        var ow=window.outerWidth;
        var oh=window.outerHeight;
        var pX=window.pageXOffset;
        var pY=window.pageYOffset;
        x=document.getElementById("myInfo");
        x.innerHTML+="outerWidth: " + ow + " outerHeigth: " + oh+"<br/>";
        x.innerHTML+="pageXOffset: " + pX + " pageYOffset: " + pY+"<br/>";
    }
</script>
</head>
<body>
    <button onclick="getWidthAndHeight()">獲取</button><br/>
    <div id="myInfo"></div>
</body>
</html>


        (10) parent: 返回父視窗。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function getParentWindow(){
        window.open('','','width=200,height=100');
        alert(window.parent.location);
    }
</script>
</head>
<body>
    <button onclick="getParentWindow()">獲取</button><br/>
    <div id="myInfo"></div>
</body>
</html>


        (11) screenLeft: 返回相對於屏幕視窗的x坐標。screenTop: 返回相對於屏幕視窗的y坐標。
　　   　  screnX: 返回相對於屏幕視窗的x坐標。screenY: 返回相對於屏幕視窗的y坐標。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function openNewWindow(){
        myNewWindow=window.open('','');
        myNewWindow.document.write(" 這是新視窗<br/>");
        myNewWindow.document.write(" ScreenLeft: " + myNewWindow.screenLeft +"<br/>");
        myNewWindow.document.write(" ScreenTop: " + myNewWindow.screenTop + "<br/>");
        myNewWindow.document.write(" ScreenX: " + myNewWindow.screenX + "<br/>");
        myNewWindow.document.write(" ScreenY: " + myNewWindow.screenY + "<br/>");
    }
</script>
</head>
<body>
    <button onclick="openNewWindow()">獲取</button><br/>
</body>
</html>


        (12) sessionStorage: 用於臨時保存同一視窗(或標簽頁)的數據，在關閉視窗或標簽頁之後將會刪除這些數據。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function getClickCount() {
        if(typeof(Storage) !== "undefined") {
            if (sessionStorage.clickcount) {
                sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
            } else {
                sessionStorage.clickcount = 1;
            }
            document.getElementById("myInfo").innerHTML = "你已經點擊了 " + sessionStorage.clickcount + " 次。";
        } else {
            document.getElementById("myInfo").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
</script>
</head>
<body>
    <button onclick="getClickCount()">點擊</button><br/>
    <div id="myInfo"></div>
</body>
</html>

瀏覽器不支持時：

瀏覽器支持時：


        (13) self: 返回指向當前 window 對象的引用，利用這個屬性，可以保證在多個視窗被打開的情況下，正確調用當前視窗內的函數或屬性而不會發生混亂。

　　　　  top: 返回當前視窗的最頂層瀏覽器視窗。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function check(){
        if (window.top!=window.self) {
            document.write("這個視窗不是最頂層視窗!")
        }
        else{ 
            document.write("這個視窗是最頂層視窗!</p>")
        } 
    }
</script>
</head>
<body>
    <button onclick="check()">點擊</button><br/>
</body>
</html>



　　1.2 Window 對象的方法

        (1) alert(): 顯示帶有一段消息和一個確認按鈕的警告框。
　　　　atob(): 解碼一個 base-64 編碼的字元串。
　　　　btoa(): 創建一個 base-64 編碼的字元串。

<!doctype html>
<html>
<head
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS 的介紹
    第一章 的介紹 1.CSS：“層疊樣式表”，它是cascading style sheets的縮寫，作用就是給HTML標簽加表現形式（樣式-顯示），如：字體，圖片，列表，位置等。 在瀏覽器中可以看到部分： HTML：“超文本標記語言”，主要作用把內容（文字、圖片、視頻等）放入網頁中--結構 CSS： ...
  • HTML之列表
    列表有三種類型： 有序列表：列表項使用數字來標記 無序列表：列表項使用粗體圓點（典型的小黑圓圈）進行標記。 自定義列表：自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。 一、有序列表格式： 運行結果： 不同類型的有序列表： 1.編號列表 ...
  • css畫一個提示框
    用css畫一個如下圖的提示框： 代碼如下： ...
  • 探索JavaScript數組奧秘
    一 概述 JavaScript數組同後端語言一樣，具有它自己的數據結構，歸根結底，這種數據結構，本質就是一種集合。 在後端語言中(如java,.net等)，數組是這樣定義的：數組是用來存儲相同數據類型的集合。這個定義，“相同數據類型”6個字限制了數據只能存儲相同的數據類型，如int[]數組只能存儲數 ...
  • 實現用戶操作指引功能
    主要是通過定位找到需要指引的目標元素，然後再在蒙版上畫一個div，設置為白色，定位到目標元素位置。思路大概就是這樣。 圖一： 圖二： 圖三： 代碼如下： 實現效果如圖二、圖三所示。 ...
  • 【代碼筆記】Web-HTML-框架
    一，效果圖。 二，代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html 框架</title> </head> <body> <!--iframe 設置高度與寬度--> <iframe src="demo_iframe ...
  • layer父界面調用子彈窗的方法和獲取子彈窗的元素值總結
    主要的代碼: var body = layer.getChildFrame('body', index); var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe頁的視窗對象，執行iframe頁的方法： var comp ...
  • 關於javascript原型鏈的記錄
    構造函數擁有名為prototype屬性,每個對象都擁有__proto__屬性,而且每個對象的__proto__屬性指向自身構造函數prototype。 當調用某種方法或屬性時,首先會在自身調用或查找,如果自身沒有該屬性或者方法，則會去它的__proto__屬性中調用查找，也就是它構造函數的proto ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類