搜索了好多文章，都不是自己想要的，所以在此贴下自己的解决方案，做个笔记。

1、常规需求：获取当前元素距离左边、顶部的距离

1 var x = $(div).offset().left;

2 var y = $(div).offset().top;

2、当元素处于iframe中时候，上面的方法获取的将是相对于iframe的的距离

此时我的做法是判断当前容器是不是iframe，如果是，则递归查找父级容器。累加每级容器计算的值即可

1 function GetPointInScreen(e, x, y) {

2     var point = e.getBoundingClientRect();

3     x += point.left;

4     y += point.top;

5     if (self != top) {

6         return window.parent.GetPointInScreen(window.parent.$("[name='myIframe']")[0], x, y);

7     }

8     return { x: x, y: y };

9 }

e：要获取坐标值的元素

myIframe：我自己的iframe的name值

3、demo

 1 <body>

 2   <div style="width:100%;height:100px"></div>

 3   <iframe src="xxx">

 4     <div style="width:100%;height:100px"></div>

 5     <div style="width:100%;height:100px" onclick="test(this)"></div>

 6     <script>

 7       function test(e){

 8         var point=GetPointInScreen(e,0,0);

 9         console.log(point);

10       }

11     </script>

12   </iframe>

13 </body>

多级iframe中，获取元素相对于浏览器左上角的坐标（非当前frame）的更多相关文章

  1. Js/Jquery获取iframe中的元素

    转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...

  2. js 获取iframe中的元素

    今天要修改编辑器插件中的元素遇到的问题 jquery 在父窗口中获取iframe中的元素 1.Js代码 格式:$("#iframe的ID").contents().find(&qu ...

  3. 获取iframe中的元素

    父窗口中获取iframe中的元素 var ifr = document.getElementById('suggustion').contentWindow.document.body; 在ifram ...

  4. Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素  1. 格式:window ...

  5. 关于如何获取iframe中的元素

    今天研究了一下iframe中元素的获取,发现有些地方还是有点坑的. 首先:如果使用纯前端手段,是没有办法获取非同源的iframe中的元素的,后面会提到后端手段 一.同源环境 1.首先在父页面获取ifr ...

  6. 【学习】如何用jQuery获取iframe中的元素

    (我的博客网站中的原文:http://www.xiaoxianworld.com/archives/292,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 说实在的,以前真的很少 ...

  7. 父窗口中获取iframe中的元素

    js 在父窗口中获取iframe中的元素 1. 格式:window.frames["iframe的name值"].document.getElementById("ifr ...

  8. 在iframe窗体内 获取父级的元素；；在父窗口中获取iframe中的元素

    在iframe中获取父窗口的元素 $(‘#父窗口中的元素ID’, parent.document).click(); 在父窗口中获取iframe中的元素 $(“#iframe的ID”).content ...

  9. js获取iframe中的元素以及在iframe中获取父级的元素（包括iframe中不存在name和id的情况）

      第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...

随机推荐

  1. ansible-handlers变更执行操作

    1. ansible-handlers在变更执行操作  1) 编写playbook的handlers的配置文件 1 [root@test-1 bin]# vim /ansible/nginx/bin/ ...

  2. 极简 Node.js 入门 - 5.1 创建 HTTP 服务器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  3. 从面试角度学完 Kafka

    Kafka 是一个优秀的分布式消息中间件,许多系统中都会使用到 Kafka 来做消息通信.对分布式消息系统的了解和使用几乎成为一个后台开发人员必备的技能.今天码哥字节就从常见的 Kafka 面试题入手 ...

  4. Java 集合看这一篇就够了

    大家好,这里是<齐姐聊数据结构>系列之大集合. 话不多说,直接上图: Java 集合,也称作容器,主要是由两大接口 (Interface) 派生出来的: Collection 和 Map ...

  5. CSS常见反爬技术

    目录 利用字体 反爬原理 应对措施 难点: 利用背景 反爬原理 应对措施 利用伪类 反爬原理 应对措施 利用元素定位 反爬原理 应对措施 利用字符切割 反爬原理 应对措施 利用字体 反爬原理 反爬原理 ...

  6. python写文件时遇到UnicodeEncodeError: 'gbk' codec can't encode character的解决方式

    在window平台,文件的默认编码是gbk, 此时如果写入的字符串的编码是utf-8就会引发这种错误,打开文件的编码必须与字符串的编码一致 with open('content.txt','w',en ...

  7. tensorflow 出现KeyError: 'tulips\\8689672277_b289909f97_n.jpg'报错

    在学习tensorflow基础教程-图像章节过程中,按照官网教程学习的时候出现了以下报错 一开始很迷茫,按着教程走怎么会这样呢 ,上网查资料也没找到找到,没办法,只好自己找原因,根据提示KeyErro ...

  8. 【应用服务 App Service】发布到Azure上的应用显示时间不是本地时间的问题，修改应用服务的默认时区

    问题情形 应用程序发布到App Service后,时间显示不是北京时间,默认情况为UTC时间,比中国时间晚 8 个小时. 详细日志 无 问题原因 Azure 上所有的服务时间都采用了 UTC 时间. ...

  9. 操作系统OS基础

    OS: Operating System 操作系统,通用目的的软件程序 主要功能:硬件驱动 进程管理 内存管理 网络管理 安全管理 文件管理OS分类:服务器OS:CentOS,Ubuntu,Windo ...

  10. 解决Mac下AndroidStudio内容时卡顿

    Mac下AndroidStudio在写代码的时候出现卡顿,小圆圈会一直转,此时我们应该检查下AndroidStudio的内存使用情况了. 1.点击左上角 AndroidStudio -- Prefer ...