JavaScript之window对象最常用相关知识总结

一、概述

1、BOM浏览器对象模型

它是规范浏览器对js语言的支持（js调用浏览器本身的功能），BOM的具体实现是window对象

二、相关方法

1、框体方法

1.1 alert（警告框）

提示一个警告信息，没有返回值

//警告框
function testAlert(){
       window.alert("我是警告框");
       //等价于  alert("我是警告框");
}
1
2
3
4
5

1.2 confirm（确认框）

提示用户选择一项操作（确认/取消）
点击确定返回true
点击取消返回false

//确认框
function testConfirm(){
    var flag = window.confirm("确认框");
    alert(flag);
}
1
2
3
4
5

1.3 prompt（提示框）

提示用某个信息的录入或者说收集
点击确定，返回当前用户录入的数据，默认返回空字符串
点击取消，返回null

//提示框
function testPrompt(){
     var date = window.prompt("请输入昵称：");
     alert(date);
}
1
2
3
4
5

2、定时和间隔执行方法

2.1 setTimeout（定时执行）

指定的时间后执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒
返回值：返回当前定时器的id

var id;
//定时执行
function testSetTimeout(){
     id = window.setTimeout(function(){
     alert("定时执行");
    },3000);  //3秒后执行
}
1
2
3
4
5
6
7

2.2 setInterval（间隔执行）

每间隔指定的时间执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒
返回值：返回当前间隔器的id

var id2;
//间隔执行
function testSetInterval(){
     id2 = window.setInterval(function(){
          alert("间隔执行");
     },2000);  
}
1
2
3
4
5
6
7

2.3 clearTimeout（停止指定的定时器）

用来停止指定的间隔器
参数：定时器id

//停止当前的定时方法
function testClearTimeout(){
      window.clearTimeout(id);
}
1
2
3
4

2.4 clearInterval（停止指定的间隔器）

用来停止指定的间隔器
参数：间隔器的id

//停止指定的间隔器
function testClearInterval(){
     window.clearInterval(id2);
}
1
2
3
4

3、对应实例一

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之window对象学习</title>
    <script>
        //框体方法学习
            //警告框
            function testAlert(){
                window.alert("我是警告框");
                //等价于  alert("我是警告框");
            }
            //确认框
            function testConfirm(){
                var flag = window.confirm("确认框");
                alert(flag);
            }
            //提示框
            function testPrompt(){
                var date = window.prompt("请输入昵称：");
                alert(date);
            }
/*---------------------------------------------------------------------*/
            var id;
            var id2;
            //定时执行
            function testSetTimeout(){
                id = window.setTimeout(function(){
                        alert("定时执行");
                },3000);  //3秒后执行
            }
            //间隔执行
            function testSetInterval(){
                id2 = window.setInterval(function(){
                        alert("间隔执行");
                },2000);  
            }
            //停止当前的定时方法
            function testClearTimeout(){
                window.clearTimeout(id);
            }
            //停止指定的间隔器
            function testClearInterval(){
                window.clearInterval(id2);
            }
    </script>
</head>
<body>
    <h3>window对象学习</h3>
    <hr/>
    <input type="button" name="" id="" value="测试警告框" onclick="testAlert();"/>
    <input type="button" name="" id="" value="测试确认框" onclick="testConfirm();"/>
    <input type="button" name="" id="" value="测试提示框" onclick="testPrompt();"/>
    <hr/>
    <input type="button" name="" id="" value="定时执行" onclick="testSetTimeout();"/>
    <input type="button" name="" id="" value="间隔执行" onclick="testSetInterval();"/>
    <input type="button" name="" id="" value="停止指定的定时器" onclick="testClearTimeout();"/>
    <input type="button" name="" id="" value="停止指定的间隔器" onclick="testClearInterval();"/>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

4、子窗口方法

window.open(‘子页面的资源（相对路径）’,‘打卡方式’,‘配置’);
注意：关闭子页面的方法window.close(),但是此方法只能关闭open方法打开的子页面。

//1、子页面方法
function testOpen(){
     window.open('son.html','newwindow','height=400, width=600, top=100px, left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=no, location=yes, status=yes');
}
1
2
3
4

5、子页面调用父页面函数

window.opener.父页面的函数

//2、子页面调用父页面的函数
function testFather(){
    alert("父页面");
}
1
2
3
4

6、对应实例二

子页面（son.html）

DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之son页面title>
    <script>
        //倒计时功能
        function testTime(){
            window.setInterval(function(){
                var span = document.getElementById("timeSpan");
                span.innerHTML = span.innerHTML-1;
                //关闭子页面
                if(span.innerHTML==0){
                    window.close();
                }
            },1000);
        }
        function testFa(){
            window.opener.testFather();
        }
    
    script>
head>
<body onload="testTime()">
    <h3>Son页面展示h3>
    <hr/>
    <b>欢迎访问<span id="timeSpan" style="color:red; font-size: 20px;">5span>秒后页面关闭b>
    <input type="button" name="" id="" value="调用父页面函数" onclick="testFa()"/>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

父页面（main.html）

DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之window对象学习2title>
    <script>
        //1、子页面方法
            function testOpen(){
                window.open('son.html','newwindow','height=400, width=600, top=100px, left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=no, location=yes, status=yes');
            }
        //2、子页面调用父页面的函数
            function testFather(){
                alert("父页面");
            }
    script>
head>
<body>
    <h3>js的window对象学习2h3>
    <hr/>
    <input type="button" name="" id="" value="测试open" onclick="testOpen()"/>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三、window对象的常用属性

1、location（地址栏属性）

window.location.href=“新的资源路径（相对路径/URL）”
window.location.reload()重新加载页面资源

//1、地址栏属性学习
function testLocation(){
     window.location.href="http://www.baidu.com";
}

function testLocation2(){
     window.location.reload();
}
1
2
3
4
5
6
7
8

2、history（历史记录属性）

window.history.forward() 页面资源前进，历史记录的前进
window.history.back() 页面资源后退，历史记录后退
window.history.go(index) 跳转到指定的历史记录资源
注意：window.history.go(0) 相当于刷新

//2、历史记录属性
function testHistory(){
     window.history.forward();
}

function testHistory2(){
     window.history.go(1);
}
1
2
3
4
5
6
7
8

3、screen（屏幕属性）

window.screen.width； //获取屏幕的宽度分辩率
window.screen.height; //获取屏幕的高度分辩率

//3、屏幕属性学习
function testScreen(){
     var x = window.screen.width;
     var y = window.screen.height;
     alert(x + ":" + y);
}
1
2
3
4
5
6

4、浏览器配置属性

//4、浏览器配置属性
function testNa(){
     alert(window.navigator.userAgent);
}
1
2
3
4

5、相关实例

DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之window对象学习3title>
    <script>
        //1、地址栏属性学习
            function testLocation(){
                window.location.href="http://www.baidu.com";
            }

            function testLocation2(){
                window.location.reload();
            }

        //2、历史记录属性
            function testHistory(){
                window.history.forward();
            }

            function testHistory2(){
                window.history.go(1);
            }
        //3、屏幕属性学习
            function testScreen(){
                var x = window.screen.width;
                var y = window.screen.height;
                alert(x + ":" + y);
            }
        //4、浏览器配置属性
            function testNa(){
                alert(window.navigator.userAgent);
            }
    script>
head>
<body>
    <h3>js的window对象学习2h3>
    <hr/>
    <input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()"/>
    <input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()"/>
    <br/>
    <input type="button" name="" id="" value="测试历史记录属性--history--前进" onclick="testHistory()"/>
    <input type="button" name="" id="" value="测试历史记录属性--history--go" onclick="testHistory2()"/>
    <br/>
    <input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen()"/>
    <input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNa()"/>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

相关阅读:
等保测评答疑
View-of-Delft数据集文件学习
努力一周，开源一个超好用的接口Mock工具——Msw-Tools
LoadRunner VUG 脚本
阿里云优惠券如何领取（阿里云在哪领取优惠券）
Web 自动化神器 TestCafe(二)—元素定位篇
Keras CIFAR-10分类自定义simple CNN篇
EFCore高级Saas系统下单DbContext如何支持不同数据库的迁移
12.3 - 每日一题 - 408
MySQL介绍

原文地址：https://blog.csdn.net/qq_46106857/article/details/126268115

JavaScript之window对象最常用相关知识总结