-- 知识点回顾篇（九）：Window 对象、Navigator 对象

1. Window 对象

　　1.1 Window 对象的属性

        (1) closed: 返回窗口是否已被关闭。

<!doctype html>
<html>
<head>
<  charset="UTF-8">
<  type="text/ ">
    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="测试窗口没有被关闭!";
            }
        }    
    }
</ >
</head>
<body>
    <input type="button" value="打开测试窗口"  ="openTestWindow()" /><br/>
    <input type="button" value="关闭测试窗口"  ="closeTestWindow()" /><br/>
    <input type="button" value="测试窗口状态"  ="checkTestWindow()" /><br/>
    <div id="msg"></div>
</body>
</html>

\"\" \"\"

 

        (2)  defaultStatus: 设置或返回窗口状态栏中的默认文本。

　　　　status: 设置或返回窗口状态栏的文本。

<!doctype html>
<html>
<head>
<  charset="UTF-8">
<  type="text/ ">
    //设置默认状态栏文本
    window.defaultStatus="我会显示在浏览器的状态栏中! !";
    //设置状态栏文本
    //window.status="我会显示在浏览器的状态栏中! !";
</ >
</head>
<body>
</body>
</html>

\"\"


        (3) s: 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。

<!doctype html>
<html>
<head>
<  charset="UTF-8">
<  type="text/ ">
    function changeAll () {
    var  s = window. s;
    var i;

    for (i = 0; i <  s.length; i++) {
         s[i].location = "https://www.baidu.com";
    }
}
</ >
</head>
<body>
    <button  ="changeAll ()">点我</button><br/>
    <  src="https://www.baidu.com"></ >
    <  src="https://www.taobao.com"></ >
    <  src="https://www.hao123.com/"></ >
</body>
</html>

\"\"

\"\"


       (4) innerHeight: 返回窗口的文档显示区的高度。innerWidth: 返回窗口的文档显示区的宽度。

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

\"\"


        (5) localStorage: 用于长久保存数据，保存的数据没有过期时间，直到手动去删除。

<!doctype html>
<html>
<head>
<  charset="UTF-8">
<  type="text/ ">
    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...";
        }
    }
</ >
</head>
<body>
    <button  ="getClickCount()">点击</button><br/>
    <div id="myInfo"></div>
</body>
</html>

浏览器不支持时：

\"\"

浏览器支持时：

\"\"


        (6) length: 返回在当前窗口中 s的数量。

<!doctype html>
<html>
<head>
<  charset="UTF-8">
<  type="text/ ">
    function get Count() {
        document.getElementById("myInfo").innerHTML = "有  " +  s.length + " 个。";
    }
</ >
</head>
<body>
    <button  ="get Count()">点击</button><br/>
    <div id="myInfo"></div>
    <  src="https://www.baidu.com"></ >
    <  src="https://www.taobao.com"></ >
    <  src="https://www.hao123.com/"></ >
</body>
</html>

\"\"


        (7) name: 设置或返回窗口的名称。

<!doctype html>
<html>
<head>
<  charset="UTF-8">
<  type="text/ ">
var myWindow;
    function openWin(){
        myWindow=window.open('','myTestWindow','width=200,height=100');
        myWindow.document.write("<p>窗口名称为: " + myWindow.name + "</p>");
    }
</ >
</head>
<body>
    <button  ="openWin()">点击</button><br/>
</body>
</html>

\"\"


        (8) opener: 可返回对创建该窗口的 Window 对象的引用。当使用window.open()打开一个窗口，您可以使用此属性返回来自目标窗口源（父）窗口的详细信息。

<!doctype html>
<html>
<head>
<  charset="UTF-8">
<  type="text/ ">
    function openNewWindow(){
        myNewWindow=window.open('','','width=200,height=100');
        myNewWindow.document.write("这是我新打开的窗口");
        myNewWindow.focus();
        myNewWindow.opener.document.write("这个是源窗口");
    }
</ >
</head>
<body>
    <button  ="openNewWindow()">点击</button><br/>
</body>
</html>

\"\"


        (9)  outerHeight: 返回窗口的外部高度，包含工具条与滚动条。
              outerWidth: 返回窗口的外部宽度，包含工具条与滚动条。
              pageXOffset: 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
              pageYOffset: 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

<!doctype html>
<html>
<head>
<  charset="UTF-8">
<  type="text/ ">
    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/>";
    }
</ >
</head>
<body>
    <button  ="getWidthAndHeight()">获取</button><br/>
    <div id="myInfo"></div>
</body>
</html>

\"\"


        (10) parent: 返回父窗口。

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


        (11) screenLeft: 返回相对于屏幕窗口的x坐标。screenTop: 返回相对于屏幕窗口的y坐标。
　　   　  screnX: 返回相对于屏幕窗口的x坐标。screenY: 返回相对于屏幕窗口的y坐标。

<!doctype html>
<html>
<head>
<  charset="UTF-8">
<  type="text/ ">
    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/>");
    }
</ >
</head>
<body>
    <button  ="openNewWindow()">获取</button><br/>
</body>
</html>

\"\"


        (12) sessionStorage: 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

<!doctype html>
<html>
<head>
<  charset="UTF-8">
<  type="text/ ">
    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...";
        }
    }
</ >
</head>
<body>
    <button  ="getClickCount()">点击</button><br/>
    <div id="myInfo"></div>
</body>
</html>

浏览器不支持时：

\"\"

浏览器支持时：

\"\"


        (13) self: 返回指向当前 window 对象的引用，利用这个属性，可以保证在多个窗口被打开的情况下，正确调用当前窗口内的函数或属性而不会发生混乱。

　　　　  top: 返回当前窗口的最顶层浏览器窗口。

<!doctype html>
<html>
<head>
<  charset="UTF-8">
<  type="text/ ">
    function check(){
        if (window.top!=window.self) {
            document.write("这个窗口不是最顶层窗口!")
        }
        else{ 
            document.write("这个窗口是最顶层窗口!</p>")
        } 
    }
</

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章