取得窗口大小 兼容所有浏览器的js代码

取得窗口大小的代码：


代码如下:

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

我们首先把window.innerWidth和window.innerHeight的值分别付给了pageWidth和pageHeight。然后检查pageWidth中保存的是不是一个数值；如果不是，则通过document.compatMode来确定页面是否处于标准模式。如果是，则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否则，就使用document.body.clientWidth和document.body.clientHeight的值。
取得窗口位置的代码：


代码如下:

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

　
这两个例子目的是取得窗口左边和上边的位置，首先运用二元操作符判断screenLeft属性和screenTops属性是否存在，如果存在（在IE、Safari、Opera和Chrome中），则取这两个属性的值。如果不存在（在Firefox中），则取screenX和screenY的值。

赞 (0)

相关推荐

  • 取得窗口大小 兼容所有浏览器的js代码

    取得窗口大小的代码: 复制代码 代码如下: var pageWidth = window.innerWidth, var pageHeight = window.innerHeight; if(typeof pageWidth != "number"){ if(document.compatMode == "number"){ pageWidth = document.documentElement.clientWidth; pageHeight = documen

  • window.close(); 关闭浏览器窗口js代码的总结介绍

    window.close(); 关闭浏览器窗口js代码的总结介绍 序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome, safari Opera Close 2 window.opener=null; window.open('','_self'); window.close();   firefox IE7,Opera, chrome,safari Close 3 window.open('','_self'); win

  • 浏览器检测JS代码(兼容目前各大主流浏览器)

    本文实例介绍了JS代码实现浏览器检测,分享给大家供大家参考,具体内容如下 var BrowserMatch = { init: function () { this.browser = this.getBrowser().browser || "An Unknown Browser"; this.version = this.getBrowser().version || "An Unknown Version"; this.OS = this.getOS() ||

  • 兼容主流浏览器的JS复制内容到剪贴板

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值"clipboard=..",

  • JavaScript 实现完美兼容多浏览器的复制功能代码

    分享一段利用 JavaScript 实现复制功能的代码,兼容多浏览器,兼容IE和火狐浏览器. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript 复制功能代码,兼容多浏览器&l

  • 完美兼容多浏览器的js判断图片路径代码汇总

    第一种方式 //检查图片是否存在 function CheckImgExists(imgurl) { var ImgObj = new Image(); //判断图片是否存在 ImgObj.src = imgurl; //没有图片,则返回-1 if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) { alert(imgurl + '存在'); } else { alert(imgurl +

  • 监控用户是否关闭浏览器的js代码

    监控用户是否关闭浏览器的js代码

    test function RunOnBeforeUnload() { window.event.returnValue = '关闭浏览器将退出系统.'; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 效果如下所示: 当wondow.event.returnValue为空的时候,这个选择提示框是不会出现的. 可是问题又来了:假如我希望用户点击"确定"按钮关闭浏览器的时候能够保存用户相关数据.那么我又应该怎么做呢?看来只有用onunload参数了. 将上面的代码修改如下

  • 兼容多浏览器的JS 浮动广告[推荐]

    兼容多浏览器的JS 浮动广告[推荐]

    漂浮广告是我们经常用到的广告形式,站长的必备代码,相信你一定能用得上. JS浮动广告 img{border:0;} function addEvent(obj,evtType,func,cap){ cap=cap||false; if(obj.addEventListener){ obj.addEventListener(evtType,func,cap); return true; }else if(obj.attachEvent){ if(cap){ obj.setCapture(); re

  • 兼容所有浏览器的js复制插件Zero使用介绍

    这里需要三个插件,分别是: jquery.js ZeroClipboard.js ZeroClipboard.swf 祝你好运! 复制代码 代码如下: <meta charset="utf-8" /> <button id="d_clip_button" data-clipboard-target="fe_text" >点击复制</button> <input id="fe_text"

  • 判断浏览器的js代码

    JS 判断浏览器 var browser=navigator.appName var b_version=navigator.appVersion var version=parseFloat(b_version) document.write("Browser name: "+ browser) document.write(" ") document.write("Browser version: "+ version) document.w

随机推荐