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

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

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

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

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

  1. 1 function GetPointInScreen(e, x, y) {
  2. 2     var point = e.getBoundingClientRect();
  3. 3     x += point.left;
  4. 4     y += point.top;
  5. 5     if (self != top) {
  6. 6         return window.parent.GetPointInScreen(window.parent.$("[name='myIframe']")[0], x, y);
  7. 7     }
  8. 8     return { x: x, y: y };
  9. 9 }

e：要获取坐标值的元素

myIframe：我自己的iframe的name值

3、demo

  1.  1 <body>
  2.  2   <div style="width:100%;height:100px"></div>
  3.  3   <iframe src="xxx">
  4.  4     <div style="width:100%;height:100px"></div>
  5.  5     <div style="width:100%;height:100px" onclick="test(this)"></div>
  6.  6     <script>
  7.  7       function test(e){
  8.  8         var point=GetPointInScreen(e,0,0);
  9.  9         console.log(point);
  10. 10       }
  11. 11     </script>
  12. 12   </iframe>
  13. 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. Linux中断驱动程序

    1.中断概念 中断时一种电信号,由硬件设备产生,然后再由中断控制器向处理器发送相应的信号.处理器一经检测到该信号,便中断自己当前正在处理的工作,转而去处理中断.此后,处理器会通知操作系统已经产生中断. ...

  2. docker 和 k8s 调研总结

    一. docker简介 环境配置 软件开发最大的麻烦事之一,就是环境配置.用户计算机的环境都不相同,你怎么知道自家的软件,能在那些机器跑起来? 用户必须保证两件事:操作系统的设置,各种库和组件的安装. ...

  3. python数据清洗

    盖帽法 分箱法 简单随机抽和分层抽

  4. k8s node上查看节点

    node执行 mkdir -p /root/.kube master执行 scp admin.conf node1:/root/.kube/config

  5. xshell多窗口同时执行输入命令

  6. PHP 超级全局变量 $_GET

    https://www.php.cn/php/php-superglobals.html https://m.php.cn/code/11853.html

  7. spring boot:swagger3的安全配置(swagger 3.0.0 / spring security / spring boot 2.3.3)

    一,swagger有哪些环节需要注意安全? 1,生产环境中,要关闭swagger application.properties中配置: springfox.documentation.swagger- ...

  8. linux(centos8):用cut显示文本内容的指定列

    一,cut命令的用途 从一个文本文件或者文本流中提取文本列 分别用: 字节.字符.字段 作为单位进行提取 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.co ...

  9. sql 存储过程 输出参数 输入参数

    1.简单的存储过程 create procedure porc_name as select * from 表 go 调用时: exec proc_name 2. 带参数的存储过程 create pr ...

  10. Linux入门到放弃之一《在VMware虚拟机中安装Linux系统（RedHat）》

    1.启动VMware: 2.新建虚拟机: 3.自定义配置(1安装客户机操作系统点击"稍后安装操作系统"2选择客户机操作系统为Linux,版本为Red Hat Enterprise ...