常用的对象BOM
一、window 对象
1、什么是bom
BOM 是 browser object model 的缩写，简称浏览器对象模型。主要处理浏览器窗口和框架，
描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作。
- 弹出新的浏览器窗口
- 移动、关闭浏览器详细信息的定位对象
- 提供Web浏览器详细信息的定位对象
- 提供用户屏幕分辨率详细信息的屏幕对象
- 对
cookie的支持 - IE 扩展了 BOM，加入了
ActiveXObject类，可以通过JavaScript实例化ActiveX对象
2、BOM 与 DOM （Document Object Model）的关系
JavaScript是通过访问 BOM 对象来访问、控制、修改浏览器。- BOM 的 window 包含了
document，因此通过 window 对象的document属性就可以访问、检索、修改文档内容与结构。 document对象又是 DOM 模型的根节点。因此，BOM 包含了 DOM，浏览器提供出来给予访问的是 BOM 对象，从 BOM 对象再访问到 DOM 对象，从而 js 可以操作浏览器以及浏览器读取到的文档。
3、BOM 对象包含以下内容
Window JavaScript层级中的顶层对象，表示浏览器窗口。Navigator包含客户端浏览器的信息。History包含了浏览器窗口访问过的 URL。Location包含了当前 URL 的信息。Screen包含客户端显示屏的信息。
4、重要的BOM
4.1.1、innerWidth 和 innerHeight
- innerheight 返回窗口的文档显示区的高度。
- innerwidth 返回窗口的文档显示区的宽度。
注意：使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度。
Window.innerheight // 返回窗口的文档显示区的高度
window.innerwidth // 返回窗口的文档显示区的宽度
4.1.2、outerWidth 和 outerHeight 属性
- outerHeight 属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
- outerWidth 属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）。
outerHeight,outerWidth返回是整个浏览器窗口所占用屏幕的长度和宽度。
Window.outerHeight // 浏览器窗口所占用屏幕的长度
window.outerWidth // 浏览器窗口所占用屏幕的宽度
4.2、pageXOffset 和 pageYOffset 属性
-
pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。
-
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
-
pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。
这些属性是只读的
window.pageXOffset
window.pageYOffset
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
div {
border: 1px solid black;
background-color: lightblue;
height: 2000px;
width: 2000px;
}
</style>
</head>
<body>
<p>点击按钮将文档窗口在水平和垂直方向各滚动 100px 。</p>
<button onclick="myFunction()" style="position:fixed;">点我滚动</button>
<br><br>
<div></div>
<script>
function myFunction() {
window.scrollBy(100, 100);
if (window.pageXOffset !== undefined) { // 所有浏览器，除了 IE9 及更早版本
alert("水平滚动: " + window.pageXOffset
+ ", 垂直滚动: " + window.pageYOffset);
} else { // IE9 及更早版本
alert("水平滚动: " + document.documentElement.scrollLeft
+ ", 垂直滚动: " + document.documentElement.scrollTop);
}
}
</script>
</body>
</html>
4.3、screenLeft、screenTop、screenX、screenY
- 只读整数。
- 声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。
- IE、Safari、Chrome 和 Opera 支持 screenLeft 和 screenTop，而 Chrome、Firefox 和 Safari 支持 screenX 和 screenY
window.screenLeft
window.screenTop
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script>
function openWin(){
myWindow=window.open('','');
myWindow.document.write("<p>这是'我的窗口'");
myWindow.document.write("<br>ScreenLeft: " + myWindow.screenLeft);
myWindow.document.write("<br>ScreenTop: " + myWindow.screenTop + "</p>");
}
</script>
</head>
<body>
<input type="button" value="打开 '我的窗口'" onclick="openWin()">
</body>
</html>
2、window 对象方法
1、alert()
显示带有一段消息和一个确认按钮的警告框。
alert(message)
2、blur() 和 focus()
把键盘焦点从顶层窗口移开。
window.blur();
window.focus();
例子
// blur
<html>
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.blur()
</script>
</body>
</html>
// focus();
<html>
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
</script>
</body>
</html>
3、 setTimeout() 和 clearTimeout()
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
setTimeout(code,millisec)
clearTimeout(id_of_settimeout)
例子
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount(){
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount(){
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>
4、 clearInterval() 和 setInterval()
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 clearInterval
setTimeout(code,millisec)
clearTimeout(id_of_settimeout)
例子
<html>
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock(){
var t=new Date()
document.getElementById("clock").value=t
}
</script>
<button onclick="int=window.clearInterval(int)">Stop interval</button>
</body>
</html>
5、scrollBy()和scrollTo()
scrollBy() 方法可把内容滚动指定的像素数。
scrollBy(xnum,ynum)
scrollTo(xpos,ypos)
例子
<html>
<head>
<script type="text/javascript">
function scrollWindowScrollBy(){
window.scrollBy(100,100)
}
function scrollWindowScrollTo(){
window.scrollTo(100,100)
}
</script>
</head>
<body>
<input type="button" onclick="scrollWindowScrollBy()" value="Scroll" />
<input type="button" onclick="scrollWindowScrollTo()" value="Scroll" />
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
</body>
</html>
三、Navigator 对象
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。虽然这个对象的
名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。
1 、Navigator 对象属性
1.1、cookieEnabled
返回指明浏览器中是否启用 cookie 的布尔值
navigator.cookieEnabled
例子
<html>
<body>
<script type="text/javascript">
document.write("<p>CookieEnabled: ")
document.write(navigator.cookieEnabled + "</p>")
</script>
</body>
</html>
1.2 userAgent
返回由客户机发送服务器的 user-agent 头部的值。
navigator.userAgent
例子
<html>
<body>
<script type="text/javascript">
document.write("<p>UserAgent: ")
document.write(navigator.userAgent + "</p>")
</script>
</body>
</html>
四、History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL
1 、History 对象属性
1.1、length
返回浏览器历史列表中的 URL 数量
history.length
例子
<html>
<body>
<script type="text/javascript">
document.write(history.length);
</script>
</body>
</html>
2 、History 对象方法
2.1 back()
加载 history 列表中的前一个 URL。
history.back()
例子
<html>
<head>
<script type="text/javascript">
function goBack(){
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()" />
</body>
</html>
2.2 forward()
加载 history 列表中的下一个 URL。
history.forward()
例子
<html>
<head>
<script type="text/javascript">
function goForward(){
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goForward()" />
</body>
</html>
2.3 go()
加载 history 列表中的某个具体页面
history.go(number|URL)
例子
<html>
<head>
<script type="text/javascript">
function go(){
window.history.go(-1);
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="go()" />
</body>
</html>
五、Location 对象
Location 对象包含有关当前 URL 的信息。
1 、Location 对象属性
当前小节，所有链接全部外链
| 属性 | 描述 |
|---|---|
| hash | 设置或返回从井号 (#) 开始的 URL（锚）。 |
| host | 设置或返回主机名和当前 URL 的端口号。 |
| hostname | 设置或返回当前 URL 的主机名。 |
| href | 设置或返回完整的 URL。 |
| pathname | 设置或返回当前 URL 的路径部分。 |
| port | 设置或返回当前 URL 的端口号。 |
| protocol | 设置或返回当前 URL 的协议。 |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分）。 |
2、Location 对象方法
1、assign()
assign()方法加载一个新的文档。
location.assign(URL)
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script>
function newDoc(){
window.location.assign("https://www.runoob.com")
}
</script>
</head>
<body>
<input type="button" value="载入新文档" onclick="newDoc()">
</body>
</html>
2、reload()
-
reload()方法用于刷新当前文档。
-
reload() 方法类似于你浏览器上的刷新页面按钮。
如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
location.reload();
/*
forceGet Boolean类型
可选。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档
*/
location.reload(forceGet)
3、replace()
replace() 方法可用一个新文档取代当前文档。
location.replace(newURL)
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script>
function replaceDoc(){
window.location.replace("https://www.runoob.com")
}
</script>
</head>
<body>
<input type="button" value="载入新文档替换当前页面" onclick="replaceDoc()">
</body>
</html>
六、screen 对象
1、screen 对象属性
1.1 availHeight 和 availWidth 属性
- availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
- availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
screen.availHeight
screen.availWidth
例子
<script>
document.write("可用高度: " + screen.availHeight);
document.write("可用宽度: " + screen.availWidth);
</script>
1.1 height 和 width 属性
- height 属性声明了显示浏览器的屏幕的高度，以像素计。
- width 属性声明了显示浏览器的屏幕的宽度，以像素计。
screen.height
screen.width
例子
<script>
document.write("总高度: " + screen.height);
document.write("总高度: " + screen.width);
</script>
可以关注一下
扫一扫
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
