无痕埋点之XPath

mingzhong 发布于2019-08-20 15:52 / 1742人阅读

摘要：在这里我们是用来标识页面元素控件的唯一性至于什么是，可以自行。有它算出的功能打开一个网页，，在弹出的小窗口中选中一个标签，右键，看到了吧点下然后粘贴下就知道这元素的标签的多少了浏览器中通过获取和根据获取元素

在这里我们是用XPath来标识页面元素、控件的唯一性

XPath

至于什么是XPath，可以自行google。chrome有它算出XPath的功能！打开一个网页，F12，在弹出的小窗口中选中一个标签，右键，看到“copy XPath”了吧！点下然后粘贴下就知道这元素的标签的XPath多少了

Javascript get XPath and find element by XPath

Chrome浏览器中通过js获取xpath和根据xpath获取元素

export default {
    getXPath(elm){
        let allNodes = document.getElementsByTagName("*")
        for(var segs = []; elm && elm.nodeType == 1; elm = elm.parentNode){
            if(elm.hasAttribute("id")){
                let uniqueIdCount = 0
                for(var n=0;n < allNodes.length;n++){
                    if (allNodes[n].hasAttribute("id") && allNodes[n].id == elm.id) uniqueIdCount++;
                    if (uniqueIdCount > 1) break;
                }
                if(uniqueIdCount == 1){
                    segs.unshift("//*[@id="" + elm.getAttribute("id") + ""]");
                    return segs.join("/");
                }else{
                    return false
                }
            }else{
                for(var i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling){
                    if (sib.localName == elm.localName)  i++;
                }
                if(i == 1){
                    if(elm.nextElementSibling){
                        if(elm.nextElementSibling.localName != elm.localName){
                            segs.unshift(elm.localName.toLowerCase())
                        }else{
                            segs.unshift(elm.localName.toLowerCase() + "[" + i + "]");
                        }
                    }else{
                        segs.unshift(elm.localName.toLowerCase())
                    }
                }else{
                    segs.unshift(elm.localName.toLowerCase() + "[" + i + "]");
                }
            }
        }
        return segs.length ? "/" + segs.join("/") : null
    },
    getElem(path){
        try{
            var evaluator = new XPathEvaluator();
            var result = evaluator.evaluate(path, document.documentElement, null,XPathResult.FIRST_ORDERED_NODE_TYPE, null);
            return  result.singleNodeValue || "";
        }catch(e){
            return ""
        }
    }
}

GPU云服务器云服务器无痕 xpath php操作xpath php之xpath类

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82546.html

Android 性能监控系列一（原理篇）

摘要：全称应用性能管理监控后面我会通过一系列的文章来介绍的原理框架设计与实现等等。在应用构建期间，通过修改字节码的方式来进行字节码插桩就是实现自动化的方案之一。 showImg(https://segmentfault.com/img/bVbbRX6?w=1995&h=1273); 欢迎关注微信公众号：BaronTalk，获取更多精彩好文！一. 前言性能问题是导致 App 用户流失的罪魁...

yacheng 2019-08-15 18:08 评论0 收藏0
基于vue + nuxt 打造 o2o教育商城系统（触屏版）服务端渲染SSR

摘要：反向代理无痕埋点前言本项目纯属个人练习项目，数据并非真实，如有雷同，纯属巧合。 Node.js(v6.9.1) + express(4.X) + vue(2.0) + vuex + mysql(5.7.18) + （NUXT）SSR + nginx反向代理 + 无痕埋点前言 https://github.com/github1586...*本项目纯属个人练习项目，数据并非真实，如有雷...

Betta 2019-08-21 12:04 评论0 收藏0
基于vue + nuxt 打造 o2o教育商城系统（触屏版）服务端渲染SSR

摘要：反向代理无痕埋点前言本项目纯属个人练习项目，数据并非真实，如有雷同，纯属巧合。 Node.js(v6.9.1) + express(4.X) + vue(2.0) + vuex + mysql(5.7.18) + （NUXT）SSR + nginx反向代理 + 无痕埋点前言 https://github.com/github1586...*本项目纯属个人练习项目，数据并非真实，如有雷...

wangdai 2019-07-25 15:02 评论0 收藏0
如何通过Vue自定义指令实现前端埋点详析

　　获取用户的交互习惯及喜好，进一步提升转化率，可以在之前的埋点方案实现中，都是在具体的按钮或者图片被点击或者被曝光时主动通过事件去上报埋点。但这种方法适合在埋点比较少时还行的项目，遇见项目中需要大量埋点时，添加的代码就太多了，就会埋点逻辑与业务逻辑的高耦合。　　由此需要换种方式。我先给大家普及下埋点上报方式都有哪些？　　手动埋点　　可视化埋点　　无痕埋点　　手动埋点，顾名思义就是纯手动写代码，调...

3403771864 2022-09-14 22:57 评论0 收藏0
JS实现监控微信小程序

摘要：博客地址使用模块化工具打包自己开发的库文章中有提到，当时需要写一个，监控小程序的后台接口调用和页面报错，今天就来说下实现原理吧原理之前也做过浏览器端的数据埋点上报，其实原理大同小异通过劫持原始方法，获取需要上报的数据，最后再执行原始方法，这博客地址《使用模块化工具打包自己开发的JS库》文章中有提到，当时需要写一个SDK，监控小程序的后台接口调用和页面报错，今天就来说下实现原理吧！ ...

Cheriselalala 2019-08-22 18:04 评论0 收藏0