Window - 浏览器对象模型

最新推荐文章于 2023-02-22 15:34:19 发布

原创最新推荐文章于 2023-02-22 15:34:19 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了JavaScript在Web开发中的核心应用，包括Window对象、Screen对象、Location对象、history对象等，提供了丰富的示例和代码解析，旨在帮助开发者掌握关键的前端技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Window 对象
    所有浏览器都支持 window 对象。它表示浏览器窗口。
    所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
    全局变量是 window 对象的属性。
    函数是 window 对象的方法。
    document.getElementById("header");
2.Window 尺寸
    window.innerHeight - 浏览器窗口的内部高度
    window.innerWidth - 浏览器窗口的内部宽度
    //IE不支持

    document.documentElement.clientHeight
    document.documentElement.clientWidth
    //通用方法
3.其他 Window 方法
    window.open("URL","name","样式") - 打开新窗口
    window.close() - 关闭当前窗口
    window.moveTo(x,y) - 移动当前窗口到屏幕的(x,y)处
    window.moveBy(x,y) - 移动当前窗口相对水平位置移动x，垂直移动y
    window.resizeTo(x,y) - 调整当前窗口的宽度为x，高度为y
    window.resizeBy(x,y) - 调整当前窗口的宽度x，高度  y
    示例：
    <script>
    window.onlod = function() {
            var btn = document.getElementById("btn");
            var open = document.getElementById("open");
            btn.onclick = function () {
                window.moveBy(100,100);
            };
             btn.onclick = function () {
                var jk = window.open("02.html","","width=200,height=100");
            };
        }
    </script>
    body>
    <input type="button" value="点击" id="btn"/>
    <input type="button" value="打开" id="open"/>
    </body>
4.Screen对象
    screen.availWidth - 可用的屏幕宽度
    screen.availHeight - 可用的屏幕高度
5.Location对象
    location.href
    document.write(location.href)  //返回一个完整的URL:http://localhost:63342/js/js%E5%AF%B9%E8%B1%A1/window.html

    location.hostname
     document.write(location.hostname ); //返回 web 主机的域名:localhost

    location.pathname
    document.write(location.pathname);//返回当前页面的路径和文件名:/js/js%E5%AF%B9%E8%B1%A1/window.html

    location.port
    document.write(location.port ;//返回 web 主机的端口 :63342

    location.assign（URL):
    location.reload(true/false):true，从服务器载入新的文档
    location.replace(new.URL):不能从浏览器历史中访问
6.history 对象
    history.back() - 后退按钮  ==history.go(-1)
    history.forward() - 前进按钮  ==history.go(1)
    page1:
      <script>
        window.onload = function() {
            var forward = document.getElementById("forward");
            var length = document.getElementById("length");
            forward.onclick = function() {
                history.forward();
            };
            length.onclick = function() {
                alert(history.length);
            }
        }
    </script>
    </head>
    <body>
    <a href="02.html">跳转到页面二</a>
    <input type="button" value="前进" id="forward"/>
    <input type="button" value="长度" id="length"/>

    page2:
     <script>
            window.onload = function() {
                var back = document.getElementById("back");
                back.onclick = function() {
                    history.back();
                }
            }

        </script>
    </head>
    <body>
    <input type="button" value="后退" id="back"/>