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.availWidthfunction 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 属性指定的父坐标的计算顶端位置。offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。offsetHeight
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。clientHeight
获取对象的高度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。clientLeft
获取 offsetLeft 属性和客户区域的实际左边之间的距离。clientTop
获取 offsetTop 属性和客户区域的实际顶端之间的距离。clientWidth
获取对象的宽度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。SCROLL属性
scroll
设置或获取滚动是否关闭。scrollHeight
获取对象的滚动高度。scrollLeft
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。scrollTop
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。scrollWidth
获取对象的滚动宽度。event属性
x
设置或获取鼠标指针位置相对于父文档的 x 像素坐标。screenX
设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标offsetX
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。clientX
设置或获取鼠标指针位置相对于窗口客户区域的 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.posTopIE:有。
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:双线凹凸边框IE:border:2px outset;。
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080。
Location
该对象包含了关于当前的URL信息
属性
属性 | 描述 |
---|---|
hash | 设置或返回从井号 (#) 开始的 URL(锚) |
host | 设置或返一个URL的主机名和端口 |
hostname | 设置或返URL的主机名 |
href | 设置或返完整的URL |
pathname | 设置或返的URL路径名。 |
port | 设置或返回一个URL服务器使用的端口号 |
protocol | 设置或返回一个URL协议 |
search | 设置或返回从问号 (?) 开始的 URL(查询部分) |
console.log(location.hash);//#main
有锚点的就会打印出锚点后的东西
方法
属性 | 描述 |
---|---|
assign() | 加载新的文档。跟href一样,可以跳转页面 |
replace() | 用新的文档替换当前文档。替换当前页面,不记录历史,不可以后退 |
reload() | 重新加载当前文档。相当于点击刷新按钮刷新F5,如果参数为true,相当于ctrl+F5强制刷新 |
location.assign('https://www.baidu.com/');
navigator
该对象是包含有关浏览器的信息。
window.navigator 接口表示用户代理的状态和标识。
对象属性
属性 | 说明 |
---|---|
appCodeName | 返回浏览器的代码名 |
language | 浏览器使用的语言 |
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
platform | 返回运行浏览器的操作系统平台(不是自己电脑系统) |
userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
拓展navigator.geolocation()基本不用,出于隐私保护。
screen
关于屏幕对象的信息
Screen 对象属性,一台设备浏览器所有的页面都是只读一个设备上的屏幕信息,是一样的
属性 | 描述 |
---|---|
availHeight | 返回显示屏幕的高度 (除 Windows 任务栏之外)。 |
availWidth | 返回显示屏幕的宽度 (除 Windows 任务栏之外)。 |
bufferDepth | 设置或返回调色板的比特深度。 |
colorDepth | 返回目标设备或缓冲器上的调色板的比特深度。 |
deviceXDPI | 返回显示屏幕的每英寸水平点数。 |
deviceYDPI | 返回显示屏幕的每英寸垂直点数。 |
fontSmoothingEnabled | 返回用户是否在显示控制面板中启用了字体平滑。 |
height | 返回显示屏幕的高度。 |
logicalXDPI | 返回显示屏幕每英寸的水平方向的常规点数。 |
logicalYDPI | 返回显示屏幕每英寸的垂直方向的常规点数。 |
pixelDepth | 返回显示屏幕的颜色分辨率(比特每像素)。 |
updateInterval | 设置或返回屏幕的刷新率。 |
width | 返回显示器屏幕的宽度。 |
History
属性
属性 | 描述 |
---|---|
length | 返回浏览器历史列表中的 URL 数量。 |
方法
方法 | 描述 |
---|---|
back() | 加载 history 列表中的前一个 URL。 |
forward() | 加载 history 列表中的下一个 URL。 |
go() | 加载 history 列表中的某个具体页面参数为索引也就是历史记录中(-1)的前一张或者后一张(1)页面。 |
history.back();//返回上一层
今天的文章Brower对象分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/65456.html