使用原生js得到页面相关的正确参数
2011-04-22 18:30
393 查看
这是一篇总结性质的日志。目的是使用原生js得到页面的总宽度,高度,左上角坐标,鼠标落点的绝对和相对坐标。
需要兼容的浏览器有IE6,IE8,FF4,Chrome 10,Safari 5,Opera 11。
解释一下为什么不测试Chrome,Safari这些浏览器更早的版本。一是因为他们历代版本在这方面改动不大,基本向后兼容。二是,这些浏览器在中国占有率和使用率都太低了。
下面是总结:
目的:得到页面总宽度
document.body.scrollWidth:全部正确
document.documentElement.scrollWidth:全部正确
document.body.clientWidth:全部正确
目的:得到页面总高度
document.body.scrollHeight:除IE外都正确
document.documentElement.scrollHeight:全部正确
document.body.clientHeight:全部正确
看来同一批属性在高度和宽度问题上表现并不一致。
目的:得到窗口宽度
self.innerWidth:除IE系列都正确
document.documentElement.clientWidth:全部正确
目的:得到窗口高度
self.innerHeight
document.documentElement.clientHeight
测试结果同上,第二个全部正确
目的:得到窗口左上角绝对坐标Top
document.body.scrollTop:WebKit内核浏览器正确
document.documentElement.scrollTop:其他内核浏览器正确
这两个属性在所有浏览器里都有定义,只是一个正确另一个恒为0。用Math.max取值即可。
目的:得到窗口左上角绝对坐标Left
document.body.scrollLeft
document.documentElement.scrollLeft
结果同上。
目的:得到鼠标点击坐标相对窗口原点坐标X,Y
这个没什么争议,用event.clientX。
目的:得到鼠标点击坐标相对文档原点坐标X,Y
event.offsetX:除FF,其他都正确
event.pageX:除IE系列,全部正确
---------------------总结分割线-------------------------
也许你发现网上其他类似的测试,得出的结论不太一样。可能其他测试结论种对某些值的检测用了更复杂的条件判断。他们不一定对,也不一定错,而我也只是在我所有的浏览器里做了测试,只保证他们在我的浏览器里值是统一的。
所以,结论仅供参考。
需要兼容的浏览器有IE6,IE8,FF4,Chrome 10,Safari 5,Opera 11。
解释一下为什么不测试Chrome,Safari这些浏览器更早的版本。一是因为他们历代版本在这方面改动不大,基本向后兼容。二是,这些浏览器在中国占有率和使用率都太低了。
下面是总结:
目的:得到页面总宽度
document.body.scrollWidth:全部正确
document.documentElement.scrollWidth:全部正确
document.body.clientWidth:全部正确
目的:得到页面总高度
document.body.scrollHeight:除IE外都正确
document.documentElement.scrollHeight:全部正确
document.body.clientHeight:全部正确
看来同一批属性在高度和宽度问题上表现并不一致。
目的:得到窗口宽度
self.innerWidth:除IE系列都正确
document.documentElement.clientWidth:全部正确
目的:得到窗口高度
self.innerHeight
document.documentElement.clientHeight
测试结果同上,第二个全部正确
目的:得到窗口左上角绝对坐标Top
document.body.scrollTop:WebKit内核浏览器正确
document.documentElement.scrollTop:其他内核浏览器正确
这两个属性在所有浏览器里都有定义,只是一个正确另一个恒为0。用Math.max取值即可。
目的:得到窗口左上角绝对坐标Left
document.body.scrollLeft
document.documentElement.scrollLeft
结果同上。
目的:得到鼠标点击坐标相对窗口原点坐标X,Y
这个没什么争议,用event.clientX。
目的:得到鼠标点击坐标相对文档原点坐标X,Y
event.offsetX:除FF,其他都正确
event.pageX:除IE系列,全部正确
---------------------总结分割线-------------------------
page={ width:document.documentElement.clientWidth, height:document.documentElement.clientHeight, totalWidth:document.documentElement.scrollWidth, totalHeight:document.documentElement.scrollHeight, top:Math.max(document.body.scrollTop,document.documentElement.scrollTop), left:Math.max(document.body.scrollLeft,document.documentElement.scrollLeft) };
也许你发现网上其他类似的测试,得出的结论不太一样。可能其他测试结论种对某些值的检测用了更复杂的条件判断。他们不一定对,也不一定错,而我也只是在我所有的浏览器里做了测试,只保证他们在我的浏览器里值是统一的。
所以,结论仅供参考。
相关文章推荐
- 使用原生js得到页面相关的正确参数
- 在一个页面文件中(JSP 或者HTML)使用href 跳转另一个页面时使用Js中获取传递过来的参数
- 如何使用js来实现通过href完成多个html页面之间的传递参数
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- HTML页面使用JS获取地址栏参数
- 使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- 有的网站的相关内容必须要在登录后才可以查看,其登录信息保存在session变量之中。这样,使用asphttp等组件就难以正确得到所要的信息。
- jQuery.cookie.js使用方法及相关参数解释
- Chrome浏览器使用js刷新页面后参数丢失。
- js : 在使用母版页时,在前台js中得到子页面中的控件的id
- iOS与H5交互 H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回
- js获取src请求 得到一个参数和多个参数写法(这是集中网上的多个方法,自己cv过去就可以使用)
- 使用js获取当前页面地址栏参数的两种方法
- 使用原生js的scrollTop,刷新进入页面定位到某一个dom元素
- 使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
- 原生JS 购物车及购物页面的cookie使用方法
- js中使用jquery获取页面中参数并保存在数组中
- 使用原生js实现页面蒙灰(mask)效果示例代码
- 在使用母版页时,在前台js中得到子页面中的控件的id