JS BOM篇（一）window对象

最新推荐文章于 2023-01-07 01:31:25 发布

maktubK

最新推荐文章于 2023-01-07 01:31:25 发布

阅读量224

点赞数

分类专栏： BOM 文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/lemaktub/article/details/111192055

版权

BOM 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了JavaScript中的核心对象Window，它是浏览器实例的接口，包括document、location、history和navigator等子对象。讲解了全局作用域、窗口位置和大小的调整、窗口操作如open()和close()，以及定时器和系统对话框的使用。同时，详细阐述了获取页面视口尺寸的方法，适应不同浏览器模式。通过示例代码展示了实际应用。

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

Window对象

BOM的核心对象是window对象，它表示浏览器的一个实例。即是JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
其主要有 ducoment，location，history，navigator等对象以及方法

全局作用域
全局作用域下中声明的变量、函数都会变成window对象的属性和方法。
窗口位置

	window.moveTo(x,y)
	window.moveBy(x,y)

窗口大小
获取窗口信息

	//IE9+、Firefox、Safari、Opera、Chrome 均提供以下属性
	innerWidth：容器中页面视图的大小（宽度）
	innerHeight：容器中页面视图的大小（高度）
	outerWidth：浏览器窗口本身尺寸（宽度）
	outerHeight：浏览器窗口本身尺寸（高度）
	
	//ie6严格模式有效
	document.documentElement.clientWidth :页面视口信息 
	document.documentElement.clientHeight :页面视口信息 （）
	
	//ie6混杂模式
	document.body.clientWidth :页面视口信息 
	document.body.clientHeight :页面视口信息

code

	var pageWidth = window.innerWidth,
	pageHeigh = window.innerHeight;
	if(typeof pageWidth != 'number'){
		if(document.compatMode == "CSS1Compat"){
			//严格模式
			pageWidth = document.documentElement.clientWidth
			pageHeight = document.documnetElement.clientHeight
		}else{
			pageWidth = document.body.clientWidth
			pageHeight = document.body.clientHeight
		}
	}

打开/关闭窗口 window.open() close()
这里往深了讲还有很多，不具表了。有兴趣可以翻看小红书
有兴趣的小伙伴看得出来，这个可以刷点击量

 var wrowin = window.open('http://www.baidu.com','','height=400,width=400,top=10,left=10,resizable=yes')
wrowin.close()

定时器
setTimeout
setInterval
clearTimeout
clearInterval
系统对话框

alert()
confirm()
prompt()

code

if(confirm("Are you sure?")){
	alert('I am so gald you are sure')
}else{
	alert('I am sad')
}

var result = prompt("what is your name")
if(result !== null){
	alert('Welcome '+result)
}