如何获取windowWidth、windowHeight、pageWidth、pageHeight、screenWidth、screenHeight、pageX、pageY、screenX、screenY,这些都可以在所有主要浏览器中使用?
当前回答
您还可以获得窗口的宽度和高度,避免浏览器工具栏和其他东西。这是浏览器窗口中的真正可用区域。
为此,请使用:window.innerWidth和window.inerHeight财产(请参阅w3schools上的文档)。
在大多数情况下,这将是最好的方式,例如,显示一个完全居中的浮动模式对话框。它允许您计算窗口上的位置,无论使用浏览器的分辨率方向或窗口大小如何。
其他回答
function wndsize(){
var w = 0;var h = 0;
//IE
if(!window.innerWidth){
if(!(document.documentElement.clientWidth == 0)){
//strict mode
w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
} else{
//quirks mode
w = document.body.clientWidth;h = document.body.clientHeight;
}
} else {
//w3c
w = window.innerWidth;h = window.innerHeight;
}
return {width:w,height:h};
}
function wndcent(){
var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
//IE
if(!window.pageYOffset){
//strict mode
if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
//quirks mode
else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
//w3c
else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');
您可以使用Screen对象获取此信息。
以下是它将返回的内容的示例:
Screen {
availWidth: 1920,
availHeight: 1040,
width: 1920,
height: 1080,
colorDepth: 24,
pixelDepth: 24,
top: 414,
left: 1920,
availTop: 414,
availLeft: 1920
}
要获得screenWidth变量,只需使用screen.width,与screenHeight相同,只需选择screen.height。
要获取窗口宽度和高度,请分别为screen.availWidth或screen.avail height。
对于pageX和pageY变量,请使用window.screenX或Y。请注意,这是从非常左/最左/最上的屏幕开始的。因此,如果您有两个宽度为1920的屏幕,那么右屏幕左侧500px的窗口的X值将为2420(1920+500)。然而,screen.width/height显示当前屏幕的宽度或高度。
要获取页面的宽度和高度,请使用jQuery的$(window).height()或$(window).width()。
再次使用jQuery,为pageX和pageY值使用$(“html”).offset().top和$(“html”).ooffset().left。
如果您需要一个真正防弹的文档宽度和高度解决方案(图片中的pageWidth和pageHeight),您可能需要考虑使用我的插件jQuery.documentSize。
它只有一个目的:即使在jQuery和其他方法失败的情况下,也始终返回正确的文档大小。尽管有jQuery的名字,但您不必使用它——它是用普通的Javascript编写的,也可以在没有jQuery的情况下使用。
用法:
var w = $.documentWidth(),
h = $.documentHeight();
用于全局文档。对于其他文档,例如在您有权访问的嵌入式iframe中,将文档作为参数传递:
var w = $.documentWidth( myIframe.contentDocument ),
h = $.documentHeight( myIframe.contentDocument );
更新:现在也更新窗口尺寸
从1.1.0版开始,jQuery.documentSize还处理窗口维度。
这是必要的,因为
$(window).height()在iOS中有缺陷,以至于没有用$(window).width()和$(window).height()在移动设备上不可靠,因为它们无法处理移动缩放的效果。
jQuery.documentSize提供了$.windowWidth()和$.windowHeight()来解决这些问题。有关更多信息,请查看文档。
获取可用屏幕维度的非jQuery方法。window.screen.width/height已经发布,但为了响应Web设计和完整性,我认为值得提及这些属性:
alert(window.screen.availWidth);
alert(window.screen.availHeight);
http://www.quirksmode.org/dom/w3c_cssom.html#t10 :
availWidth和availHeight-屏幕(不包括OS任务栏等)。
您还可以获得窗口的宽度和高度,避免浏览器工具栏和其他东西。这是浏览器窗口中的真正可用区域。
为此,请使用:window.innerWidth和window.inerHeight财产(请参阅w3schools上的文档)。
在大多数情况下,这将是最好的方式,例如,显示一个完全居中的浮动模式对话框。它允许您计算窗口上的位置,无论使用浏览器的分辨率方向或窗口大小如何。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求