BOM（12）

时间 2019-11-17

标签 bom 繁體版

原文原文链接

1、BOM是什么？

BOM（Browser Object Model）即浏览器对象模型。

BOM提供了独立于内容而与浏览器窗口进行交互的对象；

因为BOM主要用于管理窗口与窗口之间的通信，所以其核心对象是window；

BOM由一系列相关的对象构成，而且每一个对象都提供了不少方法与属性；

BOM缺少标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

2、学习BOM学什么？

咱们将学到与浏览器窗口交互的一些对象；例如能够移动、调整浏览器大小的window对象；能够用于导航的location对象与history对象；能够获取浏览器、操做系统与用户屏幕信息的navigator与screen对象；能够使用document做为访问HTML文档的入口，管理框架的frames对象等。浏览器

BOM结构图bash

3、1.Window对象

window对象是js中的顶级对象，全部定义在全局做用域中的变量、函数都会变成window对象的属性和方法，在调用的时候能够省略window。（它表明一个浏览器窗口或一个框架，会在每次出现时被自动建立。）框架

（1）window对象属性 属性表示状态，方法表示动做函数

window :窗户自身, window=window.self ；性能

document（文档对象） :表示给定浏览器窗口的HTML文档；学习

history（历史对象） :包含有关客户访问过的URL信息；ui

window.location //URL地址,配备布置这个属性能够打开新的页面；
spa

location（位置对象） :包含有关当前URL的信息；操作系统

screen （显示器对象）:包含有关客户端的屏幕和显示性能的信息；（案例：制做屏幕保护）3d

status : 设置或检索窗口底部的状态栏中的消息；

name :设置或检索窗口或框架的名称；

parent:返回父窗口；

top :返回最顶层的先辈窗口；

navigator（导航器对象） :对Navigator对象的只读引用；

defaultStatus :设置或返回窗口状态栏中的默认文本；

innerheight :返回窗口的文档显示区的高度；

innerwidth :返回窗口的文档显示区的宽度；

outerheight :返回窗口的外部高度；

outerwidth :返回窗口的外部宽度；

pageXoffset :设置或返回当前页面相对于窗口显示区左上角的X位置；

pageYOffset :设置或返回当前页面相对于窗口显示区左上角的Y位置；

（2）window的对象方法

window.close(); /关闭窗口

open()打开一个新的浏览器窗口或查找-个已命名的窗口。

<button>百度</button>
<button>关闭窗口</button>
<button>刷新</button>
<script>
	var bt1=document.getElementsByTagName('button')[0];
	bt1.onclick=function(){
		//location.href="http://www.baidu.com";//地址栏发生变化，在当前页面
		window.open("http://www.baidu.com")//打开一个新的网页
	}
	var bt2=document.getElementsByTagName('button')[1];
	bt2.onclick=function(){
		window.close();//关闭当前窗口；只有一个页面时，浏览器也会自动关闭
	}
	var bt3=document.getElementsByTagName('button')[2];
	bt3.onclick=function(){
		location.reload();//刷新
	}
</script>复制代码

window.history.go(-1); //访问浏览器窗口的历史,负数为后退,正数为前进

window.history. back();//同上

window.history.forward(); //同上

<button>返回</button>
<button>前进</button>
<script>
	var bt1=document.getElementsByTagName('button')
	bt1.onclick=function(){
		//history.back();//返回上一个网页
		history.go(-1);
	}
	bt2.onclick=function(){
		//history.forward();//前进到上一个网页
		history.go(1);
	}
</script>
复制代码

window.setTimeout("alert(' xX)", 1000); /设置在指定的毫秒数后执行指定的代码，接受2个参数,要执行的代码和等待的毫秒数

window clearTimeout("ID"); /取消还未执行的暂停,将暂停ID传递给它

window.setlnteral(function, 1000); 无限次地每隔指定的时间段重复一次指定的代码,参数同setTimeout()- -样

setlnterval()按照指定的周期(以毫秒计)来调用函数或计算表达式。

setTimeout(方法秒数)在指定的毫秒数后调用函数或计算表达式。

clearlnterval()取消由setinterval() 设置的timeout。

clearTimeout()取消由setTimeout()方法设置的timeout。

screen :包含有关客户端的屏幕和显示性能的信息；

screen.width 屏幕的宽度属性 screen.height 屏幕的高度属性

<style>
	*{
		padding: 0;
		margin: 0;
	}
	.box{		
		background-color: orange;
		margin-top: 50px;
		position: absolute;
	}
</style>
<body>
<div class="box" style="top: 0;left: 0;width: 200px;height: 150px;"></div>
<!-- 图片有天生的width属性，div没有， -->
<script>
	//console.log(screen.width);//屏幕的宽度属性
	//console.log(screen.height);//屏幕的高度属性
	var box=document.getElementsByClassName('box')[0];
	var x=parseInt(box.style.left);
	var Width=parseInt(screen.width)-parseInt(box.style.width);
	var y=parseInt(box.style.top);
	var Height=parseInt(screen.height)-parseInt(box.style.height)
	window.onload=function(){
		var index=true;//定义一个新的变量index，控制方向，true向右，fasle向左
		var index1=true;
		function move(){
			if (index) {//向右
				x++
				box.style.left=x+"px";
				if (x>Width) {
					index=false;
				}
			}else{//向左
				x--
				box.style.left=x+"px";
				if (x<=0) {
					index=true;
				}
			}
			if (index1) {//向下
				y++
				box.style.top=y+"px";
				if (y>Height) {
					index1=false;
				}
			}else{//向上
				y--
				box.style.top=y+"px";
				if (y<=0) {
					index1=true;
				}
			}
		}
		var t=setInterval(move,1);
	}
</script>
复制代码

关键思想：引入第三方变量index控制方向，true向右，false向左

浏览器刷新页面的几种方法：

history.go(0) ;
location.reload(); 
location=location ;
location.assign(location) ;
document.execCommand('Refresh'); 
window.navigate(location) ;
location.replace(location) ;
document.URL=location.href;复制代码