10. JS BOM

方法	描述
alert()	弹出带有文本消息和一个确认按钮的警告框
prompt()	弹出可提示用户输入的对话框
confirm()	弹出带有文本消息及确认按钮和取消按钮的对话框
open()	打开一个新的浏览器窗口
close()	关闭浏览器窗口
print()	打印当前窗口的内容
focus()	把键盘焦点给予一个窗口
blur()	把键盘焦点从顶层窗口移开
moveBy(xnum, ynum)	相对窗口的当前坐标将对象移动指定的像素
moveTo(x, y)	把窗口的左上角移动到一个指定的坐标
resizeBy(w, h)	按照指定的像素调整窗口的大小
resizeTo(w, h)	将窗口的大小调整到指定的宽度和高度
scrollBy(xnum, ynum)	按照指定的像素值来滚动内容
scrollTo(x, y)	将内容滚动到指定的坐标
setInterval()	每隔指定的时间执行代码
setTimeout()	在指定的延迟时间之后来执行代码
clearInterval()	取消 setInterval() 的设置
clearTimeout()	取消 setTimeout() 的设置

方法解析：

`resizeBy(w, h)`：根据指定的像素来调整窗口的大小。

该方法定义指定窗口的右下角移动的像素，左上角将不会被移动(它停留在其原来的坐标)。
第一个参数是必需的，指定窗口宽度增加的像素数。
第二个参数可选，指定窗口高度增加的像素数。两个参数可为正数，也可为负数。

`resizeTo(w, h)`：用于把窗口大小调整为指定的宽度和高度。

该方法两个参数都是必需的，用来指定设置窗口的宽度和高度，以像素计。

`moveBy(xnum, ynum)`：可相对窗口的当前坐标把它移动指定的像素。

第一个参数指定要把窗口右移的像素数
第二个参数指定要把窗口下移的像素数。

`moveTo(x, y)`：可把窗口的左上角移动到一个指定的坐标。

第一个参数指定窗口新位置的 x 坐标
第二个参数指定窗口新位置的 y 坐标。

`scrollBy(xnum, ynum)`：可把内容滚动指定的像素数。

第一个参数指定把文档向右滚动的像素数
第二个参数指定把文档向下滚动的像素数。

`scrollTo(x, y)`：可把内容滚动到指定的坐标。

第一个指定要在窗口文档显示区左上角显示的文档的 x 坐标
第二个参数指定要在窗口文档显示区左上角显示的文档的 y 坐标。

(1) 打开窗口 --> open()

open() 方法可用于打开新窗口。
语法：window.open(url,target,param)
- url：要打开的地址。
- target：新窗口的位置。可以是：_blank 、_self 、 _parent 父框架。
- param：新窗口的一些设置。
- 返回值：新窗口的句柄。

常用的窗口设置参数（param）：

参数	值	说明
name		新窗口的名称，可以为空
features		属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
fullscreen	yes/no/1/0	是否全屏，默认no
channelmode	yes/no/1/0	是否显示频道栏，默认no
toolbar	yes/no/1/0	是否显示工具条，默认no
location	yes/no/1/0	是否显示地址栏，默认no。（有的浏览器不一定支持）
directories	yes/no/1/0	是否显示转向按钮，默认no
status	yes/no/1/0	是否显示窗口状态条，默认no
menubar	yes/no/1/0	是否显示菜单，默认no
scrollbars	yes/no/1/0	是否显示滚动条，默认yes
resizable	yes/no/1/0	是否窗口可调整大小，默认no
width	number	窗口宽度（像素单位）
height	number	窗口高度（像素单位）
top	number	窗口离屏幕顶部距离（像素单位）
left	number	窗口离屏幕左边距离（像素单位）

注意：各个参数之间用逗号隔开就行，但我们最好是把它们统一放到json里

(2) 关闭窗口 --> close()

window.close() 方法可用于关闭当前窗口。

//点击按钮关闭当前窗口
<input type="button" value="关闭窗口" onclick="window.close()">

实例：检查新窗口是否已关闭

<input type="button" value="打开" onclick="openWin()">
<input type="button" value="关闭" onclick="closeWin()">
<input type="button" value="是否关闭" onclick="checkWin()">
<p id="p1"></p>

var newWin;
function openWin(){
		newWin = window.open('', '', 'width=400,height=300,top=200');
}

function closeWin(){
		if(newWin){ // 新窗口关闭
				newWin.close();
		}
}

var oP = document.getElementById('p1');
function checkWin(){
		if(!newWin){
				oP.innerHTML = '新窗口还没被打开！';
		}
		else{
				if(newWin.closed){ 
						oP.innerHTML = '新窗口已关闭！';
				}
				else{
						oP.innerHTML = '新窗口未关闭！';
				}
		}    
}

兼容性问题：

FF：禁止设置关闭浏览器的代码
Chrome：默认直接关闭
IE：询问用户是否关闭

(3) 弹出框

1. 警告框

警告框常用于确保用户可以得到某些信息，平时我们在访问网页的时候，有时突然弹出一个小窗口，上面写这一些提示文字，这就是警告框，在警告框出现之后，用户必须点击确定按钮后才能继续操作，否则就不能对网页做出任何操作。这样的弹出窗口是用'alert'实现的。
语法：alert(str或var);

2. 确认框

确认框常用于验证用户是否接受操作，允许用户做出选择，当确认框弹出时，用户可以点击”确定“或者”取消“来确定用户操作，当用户点击确定时，返回值为 ture，如果点击取消，则返回值为 false。用户在点击对话框之前不能进行任何操作。这样的弹出窗口是用'confirm'实现的。
语法：confirm(str);

3. 提示框

提示框也叫提问框，用于提示用户在进入页面前输入某个值，主要是询问一些需要与用户交互的信息，提示框包含一个确定、取消按钮，和一个文本框，当提示框弹出后，用户需要输入某个值，然后点击确定或者取消才能继续操作，当用户点击确认时，返回值为文本框输入的值，如果用户点击取消，则返回值为null。提示框可以和确认框相互配合使用。这样的弹出窗口是用'prompt'实现的。
语法：prompt(str1, str2);
- str1 为要显示在对话框的值，也就是与用户交互的内容描述，不可修改。
- str2 为文本框中提示用户输入的默认内容，可以修改。

一般情况下，在实际的网站中，这些对话框都很少或者说几乎不使用，尤其是警告框，因为用户会反感这种突然弹出来的东西，在弹出对话框后用户不点击按钮之前，浏览器就跟死了一样，不能做任何操作，确认框和提示框相对来说还有一些使用，也是比较有意义的，比如页面中一个跳转按钮，如果不使用确认对话框，则直接跳转到新页面，使用确认对话框之后，用户可以点击确认或者取消来执行对应操作，确认则跳转新页面，取消则继续浏览，有时候这个跳转按钮或者链接是用户不小心点到的，并不希望跳转。大部分网站中，都使用的是一套自定义的对话框，更友好的显示。

三、location 对象（页面地址）

location 将 URL 解析成独立的片段，让开发人员可以通过不同的属性访问这些片段。

(1) location 对象属性

属性名	例子	说明
hash	`"#contents"`	返回URL中的hash（#号后跟零或多个字符），如果URL中不包含散列，则返回空字符串
host	`"www.wrox.com:80"`	返回服务器名称和端口号（如果有）
hostname	`"www.wrox.com"`	返回不带端口号的服务器名称
href	`"http:/www.wrox.com"`	返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值
pathname	`"/WileyCDA/"`	返回URL中的目录和（或）文件名
port	`"8080"`	返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串
protocol	`"http:"`	返回页面使用的协议。通常是http:或https:
search	`"?q=javascript"`	返回URL的查询字符串。这个字符串以问号开头

var URL = 'http://localhost:8080/index.html#text?q=test';
console.log(location.hash); //#text?q=test
console.log(location.host); //localhost:8080
console.log(location.hostname); //localhost
console.log(location.href); //http://localhost:8080/index.html#text?q=test
console.log(location.pathname); ///index.html
console.log(location.port); //8080
console.log(location.protocol); //http:
console.log(location.search);''

location.href 属性举例：

实例：点击盒子时，进行跳转

// <div>smyhvae</div>

var div = document.getElementsByTagName("div")[0];

div.onclick = function () {
    location.href = "http://www.baidu.com";   //点击div时，跳转到指定链接
//     window.open("http://www.baidu.com","_blank");  //方式二
}

实例：5秒后自动跳转到百度

setTimeout(function () {
    location.href = "http://www.baidu.com";
}, 5000);

(2) location 对象方法

使用 location 对象可以通过很多方式来改变浏览器的位置

location.assign()：改变浏览器地址栏的地址，并记录到历史中
- 设置location.href 就会调用assign()。一般使用location.href 进行页面之间的跳转。
location.replace()：替换浏览器地址栏的地址，不会记录到历史中
location.reload()：重新加载

四、navigator 对象（浏览器信息）

window.navigator 对象获取包含有关访问者浏览器的信息

属性	说明
appCodeName	浏览器名称[所有浏览器都返回Mozilla]
userAgent	浏览器的用户代理字符串
appVersion	浏览器版本
appMinorVersion	次版本信息[IE返回0，chrome和firefox不支持]
platform	浏览器所在的系统平台[所有浏览器都返回Win32]
plugins	浏览器中安装的插件信息的数组
mimeTypes	在浏览器中注册的MIME类型数组
language	浏览器主语言[IE10-不支持，其他浏览器返回zh-CN]
systemLanguage	操作系统语言[IE返回zh-CN，chrome和firefox不支持]
userLanguage	操作系统默认语言[IE返回zh-CN，chrome和firefox不支持]
product	产品名称[IE10-不支持，其他浏览器返回Gecko]
productSub	产品次要信息[IE不支持，chrome返回20030107，firefox返回20100101]
vendor	浏览器品牌[chrome返回Google Inc.，IE和firefox不支持]
onLine	是否连接因特网[IE根据实际情况返回true或false，chrome和firefox始终返回true]
cookieEnabled	表示cookie是否启用[所有浏览器都返回true]
javaEnabled	是否启用java[IE8-浏览器返回{}，其他浏览器返回function javaEnabled()]
buildID	浏览器编译版本[firefox返回20170125094131，chrome和IE不支持]
cpuClass	计算机使用的CPU类型[IE返回x86，chrome和firefox不支持]
oscpu	操作系统或使用的CPU[firefox返回Windows NT 10.0; WOW64，chrome和IE不支持]

其中最常用的属性是 navigator.userAgent，返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)，是识别浏览器的关键，可用于获取当前浏览器版本信息，判断浏览器的类型。

实例：简单的判断浏览器类型

document.write('操作平台：' + navigator.platform);
function userBrowser(){
		var name = window.navigator.userAgent;
		//IE浏览器
		//判断IE和非IE可以使用ActiveXObject，只有IE支持该对象
		//在IE中window.ActiveXObject返回一个对象，则判断为true
		//其他浏览器都返回undefine，两个否返回false，进入或判断，也返回false
		if(!!window.ActiveXObject || 'ActiveXObject' in window){
				return 'IE浏览器';
		}
		//FF浏览器
		else if(name.indexOf('Firefox') > -1){
				return 'Firefox浏览器';
		}
		//Chrome浏览器
		else if(name.indexOf('Chrome') > -1){
				return 'Chrome浏览器';
		}
		//Opera浏览器
		else if(name.indexOf('Opera') > -1){
				return 'Opera浏览器';
		}
		//Safari浏览器
		else if(name.indexOf('Safari') > -1){
				return 'Safari浏览器';
		}
		else{
				return 'unknow';
		}
}
alert('浏览器类型为：' + userBrowser());

五、工作区尺寸

(1)、可视区宽度和高度

获取浏览器窗口尺寸（浏览器的视口，不包括工具栏和滚动条）的方法

①、IE9 以上及现在浏览器都支持：

window.innerWidth   // 获取浏览器窗口的内部宽度
window.innerHeight  // 获取浏览器窗口的内部高度

②、对于IE9之前可以用：

document.documentElement.clientWidth/clientHeight
- 标准模式下，任意浏览器都兼容
document.body.clientWidth/clientHeight
- 适用于怪异模式下的浏览器
浏览器的渲染模式：标准模式、怪异模式

html上加上就是启动标准模式

html上不加就是启动怪异模式，比如如果IE7启动了怪异模式，那么它的渲染语法规则就是IE6的语法

查看浏览器处于什么模式：document.compatMode//css1Compat（标准模式）/BackCompat（怪异模式）

封装兼容性方法，返回浏览器可视窗口尺寸：getViewportOffset()

// 解决不兼容问题：
function getViewPortOffset () {
    if(window.innerWidth) {
        return{
            w : window.innerWidth,
            h : window.innerHeight
        }
    }else{
        if(document.compatMode === "BackCompat") {
            return{
                w : document.body.clientWidth,
                h : document.body.clientHeight
            }
        }else{
            return{
                w : document.documentElement.clientWidth,
                h : document.documentElement.clientHeight
            }
        }
    }

(2)、实际网页尺寸

scrollHeight 和 scrollWidth，获取网页内容高度和宽度。

scrollHeight 和 scrollWidth 还可获取 DOM 元素中内容实际占用的高度和宽度。

在 IE 下 scrollHeight 是网页内容实际高度，可以小于 clientHeight。在 FF 下 scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

在不同浏览器都可以使用的兼容写法：

var w =document.documentElement.scrollWidth || document.body.scrollWidth;
var h =document.documentElement.scrollHeight || document.body.scrollHeight;

//兼容性写法
var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;
document.write('网页内容宽为：' + w + '<br>' + '网页内容高为：' + h);

(3)、包含滚动条的网页尺寸

`offsetHeight` 和 `offsetWidth`，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

offsetHeight = clientHeight(内容可视区高度) + 滚动条 + 边框。

//兼容性写法
var w = document.documentElement.offsetWidth || document.body.offsetWidth;
var h = document.documentElement.offsetHeight || document.body.offsetHeight;
document.write('网页内容宽为：' + w + '<br>' + '网页内容高为：' + h);

(4)、获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置

getBoundingClientRect();
该方法返回一个对象，对象里面有 left，top，right，bottom 等属性。left 和 top 代表该元素左上角的 x 和 y 坐标，right 和 bottom 代表元素右下角的 x 和 y 坐标。
height 和 width 属性老版本 IE 并未实现。
返回的结果并不是“实时的”。

var box=document.getElementById('box');         // 获取元素
 
console.log(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离
 
console.log(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离
 
console.log(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离
 
console.log(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

(5)、查看元素的位置

offsetTop：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶部位置，当前对象到其上级顶部的距离，或者距离页面顶部的距离。
offsetLeft：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，当前对象到其上级左端的距离，或者距离页面左端的距离。
offsetTop 和 offsetLeft 不能赋值，设置对象到页面顶部的距离可用 style.top 属性，设置对象到页面左部的距离请用 style.left 属性。
offsetParent：页面中设置 postion 属性(relative、absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到 HTML 的 body。该属性用于获取一个元素用于定位的父级，语法：obj.offsetParent

(6)、滚动距离

所谓滚动距离，就是可视区距离页面顶部滚动了多远，也叫网页卷去的距离。

scrollTop：设置或获取位于对象最顶端与窗口中可见内容的最顶部之间的距离，也就是网页被滚动的高度。
scrollLeft：设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，也就是网页被滚动的宽度。
eg：利用 scrollBy(x,y) 快速阅读的功能

实例：滚动页面，点击页面查看滚动距离

// <body style="height:2000px">

//几款浏览器每次滚动，距离顶部的距离都不一样：
//在Chrome为100：0-100-200-300-400-500。都是整数递进。
//而在FF下则为132：0-132-264-396-528。每次递进132。
//而在IE下则为62：0-62-124-186-248。每次递进则为62。
window.onload = function (){
    document.onclick = function (){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        alert(scrollTop);
    };
};

// 拖动滚动条后，点击页面会弹出距离顶部的距离。

实例：文档自动滚动阅读

<!DOCTYPE html>
<html>
<head>
<style>
		body {background-color: aliceblue;}
		.content{width:80%;height:auto;margin:0 auto;}
		.layer {
				width: 120px;
				height: 210px;
				position: fixed;
				top: 50%;
				right: 0;
				margin-top: -105px;
				background-color: aliceblue;
				cursor: pointer;
				opacity: 0.77;
		}
		#autoReading, #stop, #goBack {
				height: 70px;
				width: 100px;line-height:70px;font-weight:bold;font-size:20px;text-align:center;
		}
</style>
</head>

<body>
<div class="layer">
		<div id="autoReading">自动阅读</div>
		<div id="stop">停止</div>
		<div id="goBack">返回顶部</div>
</div>    
<div class="content">
		超长文档.....
</div>

<script>
		var autoReading = document.getElementById('autoReading');
		var stop = document.getElementById('stop');
		var goBack = document.getElementById('goBack');
		var timer = 0;
		var key=true;
		autoReading.onclick = function () {
				if (key){
						timer = setInterval(function () {
								scrollBy(0, 100);
						}, 1000);
						key = false;
				}            
		}
		stop.onclick = function () {
				clearInterval(timer);
				key = true;
		}
		goBack.onclick = function () {
				scrollTo(0,0);
		}
</script>
</body>
</html>

(7)、查看滚动条的滚动距离

window.pageXOffset：设置或返回当前页面相对于窗口显示区左上角的 X 位置
window.pageYOffset：设置或返回当前页面相对于窗口显示区左上角的 Y 位置
得到的数值就是（横向或者竖直）滚动条滚动的距离
IE8 及 IE8 以下不兼容
解决兼容问题就用 document.body/documentElement.scrollLeft/scrollTop
兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值。
document.body.scrollLeft/scrollTop如果有值，那么documentElement.scrollLeft/scrollTop一定为 0 。

封装函数滚动条滚动的距离：getScrollOffSet ()

// 解决不兼容问题：
function getScrollOffSet () {
	if(window.pageOffset) {
		return {
	    	x : window.pageXOffset,
	    	y : window.pageYOffset
	    }
	}else{
		return {
	    	x : document.body.scrollLeft + documentElement.scrollLeft,
	    	y : document.body.scrollTop + documentElement.scrollTop
	    }
	}
}

六、history 对象（浏览器历史纪录）

window.history 对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退导航的功能。
从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的 window 对象关联。
语法：window.history.[属性|方法]

(1)、History 对象属性

历史记录不唯一，所以该对象具有 length 属性，可返回浏览器历史列表中的 URL 数量。

(2)、History 对象方法

①、history.back()
- 加载 history 列表中的前一个URL，就是返回前一个页面，与浏览器点击后退按钮功能相同。
- 该方法等同于：history.go(-1);
②、history.forward()
- 加载 history 列表中的下一个 URL。就是返回下一个页面，与浏览器的前进按钮功能相同。
- 该方法等同于：history.go(1);
③、history.go(num)
- 根据当前所处的页面，加载 history 列表中的某个具体的页面。
- 参数说明：
  - 1 为前一个，go(1 等价 forward()。0 为当前页面。-1 下一个页面，后一个，go(-1) 等价 back()。
  - 也可为其他数值，指定要访问的 URL 在 History 的 URL 列表中的相对位置。
  - 比如：history.go(-2);　　返回当前页面之前浏览过的第二个历史页面，相当于点击2次后退按钮。
  - history.go(3);　　返回当前页面之后浏览过的第三个历史页面。

用的不多，因为浏览器左上角已经自带了这些功能的按钮

posted @ 2019-07-16 14:27 胤小飞阅读(131) 评论(0) 收藏举报

刷新页面返回顶部

打开窗口 --> open()

关闭窗口 --> close()

弹出框

一、BOM 简介

所谓的 BOM 即浏览器对象模型（Browser Object Model）。BOM 赋予了 JS 操作浏览器的能力，即 window 操作。DOM 则用于创建删除节点，操作 HTML 文档。

BOM的结构图：

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；

document 对象，文档对象；

location 对象，浏览器当前URL信息；

navigator 对象，浏览器本身信息；

screen 对象，客户端屏幕信息；

history 对象，浏览器访问历史信息；

二、window对象（窗口操作）

window 对象方法：

方法解析：

resizeBy(w, h)：根据指定的像素来调整窗口的大小。

resizeTo(w, h)：用于把窗口大小调整为指定的宽度和高度。

moveBy(xnum, ynum)：可相对窗口的当前坐标把它移动指定的像素。

moveTo(x, y)：可把窗口的左上角移动到一个指定的坐标。

scrollBy(xnum, ynum)：可把内容滚动指定的像素数。

scrollTo(x, y)：可把内容滚动到指定的坐标。

(1) 打开窗口 --> open()

常用的窗口设置参数（param）：

注意：各个参数之间用逗号隔开就行，但我们最好是把它们统一放到json里

(2) 关闭窗口 --> close()

实例：检查新窗口是否已关闭

兼容性问题：

(3) 弹出框

1. 警告框

语法：alert(str或var);

2. 确认框

语法：confirm(str);

3. 提示框

语法：prompt(str1, str2);

三、location 对象（页面地址）

location 将 URL 解析成独立的片段，让开发人员可以通过不同的属性访问这些片段。

(1) location 对象属性

location.href 属性举例：

实例：点击盒子时，进行跳转

实例：5秒后自动跳转到百度

(2) location 对象方法

使用 location 对象可以通过很多方式来改变浏览器的位置

location.assign()：改变浏览器地址栏的地址，并记录到历史中

location.replace()：替换浏览器地址栏的地址，不会记录到历史中

location.reload()：重新加载

四、navigator 对象（浏览器信息）

window.navigator 对象获取包含有关访问者浏览器的信息

其中最常用的属性是 navigator.userAgent，返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)，是识别浏览器的关键，可用于获取当前浏览器版本信息，判断浏览器的类型。

实例：简单的判断浏览器类型

五、工作区尺寸

(1)、可视区宽度和高度

获取浏览器窗口尺寸（浏览器的视口，不包括工具栏和滚动条）的方法

①、IE9 以上及现在浏览器都支持：

②、对于IE9之前可以用：

封装兼容性方法，返回浏览器可视窗口尺寸 ：getViewportOffset()

(2)、实际网页尺寸

scrollHeight 和 scrollWidth，获取网页内容高度和宽度。

scrollHeight 和 scrollWidth 还可获取 DOM 元素中内容实际占用的高度和宽度。

在 IE 下 scrollHeight 是网页内容实际高度，可以小于 clientHeight。在 FF 下 scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

在不同浏览器都可以使用的兼容写法：

(3)、包含滚动条的网页尺寸

offsetHeight 和 offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

offsetHeight = clientHeight(内容可视区高度) + 滚动条 + 边框。

(4)、获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置

(5)、查看元素的位置

offsetParent：页面中设置 postion 属性(relative、absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到 HTML 的 body。该属性用于获取一个元素用于定位的父级，语法：obj.offsetParent

(6)、滚动距离

所谓滚动距离，就是可视区距离页面顶部滚动了多远，也叫网页卷去的距离。

实例：滚动页面，点击页面查看滚动距离

实例：文档自动滚动阅读

(7)、查看滚动条的滚动距离

window.pageXOffset：设置或返回当前页面相对于窗口显示区左上角的 X 位置

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

IE8 及 IE8 以下不兼容

封装函数滚动条滚动的距离：getScrollOffSet ()

六、history 对象（浏览器历史纪录）

window.history 对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退导航的功能。

从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的 window 对象关联。

语法：window.history.[属性|方法]

(1)、History 对象属性

`resizeBy(w, h)`：根据指定的像素来调整窗口的大小。

`resizeTo(w, h)`：用于把窗口大小调整为指定的宽度和高度。

`moveBy(xnum, ynum)`：可相对窗口的当前坐标把它移动指定的像素。

`moveTo(x, y)`：可把窗口的左上角移动到一个指定的坐标。

`scrollBy(xnum, ynum)`：可把内容滚动指定的像素数。

`scrollTo(x, y)`：可把内容滚动到指定的坐标。

`location.assign()`：改变浏览器地址栏的地址，并记录到历史中

`location.replace()`：替换浏览器地址栏的地址，不会记录到历史中

`location.reload()`：重新加载

封装兼容性方法，返回浏览器可视窗口尺寸：getViewportOffset()

`offsetHeight` 和 `offsetWidth`，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

offsetParent：页面中设置 postion 属性(relative、absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到 HTML 的 body。该属性用于获取一个元素用于定位的父级，语法：`obj.offsetParent`

`window.pageXOffset`：设置或返回当前页面相对于窗口显示区左上角的 X 位置

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