多级iframe中，获取元素相对于浏览器左上角的坐标（非当前frame）
搜索了好多文章，都不是自己想要的，所以在此贴下自己的解决方案，做个笔记。
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）的更多相关文章
- Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
- js 获取iframe中的元素
今天要修改编辑器插件中的元素遇到的问题 jquery 在父窗口中获取iframe中的元素 1.Js代码 格式:$("#iframe的ID").contents().find(&qu ...
- 获取iframe中的元素
父窗口中获取iframe中的元素 var ifr = document.getElementById('suggustion').contentWindow.document.body; 在ifram ...
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window ...
- 关于如何获取iframe中的元素
今天研究了一下iframe中元素的获取,发现有些地方还是有点坑的. 首先:如果使用纯前端手段,是没有办法获取非同源的iframe中的元素的,后面会提到后端手段 一.同源环境 1.首先在父页面获取ifr ...
- 【学习】如何用jQuery获取iframe中的元素
(我的博客网站中的原文:http://www.xiaoxianworld.com/archives/292,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 说实在的,以前真的很少 ...
- 父窗口中获取iframe中的元素
js 在父窗口中获取iframe中的元素 1. 格式:window.frames["iframe的name值"].document.getElementById("ifr ...
- 在iframe窗体内 获取父级的元素；；在父窗口中获取iframe中的元素
在iframe中获取父窗口的元素 $(‘#父窗口中的元素ID’, parent.document).click(); 在父窗口中获取iframe中的元素 $(“#iframe的ID”).content ...
- js获取iframe中的元素以及在iframe中获取父级的元素（包括iframe中不存在name和id的情况）
第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...
随机推荐
- python中remove函数的坑
摘要:对于python中的remove()函数,官方文档的解释是:Remove first occurrence of value.大意也就是移除列表中等于指定值的第一个匹配的元素. 常见用法: a ...
- IDEA设置maven修改settings.xml配置文件无法加载仓库
作为初学者配置maven一般网上搜索.然后你就看到各种配置文件片段,首先配置镜像,然后配置仓库.完事后再IDEA里面配置下maven的路径和配置文件路径. 这些文章属实坑爹,完全没讲一个重要的配置就是 ...
- 【C语言学习笔记】C语言函数执行成功时，返回1和返回0，究竟哪个好？
基本上,没有人会将大段的C语言代码全部塞入 main() 函数,更好的做法是按照复用率高,耦合性低的原则,尽可能的将代码拆分不同的功能模块,并封装成函数.C语言代码的组合千变万化,因此函数的功能可能会 ...
- 真的可以啊，用C语言实现面向对象编程O O P！C语言真的无所不能~
解释区分一下C语言和OOP 我们经常说C语言是面向过程的,而C++是面向对象的,然而何为面向对象,什么又是面向过程呢?不管怎么样,我们最原始的目标只有一个就是实现我们所需要的功能,从这一点说它们是殊途 ...
- mac安装go环境
下载pkg文件 https://golang.google.cn/dl/ sudo vim /etc/profile export GOROOT=/usr/local/go export GOPA ...
- linux(centos8):查看操作系统的当前版本(os/kernel/bash)
一,查看redhat系操作系统的版本: 适用于centos/fedora/rhel等 [root@centos8 ~]# cat /etc/redhat-release CentOS Linux re ...
- centos8:linux平台查看线程(ps/pstree/top)
一,ps/pstree/top命令所属的rpm包 pstree所属的包 [root@blog ~]# whereis pstree pstree: /usr/bin/pstree /usr/bin/p ...
- ansible的copy模块应用(ansible 2.9.5)
一,copy模块的作用: 复制文件到受控的远程主机 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest 对应的源码可以访问 ...
- Codeforces Round #676 (Div. 2) A - D个人题解（E题待补）
1421A. XORwice 题目链接:Click Here // Author : RioTian // Time : 20/10/18 #include <bits/stdc++.h> ...
- DataX 3.0 源码解析一
源码解析 基本调用类分析 任务启动由python脚本新建进程进行任务执行,后续执行由Java进行,以下将对java部分进行分 其中的调用原理机制. Engine 首先入口类为com.alibaba.d ...