JavaScript学习（九） BOM浏览器对象_9.在bom对象中,能获取客户端显示屏的信息的对象是-优快云博客

本文详细介绍了浏览器对象模型(BOM)的核心概念window对象及其属性和方法，包括屏幕(screen)、位置(location)、历史(history)和导航器(navigator)等对象的使用。同时探讨了如何利用JavaScript进行页面操作。

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

1. Window对象

window对象是BOM的核心，window对象指当前的浏览窗口所有javaScript全局对象
函数外变量均自动成为window对象成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一

尺寸及坐标

可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight

//一、可视区宽度和高度
alert(document.documentElement.clientHeight);
alert(document.documentElement.clientWidth);

滚动距离
document.body.scrollTop //chrome
document.documentElement.scrolltop //只兼容 IE

// 二、滚动距离
window.onclick = function (){
alert(document.body.scrollTop);
// alert(document.documentElement.scrollTop);
}
// 兼容写法
window.onclick = function (){
alert(document.body.scrollTop || document.documentElement.scrollTop);	
}

火狐
onscroll 事件
onresize 事件

window尺寸：

window.innerHeight-浏览器窗口的内部高度
window.innerWidth-浏览器窗口的内部宽度
window.outerHeight-浏览器窗口的外部高度
window.outerWidth-浏览器窗口的外部宽度
window方法：

window.open()-打开新的窗口
window.close()-关闭当前窗口
window.print()-打印当前窗口

<!--通过点击事件打开新页面-->
<button onclick="open1()">打开</button>
<button onclick="clos()">关闭</button>
<!--需连接设备-->
<button onclick="prin()">打印</button>
<script type="text/javascript">
    var iw = window.innerWidth;
    var ih = window.innerHeight;
    var ow = window.outerWidth;
    var oh = window.outerHeight;
    document.write("内部宽度" + iw + "内部高度：" + ih + "外部宽度：" + ow + "外部高度：" + oh);
	
    function open1() {
   		 //打开新页面
        window.open("demo01.html");
    }
    function clos() {
    	//关闭新页面
        window.close();
    }
   	function prin(){
   		//打印当前页面
		window.print();
	}
</script>

window弹框

window.alert("hello");
window.confirm("你确认吗?");
window.prompt("name","admin");

2.screen对象

screen对象包含有关用户客户端显示屏幕的信息
window.screen对象在编写时可以不使用window这个前缀

screen.availWidth 可用的屏幕宽度（不包括任务栏）
screen.availHeight可用的屏幕高度（不包括任务栏）
screen.width 屏幕总宽度
screen.heigh 屏幕总高度

var sw = screen.availWidth;// 可以这么用：screen.availWidth
var sh = window.screen.availHeight;// 可以这么用：screen.availHeight
var zw = window.screen.width;// 可以这么用：screen.width
var zh = window.screen.height;// 可以这么用：screen.height
document.write("屏幕宽度："+sw+"屏幕高度："+sh+"屏幕总宽度："+zw+"屏幕总高："+zh);

3.location对象

Location对象包含有关当前浏览器URL的信息

Location对象的属性
1. location.href: 返回完整的URL
2. location.host: 返回一个URL的主机名和端口
3. location.hostname: 返回URL的主机名
4. location.port: 返回WEB主机的端口（80或443）
5. location.protocol: 返回所使用的WEB协议
Location对象方法：
1. location.assign(url) 载入一个新的文档（打开新页面）
2. location.reload() 重新载入当前文档(页面刷新)
3. location.replace(url) 用新的文档替换当前文档（替换当前页面）

4.history对象

window.history对象包含浏览器的历史

history对象的属性：

length返回历史列表中的网址数
history对象的方法：

back(): 回退到history列表中的前一个URL 上一页
forward(): 加载history列表中的下一个URL 下一页
go(): 跳转到history列表中某个具体页面 历史页面跳转 history.go(-1) 跳回上一页