JavaScript之wimdow对象

最新推荐文章于 2023-03-17 20:39:42 发布

zhouym_

最新推荐文章于 2023-03-17 20:39:42 发布

阅读量301

点赞数

分类专栏：前端文章标签： JavaScript之wimdow对象

本文链接：https://blog.csdn.net/zhouym_/article/details/90760731

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

浏览器对象模型—Browser Object Model (BOM)

JavaScript是运行在浏览器中的，同样很多对象和浏览器窗口进行交互。这些对象有window、document、location、navigator和screen等，他们统称为BOM

下面主要来整理window对象中常用的方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<input type="button" name="" id="" value="测试警告框" onclick="testAlert()"/>
		<input type="button" name="" id="" value="测试确认框" onclick="testConfirm()"/>
		<input type="button" name="" id="" value="测试提示框" onclick="testPrompt()"/>
		<input type="button" name="" id="" value="测试定时执行" onclick="testTimeOut()"/>
		<input type="button" name="" id="" value="测试间隔执行" onclick="testInterval()" />
		<br>
		<br>
		<input type="button" name="" id="" value="停止定时执行" onclick="testClearTimeOut()" />
		<input type="button" name="" id="" value="停止间隔执行" onclick="testClearInterval()" />

	</body>
	<script src="../js/test.js">
	</script>
</html>

对应的js代码

/*警告框*/
function testAlert(){
	window.alert("asjdajssddsa");
}
/*确认框*/
function testConfirm(){
	var c = window.confirm("你确定要删除吗");
	console.log(c);
}
/*提示框*/
function testPrompt(){
	var p = window.prompt("提示信息");
	console.log(p);
	
}

var id;
var ids;
/*设置指定时间执行*/
function testTimeOut(){
	id = window.setTimeout(function(){
		alert("指定时间执行");
	},3000);
		
}
/*设置间隔时间执行*/
function testInterval(){
	ids = window.setInterval(function(){
		alert("间隔指定时间执行函数");
	},2000);
}
/*停止指定时间执行*/
function testClearTimeOut(){
	window.clearTimeout(id);
}
/*停止间隔时间执行*/
function testClearInterval(){
	window.clearInterval(ids);
}

打开子窗口的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="" value="打开子页面" onclick="testOpenPage()"/>
	</body>
	<script type="text/javascript" src="../js/openPage.js">
		
	</script>
</html>

js代码

function testOpenPage(){
	window.open('../html/son.html','newwindow','width=600px,height=360px,left=300px,top=250px');
}

子页面进行倒计时关闭
父页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="" value="打开子页面" onclick="testOpenPage()"/>
	</body>
	<script type="text/javascript" src="../js/openPage.js">
		
	</script>
</html>

子页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				font-size: 30px;
				color: red;
			}
		</style>
	</head>
	<body onload="testOnload()">
		<p>
			页面倒计时，<span id="load">5</span>秒会关闭
		</p>
	</body>
	<script type="text/javascript" src="../js/openPage.js">
		
	</script>
</html>

js代码

function testOnload(){
	window.setInterval(function(){
	//获取id对象
		var id = document.getElementById("load");
		id.innerHTML = id.innerHTML-1;
		//判断等于0时，调用close方法，关闭子窗口
		if(id.innerHTML == 0){
			window.close();
		}
	},1000);		
}

在这里插入图片描述

window对象还有一些常用的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="地址栏属性" onclick="testURL()" />
		<hr />
		<input type="button" value="重新加载页面" onclick="testReload()" />
		<hr >
		<input type="button" value="历史记录前进" onclick="testHistory()" />
		<hr >
		<input type="button" name="" id="" value="历史记录后退" onclick="testHistory2()"/>		
		<hr >
		<input type="button" value="屏幕分辨率" onclick="testScreen()" />
		<hr >
		<input type="button" name="" id="" value="浏览器配置信息" onclick="testNavigator()"/>
	</body>
	<script type="text/javascript" src="../js/windowObject.js">
		
	</script>
</html>

js代码部分

/*获取地址栏属性*/
function testURL(){
	window.location.href="https://www.baidu.com";
}
/*重新加载资源*/
function testReload(){
	window.location.reload();
}
/*页面资源前进，历史记录前进*/
function testHistory(){
	window.history.forward();
}
/*页面资源后退，历史记录后退*/
function testHistory2(){
	window.history.back();
}
/*获取屏幕属性(分辨率)*/
function testScreen(){
	var x = window.screen.width;
	var y = window.screen.height;
	alert(x+":"+y);
}
/*获取浏览器配置属性*/
function testNavigator(){
	var x = window.navigator.userAgent;
	alert(x);
}

zhouym_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之wimdow对象

浏览器对象模型—Browser Object Model (BOM)JavaScript是运行在浏览器中的，同样很多对象和浏览器窗口进行交互。这些对象有window、document、location、navigator和screen等，他们统称为BOM下面主要来整理window对象中常用的方法：<!DOCTYPE html><html> <head>...
复制链接

扫一扫

专栏目录