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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類