跨浏览器用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浏览器支持screenLeft和scrennTop,但是不支持screenX和screenY

跨浏览器获取大小

var width = window.innerWidth;      //window.必须有,因为IE不支持
var height = window.innerHeight;        //如果支持inner的,那么就使用它,

//不支持的就是用document对象的方法

if (typeof width != ‘number‘) {
    if (document.compatMode == ‘CSS1Compat‘) {
        width = document.documentElement.clientWidth; //标准ie
        height = document.documentElement.clientHeight;
    } else {   //非标准ie
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-08-07 11:08:51

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

javascript获取窗口位置、绝对位置、事件位置等

有段时间没更新博客了,工作实在太忙了,加班加班再加班就是我们这个行业的常态吧...还好最近把工作进度完成了,终于有些空余时间了.关于<Javascript高级程序设计>系列,我并没有弃坑,只不过最近在把这本书读第二遍,主要针对一些第一遍没看懂的部分,完成之后我会继续更新的. 这篇文字主要一下三方面内容: 一.javascript获取事件位置 二.Javascript获取dom对象位置 三.Javascript获取绝对坐标 四.浏览器相对桌面位置 一.javascript获取事件位置 首先上图,

构建自动化、跨浏览器的 JavaScript 单元测试

我们都知道在多个浏览器中测试我们的代码是多么的重要.至少在我们发布第一个项目的时候,我认为我们在网络开发社区做大部分工作还是相当不错的. 我们做的不够好的工作是测试代码时每一次做出的改变. 我个人对此感到很惭愧.我已经把"学习如何构建自动化.跨浏览器的JavaScript的单元测试"列在我的年度to-do清单中,但我每一次坐下来真正想要做的时候,我又退却了.虽然我肯定这一部分原因是因为我的懒惰,同时我认为这也是由于缺乏良好的可用信息在这个主题上. 有许多工具和框架(例如 Karma)宣

Javascript获取页面、屏幕尺寸大小参数

Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.

JavaScript获取页面、屏幕尺寸大小

转载:http://www.cnblogs.com/rushoooooo/archive/2011/05/01/2033670.html Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHei

JavaScript获取DOM元素位置和尺寸大小

在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientL

Range对象理解,浏览器兼容性,获取鼠标光标位置

一.关于浏览器的兼容性 目前主要有3种关于range的类似的对象,分别是W3C range 对象,Mozzlia selection ,ie TextRange 关于这三种的区别,请查看文档 http://www.quirksmode.org/dom/w3c_range.html 这里面对这三个是说的很清楚的 可以看出 Mozilla 的 range 是一个selection对象 ,而在ie下 range 是一个 text Range 这个和Mozilla是完全不同的,所以需要为这两种类型的ra

JavaScript获取DOM元素位置和尺寸

每一个HTML元素都有下列属性: offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientLeft scrollLeft offsetTop clientTop scrollTop 首先,要理解HTML元素的实际内容可能会比分配给这个元素容纳内容的盒子要大,比如说一段很长的文字,把它放在了一个固定长宽的盒子里面,因此可能会出现滚动条. 1.clientHeight和cl

浏览器中用JavaScript获取剪切板中的文件

本文转自我的个人网站  , 原文地址:http://www.zoucz.com/blog/2016/01/29/get-file-from-clipboard/  ,欢迎前往交流讨论 在网页上编辑内容时,有时候需要插入图片,一般的做法是: 从网络上下载图片至本地 or 截图保存至本地 在编辑器中点击图片上传按钮,选择本地文件,等待上传完成 将上传好的图片链接插入编辑器中 这样做太麻烦了,我比较喜欢的操作是开着QQ或者其他的一些截图工具,截图-粘贴 .为了这样做我们需要在浏览器中获取剪切板中的文件

VUE 获取窗口改变时的大小

mounted() { const that = this; window.onresize = function temp() { that.clientHeight = `${document.documentElement.clientHeight}`; console.log(that.clientHeight) }; }, 原文地址:https://www.cnblogs.com/zhuwu/p/8366367.html