跨浏览器确定窗口的大小

如何实现跨浏览器确定窗口的大小:

在IE9+,Firefox,Safari,Opera,Chrome浏览器中均提供了4个属性,innerWidth,innerHeight,outerWidth,outerHeight;,这几个值在不同的浏览器情况下的定义是不同的

,而要获得视口的大小,有两种方法:

在IE,Safari,Opera Chrome,中,document.documentElement.clientWidth和document.documentElement.clientHeight  保存了页面视口的信息,在IE6之中,这些属性必须在标准模式下才起作用,如果是混杂模式,必须通过document.body.clientwidth   document.body.clentHeight来获取视口信息

而对于Chrome而言,这两种方式都可以取到视口的大小

,要实现在各个浏览器中都能实现可靠的实现,兼容代码如下:

 var pageWidth=window.innerWidth,
     pageHeight=window.innerHeight;
        if(typeof pageWidth!="number"){//检查pageWidth中保存的是不是一个数值,如果不是,通过检查document.compatMode来确定是否处于标准模式
            if(document.compatMode=="CSS1Compat"){//如果处于标准模式,则通过documentElement调用
                pageWidth=document.documentElement.clientWidth;
                pageHeight=document.documentElement.clientHeight;
            }else{//否则,通过document.body来确定
                pageWidth=document.body.clientWidth;
                pageHeight=document.body.clientHeight;
            }
        }

  通过这段代码获取的视口大小,可以实现对于不同浏览器的兼容

,2,通过resizeTo(),resizeBy(),可以实现调整浏览器窗口的大小

时间: 2024-10-05 20:43:46

跨浏览器确定窗口的大小的相关文章

跨浏览器获取窗口位置

IE.Safari.Opera.Chrome都提供了 screenLeft 和 screenTop属性分别表示窗口相对于屏幕左边和上边的位置. Firefox.Safari.Chrome在 screenX 和 screenY 中提供相同的窗口信息. Opera支持 screenX 和 screenY 属性,但与 screenLeft 和 screenTop 属性并不对应,故不要在Opera中使用 screenX 和 screenY . 使用以下代码可以跨浏览器获取窗口位置: 1 var left

跨浏览器用javascript获取窗口的位置和大小

跨浏览器获取位置 var leftX = typeof window.screenLeft == 'number' ? window.screenLeft : window.screenX; var topY = typeof window.screenTop == 'number' ? window.screenTop : window.screenY; firefox浏览器不支持screenLeft和scrennTop,但是支持screenX和screenY:ie浏览器支持screenLef

Selenium2学习-021-WebUI自动化实战实例-019-设置浏览器窗口位置大小

前文简略讲述了如何获取浏览器窗口的位置和大小,此文讲述如何通过 webdriver 设置浏览器窗口的位置和大小. 直接上码了...... 1 /** 2 * Set browser size for expected setting 3 * 4 * @author Aaron.ffp 5 * @version V1.0.0: autoSeleniumDemo main.aaron.sele.core SeleniumCore.java setBrowserSize, 2015-7-28 01:1

jq 监听调整浏览器窗口的大小

<html><head><script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script><script type="text/javascript">x=0;$(document).ready(function(){$(window).resize(function() {

牛人推荐的跨浏览器兼容性总结

牛人推荐的跨浏览器兼容性总结 [复制链接]        发送短消息 UID2427精华4积分239共享分12442 威望1285 查看公共资料 搜索主题 搜索帖子 灵雨飘零  技术总监 组别管理员 生日帖子470精华4积分239共享分12442 威望1285 在线时间28275注册时间2013-11-24  1# 字体大小: t T  发表于 2013-12-26 08:27 |只看楼主 一. CSS样式兼容 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多

跨浏览器resize事件分析

resize事件 原生事件分析 window一次resize事件: IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次 Chrome 触发1次 FF 触发2次 Opera 触发1次 Safari 触发1次 场景分析 window resize时,部分组件需要重置大小(一次):部分组件不需要重置大小: 开源库分析 jquery-resize 优点:使用简便 $('#div1').on('resize', function (e) { console.log('[div1

EventUtil——跨浏览器的事件对象

前言:什么是EventUtil? 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 本文将围绕着EventUtil对象展开,并提供该通用对象代码以作参考分享 文章主要内容参考书籍为<JavaScript高级程序设计>([美]Nicholas C.Z

处理一些常见的跨浏览器封装的函数

//跨浏览器获取视口大小 function getInner(){ if(typeof window.innerWidth!='undefined'){ return{ width:window.innerWidth, height:window.innerHeight } }else{ return{ width:document.documentElement.clientWidth, height:document.documentElement.clientHeight } }} //跨

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板. Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中. 然后把在你要使用复制功能的页面中引入Zero