js window属性、事件.html

最新推荐文章于 2024-03-17 22:19:18 发布

学无止境慢慢来

最新推荐文章于 2024-03-17 22:19:18 发布

阅读量411

点赞数

分类专栏： js

原文链接：https://www.runoob.com/js/js-window.html

版权

js 专栏收录该内容

132 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js window属性、事件</title>
</head>
<body>
<script>
    /*参考：
        https://www.runoob.com/js/js-window.html
        https://www.runoob.com/js/js-window-screen.html
        https://www.runoob.com/jsref/met-element-addeventlistener.html
        https://www.w3school.com.cn/jsref/dom_obj_window.asp
    * 知识点：
    *   1.window.innerHeight - 浏览器窗口的内部高度(包括滚动条，不包括控制台)
            随着窗口尺寸、控制台（在下边）的有无及大小的改变而改变。
            window.innerWidth - 浏览器窗口的内部宽度(包括滚动条，不包括控制台)
            随着窗口尺寸、控制台（在右侧）的有无及大小的改变而改变。
        2.screen.availWidth - 屏幕的可用宽度 (基本固定不变，不受窗口的大小、控制台的有无、大小的影响。)
            screen.availHeight - 屏幕的可用高度 (基本固定不变，不受窗口的大小、控制台的有无、大小的影响。)
        3.Window 对象表示浏览器中打开的窗口。
            如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，
                并为每个框架创建一个额外的 window 对象。
            注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
            返回当前窗口中的所有命名的框架。
            该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。
            属性 frames.length 存放数组 frames[] 中含有的元素个数。
            注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。*/
    window.onload = function () {
        // 1.window 对象的 width, height 属性、resize 事件。
        console.log("innerWidth, innerHeight:", window.innerWidth, window.innerHeight);
        console.log("availWidth, availHeight:", screen.availWidth, screen.availHeight);
        window.onresize = function () {
            // console.log(event);
            // console.log("innerWidth, innerHeight:", window.innerWidth, window.innerHeight);
            // console.log("availWidth, availHeight:", screen.availWidth, screen.availHeight);
            // document.getElementById("demo").innerHTML = Math.random().toString();
        };
        window.addEventListener("resize", function () {
            console.log("innerWidth, innerHeight:", window.innerWidth, window.innerHeight);
            console.log("availWidth, availHeight:", screen.availWidth, screen.availHeight);
        });

        // 2.其他属性。
        console.log("\nwindow:", window);
        console.log("frames:", frames);
        console.log("window.closed:", window.closed);
        // window.closed: false
        window.defaultStatus = "hello world!";
        console.log("window.defaultStatus:", window.defaultStatus);
        // window.defaultStatus: hello world!
        console.log(window.name);  // null
    };
</script>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js window属性、事件.html

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>js window</title></head><body><script> /*参考： https://www.runoob.com/js/js-window.html https://www.ru.
复制链接

扫一扫