無痕埋點之XPath

mingzhong 發布于2019-08-20 15:52 / 1778人閱讀

摘要：在這里我們是用來標識頁面元素控件的唯一性至于什么是，可以自行。有它算出的功能打開一個網頁，，在彈出的小窗口中選中一個標簽，右鍵，看到了吧點下然后粘貼下就知道這元素的標簽的多少了瀏覽器中通過獲取和根據獲取元素

在這里我們是用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("http://*[@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類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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