精华内容
下载资源
问答
  • 视口(viewport):也叫窗口坐标,实际显示文档内容浏览器部分,不包括浏览器外壳(菜单工具等),对于框架页显示文档,视口是定义框架页<iframe>。 当文档比视口小时(无滚动),文档左上角就是...

    视口坐标,文档坐标

      视口(viewport):也叫窗口坐标,实际显示文档内容的浏览器的部分,不包括浏览器外壳(菜单工具等),对于框架页中显示的文档,视口是定义框架页的<iframe>。

    当文档比视口小时(无滚动),文档的左上角就是视口的左上角,文档坐标和视口坐标就相等。

    文档坐标 = 视口坐标 + 滚动的偏移量。文档坐标本身不会随滚动发生变化。

    Window对象的pageXoffset和pageYOffset在所有浏览器中均可获取滚动条的位置,除了IE8和以前更在的版本。

    或者,IE(和所有现代浏览器)也可以通过scrollLeft 和scrollTop来获取滚动条的位置。重点来了:一般正常情况下通过查询文档的根节点(document.documentElement)来获取这些值,但在怪异模式下必须在文档的<body>元素上查询它们(document.body),

    查询滚动条的位置:
    function getScrollOffsets(w){
        //使用指定的窗口,如果不带参数则使用当前窗口
        w = w || window;
        //除了ie8及3更早的版本外,都可以使用
        if(w.pageXoffset != null) return {
            x:w.pageXoffset, y:w.pageXoffset
        };
        //对标准模式下的ie(或者任何浏览器)
        var d = w.document;
        if(document.compatMode == "CSS1Compat")
            return {x:d.documentElement.scrollLeft, y:d.documentElement.scrollTop};
        //对怪异模式下的浏览器
        return {x:d.body.scrollLeft, y:d.body.scrollTop};
    }

    如何检测文档以哪种模式渲染?

        document.compatMode属性,if(document.compatMode == "CSS1Compat")就是标准模式,如果是BackCompat(或undefined),则是怪异模式。

    获取元素的几何尺寸

    查询元素尺寸的位置的最简单的方法:getBoundingClientRect(),该方法返回一个包含left,right,top,bottom属性的对象。left,top是左上角的x.y坐标,right, bottom是右下角的x,y坐标。这方法返回的是在视口中的位置

    将视口坐标转化为文档坐标:

    var box = e.getBoundingClientRect();
    var offsets = getScrollOffsets();
    var x = box.left + offsets.x;
    var y = box.top + offsets.y;

     该函数返回的坐标包含border和padding,但不包括margin。

    getClientRect()和getBoundingClientRect()类似,二者的不同在于:被折断的两行斜体文本,使用getBoundingClientRect()会返回边界矩形,整个两行的宽度。
    而getClientRect()可以查询内联元素每个独立的矩形。

    注意:这些方法不是实时的,不会随着滚动而自动更新数据。像getElementById()这样的方法是实时的,文档变化时会自动更新。

     刚才是判定在视口中元素在什么位置,还有一个方法可以判定在什么位置上有什么元素。Document对象的elementFromPoint()方法判定什么位置上有什么元素(这方法不常用)。指定的点在视口外,则该方法返回null。

     滚动

    Window 对象的scrollTop()方法接受一个点的XY坐标(文档坐标),并作为滚动量的偏移设置它们,即窗口滚动到指定的点出现在视口的左上角。

     

    var documentHeight = document.documentElement.offsetHeight;
    var viewportHeight = window.innerHeight;
    window.scrollTo(0, documentHeight - viewportHeight);

     

    每个HTML元素都会有如下属性:

     

    offsetWidth clientWidth scrollWidth
    offsetHeight clientHeight scrollHeight
    offetLeft clientLeft scrollLeft
    offsetTop clientTop scrollTop
    offsetParent  

     

    分别看一下这些属性吧:

    • offsetWidth和offsetHeight返回元素的屏幕尺寸,包括:内容和 border 和 padding,,但不包括margin。即:offsetWidth = content + padding + border;
    • offsetLeft 和 offsetTop 返回的是元素的XY坐标,通常来说,这些值是文档坐标,直接指定元素的位置。但如果该元素是已定位的元素的后代元素和一些其他元素(如表格单元),返回的坐标则是相对于祖先元素,而非文档,offsetParent属性指定这些属性的父元素。如果offseParent为null,则这些属性都是文档坐标。
    • clientWidth 和clientHeight 包含内容和padding,不包含border。即:clientWidth = content + padding;        如果浏览器在padding和border之间添加了滚动条,clientWidth在其返回值中也不包含滚动条。    

    注意:对于<i><span>之类的内联元素,clientWidth 总是返回0。

    • clientLeft 和clientHeight返回的是元素内边距的外边缘和他的边框的外边缘之间的水平距离和垂直距离,,,其实就是border。对于内联元素,clientLeft和clientTop总是0;
    • scrollWidth 和scrollHeight = 内容 + padding + 溢出内容的尺寸,所以应大于clientWidth。 没有溢出时,scrollWidth 等于 clientWidth。
    • scrollTop 和scrollLeft指定元素的滚动条位置。属性是可写的

     下面看一个例子,

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
       <div id="divParent" style="padding: 8px; background-color: #aaa; position: relative;">
            <div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
                height: 300px; width: 200px; border: solid 3px #f00;">
            </div>
        </div>
        <script type="text/javascript">
               var div = document.getElementById("divDisplay");
    
               var clientHeight = div.clientHeight;
               var clientWidth = div.clientWidth;
               div.innerHTML += "clientHeight:" + clientHeight + "<br>";
               div.innerHTML += "clientWidth:" + clientWidth + "<br>";
    
               var clientLeft = div.clientLeft;
               var clientTop = div.clientTop;
               div.innerHTML += "clientLeft:" + clientLeft + "<br>";
               div.innerHTML += "clientTop:" + clientTop + "<br>";
    
               var offsetHeight = div.offsetHeight;
               var offsetWidth = div.offsetWidth;
               div.innerHTML += "offsetHeight:" + offsetHeight + "<br>";
               div.innerHTML += "offsetWidth:" + offsetWidth + "<br>";
    
    
               var offsetLeft = div.offsetLeft;
               var offsetTop = div.offsetTop;
               div.innerHTML += "offsetLeft:" + offsetLeft + "<br>";
               div.innerHTML += "offsetTop:" + offsetTop + "<br>";
    
               var offsetParent = div.offsetParent;
               div.innerHTML += "offsetParent:" + offsetParent + "<br>";
    
               var scrollWidth = div.scrollWidth;
               var scrollHeight = div.scrollHeight;
               div.innerHTML += "scrollWidth:" + scrollWidth + "<br>";
               div.innerHTML += "scrollHeight:" + scrollHeight + "<br>";
    
               var scrollLeft = div.scrollLeft;
               var scrollTop = div.scrollTop;
               div.innerHTML += "scrollLeft:" + scrollLeft + "<br>";
               div.innerHTML += "scrollTop:" + scrollTop + "<br>";
    
        </script>
    </body>
    </html>

     

     

     可以根据上面的说明,做一下数学计算,得出各项值。

    以上内容来自javascript权威指南(犀牛书),这里也附一个前辈的链接,它之前也写过一样的博客。估计也是看到犀牛书吧。http://www.cnblogs.com/dolphinX/archive/2012/11/19/2777756.html

    转载于:https://www.cnblogs.com/liurenxingyu/p/4889074.html

    展开全文
  • window.parent.document.getElementById("父窗口的元素ID"); ``` 试过这两种方法分别获取但是引入到js代码总是无效 ``` 引入位置是匿名函数: startMove(obj,json,function(){ //这里 }); ```
  • 我们先想想selenium时代踩过坑:各种等待(各种time.sleep)、第一次卡无数人不要不要的iframe元素特征不确定有可能变化(在table、ID随机)。。。。。虽然XPATH能解决其中很多问题,但是编写起来还是有点麻烦。...

    UI自动化啊,其实只要找到了元素剩下的问题都不太大了。我们先想想selenium时代踩过的坑:各种等待(各种time.sleep)、第一次卡的无数人不要不要的iframe、元素特征不确定有可能变化(在table中、ID随机)。。。。。

    虽然XPATH能解决其中很多问题,但是编写起来还是有点麻烦。

    Cypress的定位还是非常丰富(复杂的)、非常考验想象力(组合方式太多)、还支持jQuery(我就想知道几个测试熟练这玩意)等众多优势(槽点),但是用了这玩意真的觉得有两个突破:1、再也不担心有元素定位不到了 2、如果用点心自动化元素这方面的维护成本将必然降低。

    接下来举例子呢还是用百度来吧,毕竟还能一边写一边看到哪个好玩的点进去看看,hey testers 打开我们的VScode一起定位咯~~~~~

    为了更好的理解这个呢,我们使用和selenium对比的方式来讲解这些定位方式。

    通过id定位id=kw的元素,等同于python的find_element_by_id:

    cy.get('#kw')//查找id=kw的元素cy.get('input[id="kw"]')//查找有id为kw的input输入框

    通过class定位,等同于find_element_by_class_name

     cy.get('.s_ipt') //定位class=s_ipt的元素 cy.get('div.s-top-wrap') //寻找class为s-top-wrap的div

    通过属性定位 

    cy.get("input[value='百度一下']")//寻找value=百度一下的input

    通过css选择器,等同于find_element_by_css_selector

    cy.get('#lg > map')//寻找id=lg下tag=map的子元素

    通过JQuery 的定位元素,格式:Cypress.$(selector) 

    Cypress.$('#kw')//注意:后边不能跟type/click等操作

    通过标签名定位,等同于selenium的find_element_by_tag_name

     cy.get('input') //寻找tag=input的元素

    通过name定位,等同find_element_by_name

    cy.get('input[name=wd]')//寻找name=wd的inputcy.get('[name=wd]')//寻找name=wd的任意元素

    PS:其实核心还是通过name属性定位

    通过别名的方式定位,比如一个元素他很废特征又贼长我们就可以把它定义一个别名然后后边多次引用

     cy.contains('新闻').as('李蛋蛋') //定义cy.contains('新闻')为别名‘李蛋蛋’,嗯这里亲测可以中文但是不推荐 cy.get('@李蛋蛋').click() //总结下 定义的时候使用as 引用的时候使用@

    xpath 定位不是太推荐了find_element_by_xpath

    npm install -D cypress-xpath//安装插件cypress-xpathcy.xpath('//ul[@class="todo-list"]//li')

    相对定位,如果返回多个

    cy.get('a').first()//找第一个a标签cy.get('a').last()//找最后一个a标签

    32f93c4e4bf4782d56ef80adbb7427fa.png

    从左边可以清楚的看到第一步先找到了53个目标,然后取了其中第一个

    相对定位按找索引取固定位置

    cy.get("#s-top-left > a:nth-child(2)")//查找id=s-top-left下边的第2个a标签,nth-child函数从1开始计数
    cy.get("#s-top-left > a").eq(1)//查找id=s-top-left下边的第2个a标签,eq函数从0开始计数

    相对定位其他

    cy.get('#u1').children();//查找id=u1下边全部子元素cy.get('#u1').children('.c-btn').click()//查找id=1下边class=c-btn的元素并点击cy.get('#kw').parent()//查找id=kw的父级元素,也就是孩子他爹是谁cy.get('#kw').parents()//查找id=kw的全部父级元素,也就是孩子的爹爷爷太爷爷。。。。全部的父级元素

    写道第一篇的最后,自动化不是银弹,也没有任何技术是银弹软件行业本身就是一个劳动密集型产业。所以UI自动化虽然有很多问题,但是该做的时候还是要做的。没有不适合做自动化的项目,只有不适合做自动化的功能。我们需要做的是用更贴合的工具+合理的设计+良好的ROI计算来尽量让自动化发挥它自己的价值而不是非黑即白的下断言。

    关注订阅号CQIT618,回复Cypress可获得思维导图下载地址,xmid随文章同步更新

    展开全文
  • 但是在iframe中使用fixed定位,实际上是相对于iframe窗口进行定位,原因在于iframe类似于创建了一个浏览器窗口,在使用一些获取鼠标位置以及元素位置等方法时候把iframe当作浏览器窗口来处理就行。 以下是一些在...

    先来看看position: fixed;的定义:生成绝对定位的元素,相对于浏览器窗口进行定位;

    但是在iframe中使用fixed定位,实际上是相对于iframe窗口进行定位,原因在于iframe类似于创建了一个浏览器窗口,在使用一些获取鼠标位置以及元素位置等方法的时候把iframe当作浏览器窗口来处理就行。

    以下是一些在iframe中使用fixed需要考虑的常用js事件对象属性与方法:

    获取鼠标的位置:

        e.clientY // 获取鼠标在浏览器视窗的Y坐标,在iframe中相对于iframe窗口

        e.screenY  // 获取的是鼠标相对于屏幕的上边距,不考虑iframe因素,

    获取元素的偏移量:

        var position = Object.getBoundingClientRect();  //用于获取某个元素相对于浏览器视窗的位置集合,在iframe中相对于iframe视窗

          position.top  //获取元素 "顶部" 距离浏览器视窗 "顶部" 的距离

          position.bottom  //获取元素 "底部" 距离浏览器视窗 "顶部" 的距离

          position.left //获取元素 "左侧" 距离浏览器视窗 "左侧" 的距离

          position.right  //获取元素 "右侧" 距离浏览器视窗 "左侧" 的距离

       Object.offsetTop  //获取元素距离 最近含有 ”定位“ 属性标签左侧的距离

    转载于:https://www.cnblogs.com/shizili/p/9729950.html

    展开全文
  • 在一些DOM操作我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊...
  • 在一些DOM操作我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊...
  • 解决办法是:用js判断页面是否被嵌套,用js计算iframe在父窗体位置,锚点在firame中的位置,两者相加成为父窗体的滚动。 遇到问题:获取父窗体元素(因为有域限制,所有需要在网络环境下方位(即http://domain.com...
  • 解决办法是:用js判断页面是否被嵌套,用js计算iframe在父窗体位置,锚点在firame中的位置,两者相加成为父窗体的滚动。 遇到问题:获取父窗体元素(因为有域限制,所有需要在网络环境下方位(即http://domain.com)...

    应用场景是:iframe页面没有滚动条,在父窗体中出现滚动条,锚点标记就会失效,因为,锚点是根据当前窗口滚动条滚动窗口的,成为子窗体后没有了滚动条,自然不会滚动。

    解决办法是:用js判断页面是否被嵌套,用js计算iframe在父窗体位置,锚点在firame中的位置,两者相加成为父窗体的滚动。

    遇到问题:获取父窗体元素(因为有域限制,所有需要在网络环境下方位(即http://domain.com));父窗体嵌套多个iframe,判断是否是当前iframe页面。

    代码:

    父窗体页面 index.html

    ContractedBlock.gifExpandedBlockStart.gif
    <!doctype html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        html,
        body{
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>
    <div style="width:100%;background:#f00;height:500px;"></div>
    <a href="">dd</a>
    <a href="">ddd</a>
    <iframe name="iframe2" id="iframe2" src="iframe.html?a=b&c=d" style="width:100%;height:2060px;"></iframe>
    <iframe name="iframe2" id="iframe2" src="iframe.html?a=d&c=b" style="width:100%;height:2060px;"></iframe>
    </body>
    </html>
    View Code

    子窗体页面iframe.html

    ContractedBlock.gifExpandedBlockStart.gif
    <!doctype html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
        a{
            padding: 5px;
            border: 1px solid #f00;
            float: left;
            display: block;
            margin-right: 5px;
        }
        div{
            width: 80%;
            margin: 10px auto;
            height: 500px;
            border: 1px solid #f00;
            font-size: 30px;
        }
        </style>
        <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
        <script type="text/javascript">
        $(function(){
            //如果是iframe则需要在网络中访问,因为js里有域限制
            //如果没有iframe则不进行处理,
            if(window!==window.top){
                //获取top窗口中的iframe,如果有iframe嵌套过多,请自行修改
                var iframeList=window.top.document.getElementsByTagName('iframe');
                for(var i=0;i<iframeList.length;i++){
                    //判断当前窗口是否循环中的iframe
                    if(window.location.toString().indexOf(iframeList[i].getAttribute('src').toString())!=-1){
    
                        //等自己的所在iframe加载完成给a锚点加事件
                        window.top.document.getElementsByTagName('iframe')[i].onload=function(){
                            //确定iframe在父窗体的距顶部距离
                            var top = window.top.document.getElementsByTagName('iframe')[i].offsetTop;
                            $('a').each(function(){
                                var href = $(this).attr('href');
                                if(href.indexOf('#')!=-1){//判断是否是锚点而不是链接
                                    var name = href.substring(href.indexOf('#')+1);
                                    $(this).bind('click',function(){
                                        $('a').each(function(){
                                            if($(this).attr('name')==name){
                                                //父窗口滚动
                                                $(window.parent).scrollTop($(this).offset().top+top);
                                            }
                                        });
                                    });
                                }
                            });
                        }
                    }
                }
            }
    
        });
            
        </script>
    </head>
    <body>
    <a href="#a">a</a>
    <a href="#b">b</a>
    <a href="#c">c</a>
    <a href="#d">d</a>
    <div><a href="" name="a">A</a></div>
    <div><a href="" name="b">B</a></div>
    <div><a href="" name="c">C</a></div>
    <div><a href="" name="d">D</a></div>
    
    </body>
    </html>
    View Code

     

    展开全文
  • 前端css+html+布局笔记

    2017-09-14 20:03:59
    直接或间接包含后代元素的元素叫做祖先元素,父元素也是祖先元素 后代元素 直接或间接被祖先元素包含的元素叫后代元素,子元素也是后代元素 兄弟元素 拥有相同父元素的元素叫做兄弟元素 块元素和内联元素 ...
  • browser = webdriver.Chrome() 由于登陆的界面在一个窗口上,所以不转到窗口上的话定位不到相关的元素...获取验证码的图像可以采用截屏的方法,然后根据验证码在图片中的位置截取出验证码图片 也可以找到验证码背景...
  • 5.iframe获取元素高度,父类自适应 6.利用jquery滚动到导航条时固定(fixed)在顶部 7.DIV和Table水平、垂直居中 8.JS各种获取控件ID方法 9.JS判断浏览器类型与版本 10.给span宽度CSS完美方法 ...
  • 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框...
  • 而且它的大小是可以动态调整的类似于OC中的NSMutableArray。创建数组可以使用构造函数的方式也可以使用字面量的形式,另外可以使用concat从一个数组中复制一个副本出来。数组本身提供了很多方法让开发者使用来...
  •  12.2 新增的元素和废除的元素 228  12.2.1 新增的结构元素 228  12.2.2 新增的块级的语义元素 230  12.2.3 新增的行内的语义元素 231  12.2.4 新增的嵌入多媒体元素与交互性元素 231  12.2.5 新增的input元素...
  • 73、JS判断页面是否是在 IFRAME中 353 74、去掉浏览器中的滚动条 353 75、IFRAME滚动条样式 353 76、JS键盘事件 355 77、JS鼠标事件大全 355 78、JS滚动条滚动时监听 360 79、FRAMESET结构 361 80、设置SELECT为列表...
  • 第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到...
  • 1.5 嵌入JavaScript脚本代码的位置 1.5.1 在<head>与</head>标记对之间放置 1.5.2 在<body>与</body>标记对之间放置 1.5.3 在两个标记对之间混合放置 1.6 选择合适的浏览器 1.7 处理不支持...
  • 1.5 嵌入JavaScript脚本代码的位置 1.5.1 在<head>与</head>标记对之间放置 1.5.2 在<body>与</body>标记对之间放置 1.5.3 在两个标记对之间混合放置 1.6 选择合适的浏览器 1.7 处理不支持...
  • JavaScript基础和实例代码

    热门讨论 2009-03-20 16:49:30
    1.5 嵌入JavaScript脚本代码的位置 1.5.1 在与标记对之间放置 1.5.2 在与标记对之间放置 1.5.3 在两个标记对之间混合放置 1.6 选择合适的浏览器 1.7 处理不支持JavaScript脚本的情况 1.7.1 使用<!--和-->标记对直接...
  • C#编程经验技巧宝典

    热门讨论 2008-06-01 08:59:33
    106 <br>0175 如何检索指定条件数组中的元素 107 <br>0176 如何动态改变数组长度 108 <br>0177 如何反转数组中元素的顺序 108 <br>0178 如何排序数组中的元素的顺序 109 <br>0179 如何创建...
  • 定义了HTML中的Link元素与<code>dns-prefetch、<code>preconnect、<code>prefetch与<code>prerender之间的关系。它可以帮助浏览器决定应该连接到哪些源,以及应该获取与预处理哪些资源来提升页面性能。 <h4>...
  • 6) 清理了table.aspx页面中的多余代码。 <br>2007/8/13 Version 3.2.9 Free <br>Updates: 1) 修正预览功能不能正常显示动态效果的BUG。 2) 修正控件在Opera下切换状态后不能聚集编辑框的BUG。...
  • 08.获取JS中的调用栈 09.同01-JVM【已有其他翻译】 10.同01-Compiler【已有其他翻译】 11.同01-GC【已有其他翻译】 12.同01-C4【已有其他翻译】 13.JVM 性能优化, Part 5: Java的扩容问题 14.idea-setting 15....
  • MAC.Cookie.Get(name) 获取cookie值; name=cookie名称 MAC.Cookie.Del(name) 删除cookie值; name=cookie名称 MAC.AdsWrap(w,h,n) 预留广告位占位; w=宽度,h=高度,n=名称 自动加载设置项: html元素ID为...

空空如也

空空如也

1 2
收藏数 24
精华内容 9
关键字:

获取iframe中的元素的位置