Question

为什么这段代码可以在Safari和Chrome中运行而不是IE或FF？

JS

function load(){
    w.value = window.outerWidth;
    h.value = window.outerHeight;
}

HTML

<input name="h" id="h" type="hidden" value="" />
<input name="w" id="w" type="hidden" value="" />

Click here for the entire page's source code

提前感谢您的帮助。

编辑：我弄清楚出了什么问题。必须将以下内容添加到加载函数

var width = document.getElementById("w");
var height = document.getElementById("h");
width.value = window.outerWidth;
height.value = window.outerHeight;

Answer 1

Internet Explorer使用不同的属性来存储窗口大小。进入Internet Explorer clientWidth / Height是内部窗口大小（减去滚动条，菜单等使用的像素），试试

function load(){
  if(window.outerHeight){
      w.value = window.outerWidth;
      h.value = window.outerHeight;
  }
  else {
      w.value = document.body.clientWidth;
      h.value = document.body.clientHeight; 
  }
}

Answer 2

使用支持几乎所有浏览器的jQuery方法。

function load(){
    w.value = $(window).width();
    h.value = $(window).height();
}

参考：width()，height()

Answer 3

如果您使用的是jQuery，那么我建议您使用.width()和.height()，因为它们可以跨浏览器正常运行。 IE 8及以下版本不支持window.outerWidth。

以下是window.outerWidth的一些优秀文档：https://developer.mozilla.org/en/DOM/window.outerWidth

使用.width()和.height()将返回无单位数字（以像素为单位），如果您想获得精确的高度/宽度设置（包括px或{{ 1}}）然后您可以使用em和.css('width')。

用于检测浏览器宽度和高度的JS适用于Chrome＆amp; Safari但不是IE9或FF9

3 个答案: