• 多级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="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>
  • 相关阅读:
    python2.7_1.4_将IPV4地址转换成不同的格式
    大型网站问题的解决方案
    大型网站的标准
    SCP服务实现Linux交互
    SCP服务实现Linux交互
    使用Linux系统中的SSH服务
    向php文件中添加php.ini文件
    让apache与mysql随着系统自动启动
    为apache与mysql创建快捷方式
    安装PHP软件
  • 原文地址:https://www.cnblogs.com/grax/p/13085604.html
Copyright © 2020-2023  润新知