搜索了好多文章,都不是自己想要的,所以在此贴下自己的解决方案,做个笔记。
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="100%;height:100px"></div> 3 <iframe src="xxx"> 4 <div style="100%;height:100px"></div> 5 <div style="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>