JavaScript之window对象
一、概述
1、BOM浏览器对象模型
它是规范浏览器对js语言的支持(js调用浏览器本身的功能),BOM的具体实现是window对象
二、相关方法
1、框体方法
1.1 alert(警告框 )
提示一个警告信息,没有返回值
//警告框
function testAlert(){
window.alert("我是警告框");
//等价于 alert("我是警告框");
}
1.2 confirm(确认框)
提示用户选择一项操作(确认/取消)
点击确定 返回true
点击取消 返回false
//确认框
function testConfirm(){
var flag = window.confirm("确认框");
alert(flag);
}
1.3 prompt(提示框)
提示用某个信息的录入或者说收集
点击确定,返回当前用户录入的数据,默认返回空字符串
点击取消,返回null
//提示框
function testPrompt(){
var date = window.prompt("请输入昵称:");
alert(date);
}
2、定时和间隔执行方法
2.1 setTimeout(定时执行)
指定的时间后执行指定的函数
参数1:函数对象
参数2:时间,单位毫秒
返回值:返回当前定时器的id
var id;
//定时执行
function testSetTimeout(){
id = window.setTimeout(function(){
alert("定时执行");
},3000); //3秒后执行
}
2.2 setInterval(间隔执行)
每间隔指定的时间执行指定的函数
参数1:函数对象
参数2:时间,单位毫秒
返回值:返回当前间隔器的id
var id2;
//间隔执行
function testSetInterval(){
id2 = window.setInterval(function(){
alert("间隔执行");
},2000);
}
2.3 clearTimeout(停止指定的定时器)
用来停止指定的间隔器
参数:定时器id
//停止当前的定时方法
function testClearTimeout(){
window.clearTimeout(id);
}
2.4 clearInterval(停止指定的间隔器)
用来停止指定的间隔器
参数:间隔器的id
//停止指定的间隔器
function testClearInterval(){
window.clearInterval(id2);
}
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>
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');
}
5、子页面调用父页面函数
window.opener.父页面的函数
//2、子页面调用父页面的函数
function testFather(){
alert("父页面");
}
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;">5</span>秒后页面关闭</b>
<input type="button" name="" id="" value="调用父页面函数" onclick="testFa()"/>
</body>
</html>
父页面(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对象学习2</title>
<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对象学习2</h3>
<hr/>
<input type="button" name="" id="" value="测试open" onclick="testOpen()"/>
</body>
</html>
三、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();
}
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);
}
3、screen(屏幕属性)
window.screen.width; //获取屏幕的宽度分辩率
window.screen.height; //获取屏幕的高度分辩率
//3、屏幕属性学习
function testScreen(){
var x = window.screen.width;
var y = window.screen.height;
alert(x + ":" + y);
}
4、浏览器配置属性
//4、浏览器配置属性
function testNa(){
alert(window.navigator.userAgent);
}
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对象学习3</title>
<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对象学习2</h3>
<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>