如何获得Chrome浏览器的可视区域左上角的屏幕坐标，IE中可用的属性不行-CSDN论坛

如何获得Chrome浏览器的可视区域左上角的屏幕坐标，IE中可用的属性不行

Web 开发 > JavaScript

收藏回复

[问题点数：50分，结帖人showbo]

⋅没有使用NAT的前提下，TCP长连接长时间无数据被断开是哪个网络设备的问题 ⋅Linux下使用命令行修改IP后，如何强制当前的所有网络连接断开重连 ⋅如何获得Chrome浏览器的可视区域左上角的屏幕坐标，IE中可用的属性不行 更多帖子 关注私信空间博客 9527 等级 本版专家分：0 结帖率 100%: 在IE中，我使用window.screenLeft和window.screenTop来获得浏览器的可视区域的左上角坐标，通过他可以得到网页中的任何元素的绝对坐标，进而使用C++程序进行截屏处理
但是在Chrome中window.screenTop代表的是包含菜单栏、地址栏在内的浏览器区域的左上角坐标，举例来说，就是如果把浏览器全屏最大化，在Ie中window.screenTop获得的值是非零的，而Chrome获得是零。
请问大家有什么方法可以得到这个实际可视区域的绝对屏幕坐标，非常感谢

2016-09-02 14:02:22

点赞只看楼主引用举报楼主收起

展开阅读全文

⋅没有使用NAT的前提下，TCP长连接长时间无数据被断开是哪个网络设备的问题 ⋅Linux下使用命令行修改IP后，如何强制当前的所有网络连接断开重连 ⋅如何获得Chrome浏览器的可视区域左上角的屏幕坐标，IE中可用的属性不行 更多帖子 关注私信空间博客 9527 等级 本版专家分：0: 走过路过，不要错过啊

2016-09-02 15:45:33

点赞只看TA 引用举报 #1得分 0

⋅[砖]脆皮大雪糕 ⋅[砖]山雨。 ⋅水区都要关了，我要这分数有何用 更多帖子 关注私信空间博客 囧 等级 本版专家分：38433 勋章 银牌 2019年4月总版技术专家分月排行榜第二 红花 2019年4月 Web 开发大版内专家分月排行榜第一 黄花 2019年8月 Web 开发大版内专家分月排行榜第二 2018年11月 Web 开发大版内专家分月排行榜第二 蓝花 2019年7月 Web 开发大版内专家分月排行榜第三 2019年5月 Web 开发大版内专家分月排行榜第三 2019年3月 Web 开发大版内专家分月排行榜第三

screen.availHeight - window.innerHeight

2016-09-02 16:38:49

点赞只看TA 引用举报 #2得分 40

⋅博客的富文本编辑器把html标签中 onclick 等事件的第一个字符 o 给自动改成了ο（编码是03BF），正常的 o 编码是006F

⋅用网站论坛的移动版发的图片都只有缩略图没有原图

⋅为什么我在问答区的回答总是莫名的消失？

更多帖子

关注私信空间博客

天际的海浪

等级

本版专家分：164170

勋章

签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！

GitHub 绑定GitHub第三方账户获取

进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年总版技术专家分年内排行榜第七

银牌 2019年1月总版技术专家分月排行榜第二

可以通过事件对象event的鼠标坐标来计算



<script type="text/javascript">

function getScreen(e) {

    var x = e.screenX - e.clientX;

    var y = e.screenY - e.clientY;

        alert("X坐标：" + x + ",Y坐标：" + y);

    }

</script>

<input type="button" onclick="getScreen(event)" value="测试" />

2016-09-02 17:35:12

点赞只看TA 引用举报 #3得分 10

⋅没有使用NAT的前提下，TCP长连接长时间无数据被断开是哪个网络设备的问题 ⋅Linux下使用命令行修改IP后，如何强制当前的所有网络连接断开重连 ⋅如何获得Chrome浏览器的可视区域左上角的屏幕坐标，IE中可用的属性不行 更多帖子 关注私信空间博客 9527 等级 本版专家分：0

引用 2 楼 Free_Wind22 的回复:

screen.availHeight - window.innerHeight

非常感谢Free_Wind22的回复，在您和另外一个网友的启发下，我使用了window.outerWidth代替screen.availHeight ，配合window.screenTop 一起使用，达到了我的目的，目前在Chrome和360浏览器下测试，暂时没注意到有问题

2016-09-03 10:57:13

点赞只看TA 引用举报 #4得分 0

引用 3 楼 jslang 的回复:

可以通过事件对象event的鼠标坐标来计算



<script type="text/javascript">

function getScreen(e) {

    var x = e.screenX - e.clientX;

    var y = e.screenY - e.clientY;

        alert("X坐标：" + x + ",Y坐标：" + y);

    }

</script>

<input type="button" onclick="getScreen(event)" value="测试" />

谢谢jslang的帮助，关联鼠标运动的方法，我昨天下午也尝试过，不过存在一点小小的问题，就是如果仅仅用这个方法，没法同时兼顾Chrome浏览器和360浏览器。因为这两个浏览器的window.screenTop 实现不一样，如果统一加上一个偏移量，在两者之一的浏览器中就会出问题。我现在的做法是这样的：



var ShiftCorrectMethod = 0; //修正获取浏览器可视区域左上角坐标位置的方法类型，

    // 模式0是采用window.outerWidth - window.innerWidth方法修正

    // 模式1是采用鼠标活动事件关联方法



/**

 * 获得可视区域左上角的X屏幕坐标

 * @returns {*}

 */

function getViewAreaLeft() {

    if (ShiftCorrectMethod == 0) {

        return window.screenLeft + (window.outerWidth - window.innerWidth);

    } else {

        if (window.bodyOffset)

            return window.screenLeft + window.bodyOffset[0];

        else

            return window.screenLeft;

    }

}



/**

 * 获得可视区域左上角的Y屏幕坐标

 * @returns {*}

 */

function getViewAreaTop() {

    if (ShiftCorrectMethod == 0) {

        return window.screenTop + (window.outerHeight - window.innerHeight);

    } else {

        if (window.bodyOffset)

            return window.screenTop + window.bodyOffset[1];

        else

            return window.screenTop;

    }

}

再次谢谢大家的热心帮助

2016-09-03 11:00:44

点赞只看TA 引用举报 #5得分 0

⋅wince下能不能做socket hook ⋅记得有期《程序员》登了拨号及通话的完整的状态图，突然找不到，还有谁记得是哪一期，万望告之，多谢 ⋅记得有期《程序员》登了拨号及通话的完整的状态图，突然找不到，还有谁记得是哪一期，万望告之，多谢 更多帖子 关注私信空间博客 大脚板 等级 本版专家分：0

这样做应该是不对的吧，如果浏览器下方有状态栏，这个坐标是有偏差的

引用 5 楼 9527 的回复:

Quote: 引用 3 楼 jslang 的回复:

可以通过事件对象event的鼠标坐标来计算



<script type="text/javascript">

function getScreen(e) {

    var x = e.screenX - e.clientX;

    var y = e.screenY - e.clientY;

        alert("X坐标：" + x + ",Y坐标：" + y);

    }

</script>

<input type="button" onclick="getScreen(event)" value="测试" />



var ShiftCorrectMethod = 0; //修正获取浏览器可视区域左上角坐标位置的方法类型，

    // 模式0是采用window.outerWidth - window.innerWidth方法修正

    // 模式1是采用鼠标活动事件关联方法



/**

 * 获得可视区域左上角的X屏幕坐标

 * @returns {*}

 */

function getViewAreaLeft() {

    if (ShiftCorrectMethod == 0) {

        return window.screenLeft + (window.outerWidth - window.innerWidth);

    } else {

        if (window.bodyOffset)

            return window.screenLeft + window.bodyOffset[0];

        else

            return window.screenLeft;

    }

}



/**

 * 获得可视区域左上角的Y屏幕坐标

 * @returns {*}

 */

function getViewAreaTop() {

    if (ShiftCorrectMethod == 0) {

        return window.screenTop + (window.outerHeight - window.innerHeight);

    } else {

        if (window.bodyOffset)

            return window.screenTop + window.bodyOffset[1];

        else

            return window.screenTop;

    }

}

再次谢谢大家的热心帮助

2016-09-09 11:46:53

点赞只看TA 引用举报 #6得分 0

引用 6 楼 chenge1980 的回复:

这样做应该是不对的吧，如果浏览器下方有状态栏，这个坐标是有偏差的

Quote: 引用 5 楼 9527 的回复:

Quote: 引用 3 楼 jslang 的回复:

可以通过事件对象event的鼠标坐标来计算



<script type="text/javascript">

function getScreen(e) {

    var x = e.screenX - e.clientX;

    var y = e.screenY - e.clientY;

        alert("X坐标：" + x + ",Y坐标：" + y);

    }

</script>

<input type="button" onclick="getScreen(event)" value="测试" />



var ShiftCorrectMethod = 0; //修正获取浏览器可视区域左上角坐标位置的方法类型，

    // 模式0是采用window.outerWidth - window.innerWidth方法修正

    // 模式1是采用鼠标活动事件关联方法



/**

 * 获得可视区域左上角的X屏幕坐标

 * @returns {*}

 */

function getViewAreaLeft() {

    if (ShiftCorrectMethod == 0) {

        return window.screenLeft + (window.outerWidth - window.innerWidth);

    } else {

        if (window.bodyOffset)

            return window.screenLeft + window.bodyOffset[0];

        else

            return window.screenLeft;

    }

}



/**

 * 获得可视区域左上角的Y屏幕坐标

 * @returns {*}

 */

function getViewAreaTop() {

    if (ShiftCorrectMethod == 0) {

        return window.screenTop + (window.outerHeight - window.innerHeight);

    } else {

        if (window.bodyOffset)

            return window.screenTop + window.bodyOffset[1];

        else

            return window.screenTop;

    }

}

再次谢谢大家的热心帮助

360安全浏览器的window.screenTop和IE是一样的，但是和Chrome不一样，也就是不存在此问题，Chrome一般没有状态栏

2016-09-23 08:34:44

点赞只看TA 引用举报 #7得分 0

⋅wince下能不能做socket hook ⋅记得有期《程序员》登了拨号及通话的完整的状态图，突然找不到，还有谁记得是哪一期，万望告之，多谢 ⋅记得有期《程序员》登了拨号及通话的完整的状态图，突然找不到，还有谁记得是哪一期，万望告之，多谢 更多帖子 关注私信空间博客 大脚板 等级 本版专家分：0: 比如下载一个东西，chrome就有状态栏了

2016-09-30 12:42:41

点赞只看TA 引用举报 #8得分 0

⋅没有使用NAT的前提下，TCP长连接长时间无数据被断开是哪个网络设备的问题 ⋅Linux下使用命令行修改IP后，如何强制当前的所有网络连接断开重连 ⋅如何获得Chrome浏览器的可视区域左上角的屏幕坐标，IE中可用的属性不行 更多帖子 关注私信空间博客 9527 等级 本版专家分：0: 引用 8 楼 chenge1980 的回复:
比如下载一个东西，chrome就有状态栏了

那就只能用鼠标监控事件来做了，我现在主要是为了获取视频播放位置，所以一般不用考虑下载的情况。

2016-10-01 22:47:56

点赞只看TA 引用举报 #9得分 0

收起

收藏回复

9527

等级：

关注私信 TA的帖子

JS获取屏幕坐标: 获取JS屏幕坐标首先我们来了解一下几个关键的对象 documentElement 属性可返回文档的根节点(获取文档中的的元素)。 2.scrollTop() 为滚动条向下移动的距离 document.documentElement.scrollTop 指的是滚动条的垂直...

通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕，相对浏览器窗口，相对文档的坐标详解....: 在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊...

IE Chrome Opera 获取坐标: e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff： e.pageX——相对整个页面的坐标 e....

获取浏览器高度_JavaScript 经典实例之获取屏幕坐标: 2.scrollTop() 为滚动条向下移动的距离3.document.documentElement.scrollTop 指的是滚动条的垂直坐标4.document.documentElement.clientHeight 指的是浏览器可见区域高度DTD已声明的情况下：如果在页面中添加这行...

事件对象、异步执行、Scroll、Offset、获取屏幕可视区域、onresize、缓动动画、Js获取CSS属性: 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括...

对offset/scroll/client详解在chrome浏览器下: 关于scroll, client, offset的一些详解

JavaScript 获取鼠标点击位置坐标: JavaScript 获取鼠标点击位置坐标 pageX、clientX、screenX、offsetX、layerX、x

javascript座标_JavaScript得到屏幕坐标值: 06-03 11:35:09)参考：http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.htmlchrome：e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offsetX——相对当前坐标系的bo....

jquery插件——检测DOM元素是否在浏览器可视范围之内: web应用中有很多地方会用到打点，用来检测用户行为，今天就做了个打点相关的需求，为了统计一个广告给用户的展示次数，每次用户请求完成并且渲染完成之后就算一次成功的展示，其实有时候这个广告还没有在用户的可视...

各种浏览器的鼠标位置获取方法: chrome：e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offsetX——相对当前坐标系的border左上角开始的坐标e.clientX——相对可视区域的坐标e.x——相对可视区域的坐标ff：e....

python获取文字坐标_python坐标获取: 广告关闭腾讯云11.11云上盛惠，精选热门产品...applewebkit537.36 (khtml, like gecko) chrome75. 0.3770. 90 safari537.36) #放ualocation = geolocator.geocode(喜马拉雅山)#根据查相关信息#location = geolocato...

如何在JavaScript中获取屏幕，窗口和网页大小: 浏览器的各种尺寸是javaScript中比较容易混淆的概念，下面我会在本文中解释这些概念并且通过具体示例告诉大家如何访问它们。屏幕屏幕尺寸屏幕尺寸是屏幕的宽度和高度：显示器或移动屏幕。window.screen是保存...

JavaScript获取鼠标及元素在页面上的位置: 1、clientX/Y属性获取鼠标在页面的位置 {{value}}chooseVal(i,index,e){ console.log(e.clientX); console.log(e.clientY); this.attrIndex.x = i; this.attrIndex.y = index; } 代码解析：从...

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变兼容性：所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变兼容性：除IE6/7/8不...

DOM元素在浏览器中的位置参数，如offset,ownerDocument: client指浏览器左上角；screen指显示器左上角。所以正常情况下screen>=client。 2014-10-08 学习一下，好像有很多相关的参数 [b]1，documentElement 和 body[/b] （1）documentElement 属性 ...

JavaScript 获取鼠标及元素在页面上的位置: JavaScript获取鼠标的位置，大家会想到clientX/Y等属性，灵活的获取鼠标的位置信息，能够便于我们实现各种复杂的页面交互效果，到底还有哪些属性可以获取鼠标的位置信息？另外，还有哪些能快速获取标签在页面中的...

不同浏览器获取DOM元素的各种高度: HTML中高度和宽度的获取，跨浏览器兼容性，以及jQuery中操作

各个浏览器中鼠标位置的属性 offsetX layerX PageX clientX （自由拖动框，防止文字选中）: 参考： http://blog.csdn.net/crazy_fire/article/details/7721587 ...1.offsetX和layerX offsetX: IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为

可视化工具d3（v5）教程: 1、用D3更改Hello World <html> <head> <meta charset="utf-8"> <title>HelloWorld</title> <script src="http://d3js.org/d3.v3.mi...

javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model): 简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是windowBOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性BOM缺乏标准...

前端中与宽高有关的属性: 正处于前端入门阶段的我一直对...由于IE8以下的IE浏览器市场份额已逐年下降，所以对于IE浏览器，本文中将只考虑IE8及以上的版本，至于其他浏览器，也是以chrome兼容为主。与window对象相关的属性 window对象表示浏览

JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸: clientX：鼠标在页面上可视区域的位置，从浏览器可视区域左上角开始，即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化. offsetX：IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模

鼠标点击的各种坐标 (事件对象): e.clientX,e.clientY返回事件发生时，鼠标指针相对于浏览器窗口可视区域的水平（垂直）窗口坐标。可视区域不包括工具栏和滚动条，IE事件和标准事件都定义了这2个属性 e.pageX e.pageY返回鼠标指针的位置，类似于...

Javascript获取页面的各种坐标汇总: 轉載自：Javascript获取页面的各种坐标汇总 - 2012-06-17 20:10 ...说明，本文全部内容都基于各...1）鼠标点击事件的坐标，相对于可视区域（Client）左上角 var point_y = evt.clientY; var poin

各浏览器的鼠标位置测试: 参考文章：http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html测试属性： e.pageX(jQuery) e.layerX e.offsetX(HTML DOM Event) ...e.x(HTML DOM Event IE属性) 测试浏览器： chrome53/IE

鼠标事件和距离属性: js中有很多“距离”，为了不会混淆这里总结一下其中部分距离本文包括元素属性相关的距离和鼠标事件中的...Chrome Dev 54.0.2840.71Firefox 49.0Opera 41.0Safari 10.1IE 11。前四者运行在macOS Sierra 10.12上，I...

可视化工具D3教程: 可视化工具D3教程第1章 D3简介第2章第一个程序 Hello World第3章正式进入D3的世界第4章选择、插入、删除元素第5章做一个简单的图表第6章比例尺的使用第7章坐标轴第8章完整的柱形图第9章让图表动起来第10章 ...

2019美赛ABCDEF题题目（附C题数据）: 2019美赛题目，完全是从官网下载，无翻译，可使用有道软件翻译浏览

数据结构基础系列(1)：数据结构和算法: 数据结构课程是计算机类专业的专业基础课程，在IT人才培养中，起着重要的作用。课程按照大学计算机类专业课程大纲的要求，安排教学内容，满足需要系统学习数据结构的人。系列课程包含11个部分，本课为第1部分，介绍与数据结构、程序、算法相关的

python爬虫20个案例: 讲诉python爬虫的20个案例。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

相关热词 c# 设置窗体为激活 c# 同步发送 c# 多进程锁 c# 读取类的属性和值 c# out 使用限制 c#获取url的id c# update 集合 c# 公众号菜单 c#for迭代 c#指针应用