Brower对象

大家好，欢迎来到IT知识分享网。

Browser –浏览器对象模型

window是BOM的核心

window对象表示

window下有很多的方法和属性：

它表示当前你打开的窗口，如果是用的frme或者iframe标签包含了一个页面的时候，会创建一个文档下的window对象。

下边是浏览器的一些参数

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight (html下获取浏览器高度，xhtml下获取元素总高度)
网页可见区域高：document.documentElement.clientHeight (xhtml下获取浏览器高度)
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

function SelfXY(){

var yScrolltop;
var xScrollleft;
if (self.pageYOffset || self.pageXOffset) {

yScrolltop = self.pageYOffset;
xScrollleft = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){ // Explorer 6 Strict
yScrolltop = document.documentElement.scrollTop;
xScrollleft = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScrolltop = document.body.scrollTop;
xScrollleft = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScrollleft + event.clientX ,yScrolltop + event.clientY)
return arrayPageScroll;
}

附:鼠标及对象坐标控制属性
offsetTop
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

offsetHeight
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

clientHeight
获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

SCROLL属性
scroll
设置或获取滚动是否关闭。

event属性
x
设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

IE与FireFox的兼容性问题（JoeCom整理–未完待续）

window.event

IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=doMouseMove(event)
鼠标当前坐标

IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：两者都有event.clientX和event.clientY属性。
鼠标当前坐标(加上滚动条滚过的距离)

IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。
标签的x和y的坐标位置：style.posLeft 和 style.posTop

IE：有。
FF：没有。
通用：object.offsetLeft 和 object.offsetTop。
窗体的高度和宽度

IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用：document.body.clientWidth和document.body.clientHeight。
添加事件

IE：element.attachEvent(“onclick”, func);。
FF：element.addEventListener(“click”, func, true)。
通用：element.οnclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick 只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如： element.attachEvent(“onclick”, func1);element.attachEvent(“onclick”, func2)这样func1和func2都会被执行。
标签的自定义属性

IE：如果给标签div1定义了一个属性value，可以div1.value和div1[“value”]取得该值。
FF：不能用div1.value和div1[“value”]取。
通用：div1.getAttribute(“value”)。
父节点、子节点和删除节点

IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。
画图

IE：VML。
FF：SVG。
CSS：透明

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
CSS：圆角

IE：不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;。
CSS：双线凹凸边框

Location

该对象包含了关于当前的URL信息

属性

console.log(location.hash);//#main 有锚点的就会打印出锚点后的东西 

方法

location.assign('https://www.baidu.com/'); 

navigator

该对象是包含有关浏览器的信息。

window.navigator 接口表示用户代理的状态和标识。

对象属性

拓展navigator.geolocation()基本不用，出于隐私保护。

screen

关于屏幕对象的信息

Screen 对象属性，一台设备浏览器所有的页面都是只读一个设备上的屏幕信息，是一样的

History

属性

方法

history.back();//返回上一层