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

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. cp命令：复制文件和目录

    cp命令:复制文件和目录 [功能说明] cp命令可以理解英文单词copy的缩写,其功能为复制文件和目录. [语法格式] 1 cp [option] [source] [dest] 2 cp [选项] ...

  2. Angluar2 项目搭建

    一 使用 Angular CLI 官方脚手架 1.安装 cli npm install -g @angular/cli 2.创建工作空间和初始应用 ng new my-app 二 tsLint 代码格 ...

  3. ubuntu 19.10 中防火墙iptables配置

    $sudo which iptables   /usr/sbin/iptables说明有安装 如果没有安装,那么使用sudo apt-get install iptables 安装. 刚装机,是这个样 ...

  4. CyclicBarrier原来是这样的

    上一篇聊了一下Semaphore信号灯的用法及源码,这一篇来聊一下CyclicBarrier的用法及解析. 官网解释: 允许一组线程全部等待彼此达到共同屏障点的同步辅助.循环阻塞在涉及固定大小的线程方 ...

  5. java 的 callback

    Java 本身没有回调这一说,但是面向对象可以模拟出来. 1. 回调接口对象 ICommand package com.git.Cmder; public interface ICommand { v ...

  6. 从Linux源码看Socket(TCP)的listen及连接队列

    从Linux源码看Socket(TCP)的listen及连接队列 前言 笔者一直觉得如果能知道从应用到框架再到操作系统的每一处代码,是一件Exciting的事情. 今天笔者就来从Linux源码的角度看 ...

  7. 实现LNMP架构

    LNMP简介 WEB资源类型: 静态资源:服务器端和客户端看到的是一样的 动态资源:服务器端放的是程序,客户端看到的是结果,并不是程序本身 和页面的静或者动没有关系 WEB相关语言 HTML JAVA ...

  8. day74:drf:drf其他功能:认证/权限/限流/过滤/排序/分页/异常处理&自动生成接口文档

    目录 1.django-admin 2.认证:Authentication 3.权限:Permissions 4.限流:Throttling 5.过滤:Filtering 6.排序:OrderingF ...

  9. list.add方法参数详解

  10. maven中执行package, install, deploy的区别

    package命令完成了项目编译.单元测试.打包功能,但没有把打好的可执行jar包(war包或其它形式的包)布署到本地maven仓库和远程maven私服仓库 install命令完成了项目编译.单元测试 ...