Web之BOM基础

深入了解BOM

一.BOM常用对象介绍
BOM是运行在浏览器中的,所以提供了一系列对象用于和浏览器窗口进行交互，这些对象包括，window、document、location、navigator和screen。

window(整个JavaScript脚本运行的顶层对象)对象属性如下：

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

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

window对象的常用方法:

方法	用途
alert()、confirm()、prompt()	分别用于弹出警告窗口、确认对话框和提示输入对话框。
close()	关闭窗口
moveBy()、moveTo()	移动窗口
resizeBy()、resizeTo()	重设窗口大小
scrollBy()、scrollTo()	滚动当前窗口的HTML文档
open()	打开一个新的浏览器窗口加载新的URL所指向的地址,并可指定一系列新的属性,包括隐藏菜单等。
setInterval()、clearInterel()	设置、删除定时器

例子：

弹出一个确认框(confirm())：

//js代码
<script type="text/javascript">
	function Confirm() {
    
    
		var answer = confirm("是否退出");//带有确定和取消的按钮方法
		if (answer) {
    
    
			close(); //关闭浏览器的方法
		} else {
    
    
			alert(":-)");
		}
	}
</script>
//HTML代码
<input type="button" value="confirm" onclick="Confirm()">//οnclick="Confirm()调用Confirm()方法

弹出一个文本确认框(prompt() ):
点击确定则值为文本框里面的值，点击取消则值为null

//js代码
function Prompt() {
    
    
	var pro = prompt("请输入文字", "123");
	alert(pro);
}

//HMTL代码
<input type="button" value="prompt" onclick="Prompt()">

文本框改变(有些浏览器目前不支持moveBy()、moveTo()，resizeBy()、resizeTo()):

function MoveBy() {
    
    
	moveBy(50, 50); //每次点击向右向下移动50,第一个值向右，第二个值向下
}
function MoveTo() {
    
    
	moveTo(250, 250); //点击直接移动到那个位置,第一个值向右，第二个值向下
}
function ResizeBy() {
    
    
	resizeBy(50, 50); //每次点击文本框变宽50，变长50,第一个值为宽，第二个值为高
}
function ResizeTo() {
    
    
	resizeTo(250, 250); //点击文本框直接变宽50，变长50,第一个值为宽，第二个值为高
}

浏览器滚动(scrollBy()、scrollTo()):

 //js代码
function ScrollBy() {
    
    
	scrollBy(50, 50); //每次点击第一个向右滚动多少，第二个向下滚动多少.
}
function ScrollTo() {
    
    
	scrollTo(250, 250); //点击直接滚动到这个位置,第一个向右滚动多少，第二个向下滚动多少.
}

弹出一个新的网页(open())

//js代码
        //window.open(URL,name,features,replace)
function Open() {
    
    
	window.open("https://www.csdn.net/", "新的窗口","left=20,top=50");//第一个网址,第二个name一定要下去
}

设置定时器(setInterval()、clearInterel())

//js代码
var count = 0;
function Time() {
    
    
	var d = new Date();
	var hour = d.getHours();
	if (hour < 10) {
    
    
		hour = "0" + hour;
	}
	var minute = d.getMinutes();
	if (minute < 10) {
    
    
		minute = "0" + minute;
	}
	var second = d.getSeconds();
	if (second < 10) {
    
    
		second = "0" + second;
	}
	count++;
	if (count == 10) {
    
    
		window.clearInterval(t); //删除定时器
	}
	document.getElementById("display").innerHTML = hour + ":" + minute + ":" + second; //在HTML里面添加数据
}
var t = window.setInterval("Time()", 1000); //设置定时器，第一个为方法,第二个为定时时间。1000为每1秒调用一次

//HTML
<div id="display">
</div>

history对象常用方法:
History 对象包含用户（在浏览器窗口中）访问过的 URL。

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

//直接用history去调用就可以了
history.back();
history.forward();

location对象常用属性:
Location 对象包含有关当前 URL 的信息。

方法	用途
hostname	文档所在地址的主机名
href	文档所在地址的URL地址
host	文档所在地址的主机地址
port	文档所在地址的服务端口
pathname	文档所在地址的文件地址
protocol	装载该文档所使用的协议,例如HTTP;等

screen对象常用属性:

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

navigator对象常用属性:

方法	用途
appCodeName	浏览器代码名的字符串表示
appName	官方浏览器名的字符串表示
appVersion	浏览器版本信息的字符串表示
platform	浏览器所在计算机平台的字符串表示
userAgent	用户代理头的字符串表示
cookieEnabled	如果启用cookie返回true，否则返回false

例子:

//js代码
document.write("host name:" + location.hostname + "<br/>"); //文档所在地址的主机名
document.write("href:" + location.href + "<br/>"); //文档所在地址的URL地址
document.write("host address:" + location.host + "<br/>"); //文档所在地址的主机地址
document.write("port:" + location.port + "<br/>"); //文档所在地址的服务端口
document.write("protocol:" + location.protocol + "<br/>"); //装载该文档所使用的协议,例如HTTP;等
document.write("avaiHeight:" + screen.availHeight + "<br/>"); //窗口可以使用的屏幕高度，单位像素
document.write("avaiWidth:" + screen.availWidth + "<br/>"); //窗口可以使用的屏幕宽度，单位像素
document.write("colorDepth:" + screen.colorDepth + "<br/>"); //用户浏览器表示的颜色位数，通常为32位(每像素的位数)
document.write("appCodeName:" + navigator.appCodeName + "<br/>"); //浏览器代码名的字符串表示
document.write("appName:" + navigator.appName + "<br/>"); //官方浏览器名的字符串表示
document.write("appVersion:" + navigator.appVersion + "<br/>"); //浏览器版本信息的字符串表示
document.write("platform:" + navigator.platform + "<br/>"); //浏览器所在计算机平台的字符串表示
document.write("userAgent:" + navigator.userAgent + "<br/>"); //用户代理头的字符串表示
document.write("cookieEnabled:" + navigator.cookieEnabled + "<br/>"); //如果启用cookie返回true，否则返回false

效果如下：
在这里插入图片描述

深入了解BOM

猜你喜欢