JavaScript关于BOM的初步学习

最新推荐文章于 2024-07-19 15:13:24 发布

脱缰的小马哥

最新推荐文章于 2024-07-19 15:13:24 发布

阅读量250

点赞数

分类专栏： Harvest_Every_Day 文章标签： javascript BOM

本文链接：https://blog.csdn.net/DearMa/article/details/52853170

版权

Harvest_Every_Day 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、什么是BOM？

BOM-JavaScript是运行在浏览器中的，所以提供了一系列对象用于和浏览器窗口进行交互，这些对象主要包括window、document、location、navigator和screen等。通常通常统称为浏览器对象模型（Brower Object Model）。

二、BOM模型中常用的对象

1、window对象

window对象是整个JavaScript脚本运行的顶层对象，它的常用属性如下：

document	返回该窗口装载的HTML文档
location	返回该窗口装载的HTML文档的URL
navigtor	返回浏览当前页面的浏览器，包含一些列的浏览器属性，包括名称、版本号和平台等。
screen	返回当前浏览者屏幕对象
history	返回该浏览器窗口历史

这些属性都是window对象的子对象，每个子对象内部也提供了各自的属性和方法来进行对浏览器的操作。
window对象的常用方法：

alert()、confiem()、prompt()	分别用于弹出警告窗口、确认对话框和提示输入对话框
close()	关闭窗口不同的浏览器有不同的效果，实测谷歌 IE Edge
moveBy()、moveTo()	移动窗口谷歌、Edge不可用、IE可用
resizeBy()、resizeTo()	重设窗口大小谷歌不可用、Edge、IE可用
scrollBy()、scrollTo()	滚动当前窗口的HTML文档三个浏览器均可用
open()	打开一个新的浏览器窗口加载新的URL所指向的地址，并可指定一系列新的属性，包括隐藏菜单等。
setInterval()、clearInteral()	设置、删除定时器

小代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function testconfirm()
		{
			var answer=window.confirm("是否退出");
			if (answer) 
			{
				//window.alert("bye");
				window.close();
			}else
			{
				window.alert("0.0");
			}
		}
		function testprompt()
		{
			var res=window.prompt("请输入密码","123");
			alert(res);
		}
		function testmoveBy()
		{
			window.moveBy(50,50);    //window.moveBy(向右移,向下移);
		}
		function testmoveTo()
		{
			window.moveTo(350,350);    
		}
		function testresizeBy()
		{
			window.resizeBy(50,50);    
		}
		function testresizeTo()
		{
			window.resizeTo(350,350);    
		}
		function testscrollBy()
		{
			window.scrollBy(50,50);    
		}
		function testscrollTo()
		{
			window.scrollTo(350,350);    
		}
		function testopen()
		{
			window.open("https://www.baidu.com/","baidu","left=50,top=100,width=400,height=400,location=no,status=no,resizable=no,toolbar=no");   //谷歌、Edge可以改变大小 IE可以 
		}
		var count=0;
		function showTime()
		{
			var time=new Date();
			var hour=time.getHours();
			if (hour<10) {hour="0"+hour;}
			var minute=time.getMinutes();
			if (minute<10) {hour="0"+minute;}
			var second=time.getSeconds();
			if (second<10) {second="0"+second;}
			document.getElementById("display").innerHTML=hour+":"+minute+":"+second;
			count++;
			if (count==10) {
				window.clearInterval(t);
			}
		}
		var t=window.setInterval("showTime()",1000);
	</script>
</head>
<body>
	<input type="button" value="confirm" οnclick="testconfirm()">
	<input type="button" value="prompt" οnclick="testprompt()">
	<input type="button" value="moveBy" οnclick="testmoveBy()">
	<input type="button" value="moveTo" οnclick="testmoveTo()">
	<input type="button" value="resizeBy" οnclick="testresizeBy()">
	<input type="button" value="resizeTo" οnclick="testresizeTo()">
	<input type="button" value="scrollBy" οnclick="testscrollBy()">
	<input type="button" value="scrollTo" οnclick="testscrollTo()">
	<input type="button" value="open" οnclick="testopen()">
	<div id="display"></div>
	<pre>
		在这里插入大量内容使之滚动
	</pre>
</body>
</html>

2、history对象

history 对象常用方法如下

back()	后退到上一个浏览器页面，如果页面是第一个打开的，则无效果
forward()	前进到下一个浏览页面，如果该页面是第一个打开的，则无效果
go(intValue)	该方法可指定前进或者后退多少个页面，正前进、负后退

3、screen对象常用属性如下：

avaiHeight	窗口可以使用的屏幕高度，单位像素
avaiWidth	窗口可以使用的屏幕宽度，单位像素
colorDepth	用户浏览器表示的颜色位数，通常为32位（每像素的位数）

4、navigator对象常用属性如下：
appCodeName 浏览器代码名的字符串表示
appName 官方浏览器名的字符串表示
appVersion
浏览器版本信息的字符串表示
platform 浏览器所在计算机平台的字符串表示
userAgent 用户代理头的字符串表示
cookieEnabled 如果启用cookie返回true，否则返回false

该对象属性均可通过php中某些方法获得

脱缰的小马哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript关于BOM的初步学习

一、什么是BOM？BOM-JavaScript是运行在浏览器中的，所以提供了一系列对象用于和浏览器窗口进行交互，这些对象主要包括window、document、location、navigator和screen等。通常通常统称为浏览器对象模型（Brower Object Model）。二、BOM模型中常用的对象1、window对象 window对象是整个JavaScript
复制链接

扫一扫

专栏目录