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

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. Windows 编程基础

    1 Windows应用程序的分类 1.1 控制台程序 DOS程序,本身没有窗口,通过WINDOWS下的DOS窗口执行. 1.2 窗口程序 拥有自己的窗口,通过窗口可以和用户进行交互.(比如:记事本,画 ...

  2. C#实例 武汉肺炎全国疫情实时信息图

    如果需要查看更多文章,请微信搜索公众号 csharp编程大全,需要进C#交流群群请加微信z438679770,备注进群, 我邀请你进群! ! ! --------------------------- ...

  3. OpenSSL编程模型

    相关头文件: #include <openssl/ssl.h>#include <openssl/err.h> 客户端程序编写流程: 服务端编写流程: 产生私钥:# opens ...

  4. 手写一个HTTP框架：两个类实现基本的IoC功能

    jsoncat: 仿 Spring Boot 但不同于 Spring Boot 的一个轻量级的 HTTP 框架 国庆节的时候,我就已经把 jsoncat 的 IoC 功能给写了,具体可以看这篇文章&l ...

  5. 第3天 | 12天搞定Python，用VSCode编写代码

    Visual Studio Code (简称 VS Code), 是一款免费并且开源的现代化轻量级代码编辑器,支持语法高亮.智能代码补全.自定义热键.括号匹配.代码片段等特性,并针对网页开发做了优化. ...

  6. JVM系列【2】Class文件结构

    JVM系列笔记目录 虚拟机的基础概念 class文件结构 class文件加载过程 jvm内存模型 JVM常用指令 GC与调优 如何查看class字节码文件 在idea中可以通过插件BinEd来查看二进 ...

  7. MeteoInfoLab脚本示例：AIRS Swath HDF数据

    例子中的AIRS Swath HDF数据在Polar Stereographic(南极)投影中接近矩形,需要先从数据中读出经纬度及相关数据数组,利用surfacem函数绘制Swath数据(散点),在s ...

  8. day02 Pyhton学习

    1.昨日内容回顾 1.python是一门解释型,弱类型的高级编程语言 优点: 1.优雅简单明确 2.短小快,代码短,代码量小,开发效率高 缺点: 1.运行效率低(相对) 2.python解释器 Cpy ...

  9. golang拾遗：为什么我们需要泛型

    从golang诞生起是否应该添加泛型支持就是一个热度未曾消减的议题.泛型的支持者们认为没有泛型的语言是不完整的,而泛型的反对者们则认为接口足以取代泛型,增加泛型只会徒增语言的复杂度.双方各执己见,争执 ...

  10. centos8平台使用ulimit做系统资源限制

    一,ulimit的用途 1, ulimit 用于shell启动进程所占用的资源,可用于修改系统资源限制 2, 使用ulimit -a 可以查看当前系统的所有限制值 使用ulimit -n <可以 ...