JS入门

跨浏览器确定窗口大小

字号+ 作者: 来源: 2014-11-16 22:15 我要评论( )

Firefox、Safari、Opera和Chrome均为此提供了4个属性:innerWidth、innerHeight、outerWidth和outerHeight。在Safari和firefox中,outerWidth和outerHeight返回浏览器窗口本身尺寸(无论是从最外层的window对戏那个还是从某个框架访问)。在Opera中,这两个属性的值表示页面视图容器的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小(减去边框宽度)。在Chrome中,outerWidth、outerHeight与innerWidth、innerHeight返回相同的值,即视口大小而非浏览器窗口大小。

IE没有提供取得当前浏览器窗口尺寸的属性;不过,它通过DOM提供了页面可见区域的相关信息。

在IE以及Firefox、Safari、Safari、Opera和Chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息。在IE6中,这些属性必须在标准模式下才有效;如果是混杂模式,就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。而对于混杂模式下的Chrome,则无论通过document.documentElement还是document.body中的clientWidht和clientHeight属性,都可以取得视口的大小。

虽然最终无法确定浏览器窗口本身的大小,但却可以取得页面视口的大小,如下所示:

var pageWidth = window.innerWidth,
 pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
 if (document.compatMode == "CSS1Compat") {
 pageWidth = document.documentElement.clientWidth;
 pageHeight = document.documentElement.clientHeight;
 } else {
 pageWidth = document.body.clientWidth;
 pageHeight = document.body.clientHeight;
 }
}

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用javascript生成的植物显示过程特效

    使用javascript生成的植物显示过程特效

    2015-06-06 16:26

  • javascript 杂谈之哪种写法你更喜欢?

    javascript 杂谈之哪种写法你更喜欢?

    2014-11-16 22:15

  • 面向对象的JavaScript

    面向对象的JavaScript

    2014-11-16 22:15

  • Javascript模板引擎性能对比及几点优化

    Javascript模板引擎性能对比及几点优化

    2014-11-16 22:15

网友点评
s