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

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. [学习笔记] Tarjan算法求强连通分量

    今天,我们要探讨的就是--Tarjan算法. Tarjan算法的主要作用便是求一张无向图中的强连通分量,并且用它缩点,把原本一个杂乱无章的有向图转化为一张DAG(有向无环图),以便解决之后的问题. 首 ...

  2. 【硬核】Dubbo常见面试题

    有情怀,有干货,微信搜索[三太子敖丙]关注这个不一样的程序员. 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试完整考点.资料以及我的系列文章. ...

  3. 【C/C++编程入门学习】C语言结构体硬核玩法分享，一切皆是数据！

    前言 对于结构体的应用太多了,今天这篇文章我主要为大家总结平时关于结构体的一些独特硬核小技巧,对于结构体更多优秀的编程表现,如果你对结构体的基础知识还不具备的话得回头看一下专栏教程或者自己找本书籍学习 ...

  4. 【C语言程序设计】—最近超火的小游戏—【数字炸弹】！

    ✍  准备工作和建议 一.程序的原理 在动手编程之前,得先跟大家说一下这个程序是干什么的. 我们可以称呼这个游戏为<数字炸弹>. 游戏的原理是这样: 每一轮电脑从 1 到 100 中随机抽 ...

  5. 互不侵犯（洛谷P1896）

    题目:在N*N的棋盘里面放k个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 输入输出:输入N,K,输出有几种放置方法. ...

  6. nginx优化:配置gzip压缩页面提高访问速度(nginx1.18.0)

    一,为什么nginx要使用gzip 1,压缩的作用: 页面使用gzip压缩之后, 页面大小可以压缩到原来的1/7左右, 传输速度和页面打开时间都可以大幅度提高, 有利于用户访问页面体验的提升 2,Ng ...

  7. java安全编码指南之:Thread API调用规则

    目录 简介 start一个Thread 不要使用ThreadGroup 不要使用stop()方法 wait 和 await 需要放在循环中调用 简介 java中多线程的开发中少不了使用Thread,我 ...

  8. BGP - 不同 AS 间运行的协议

    在之前介绍的网络场景中,ERGRP,OPSF,RIP 等都是运行在单独一个 AS(自治系统之间).这些协议统称为 IGP - 内部网关协议 ,目的主要是为自治系统内发现邻居和计算路由,从而找到合适的路 ...

  9. MySql中varchar和char，如何选择合适的数据类型？

    背景 学过MySQL的同学都知道MySQL中varchar和char是两种最主要的字符串类型,varchar是变长的类型,而char是固定长度.那关于如何选择类型就成为令人头疼的事,很多初学者为了保证 ...

  10. MVC登录

    前言 最近没什么好写的,准备把MVC的登录再写一下,巩固一下 HTML @{ Layout = null; } <!DOCTYPE html> <html> <head& ...