| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- /**
- * Created by bjoso on 2017/5/4.
- */
- var xh = xh || {};
- var doc;
- xh.elementsShareFamily = function (primaryEl, siblingEl) {
- var p = primaryEl, s = siblingEl;
- return (p.tagName === s.tagName &&
- (!p.className || p.className === s.className) &&
- (!p.id || p.id === s.id));
- };
- //获取元素所在父节点的索引位置
- xh.getElementIndex = function (el) {
- var index = 1; // XPath索引为1
- var sib;
- for (sib = el.previousSibling; sib; sib = sib.previousSibling) {
- if (sib.nodeType === Node.ELEMENT_NODE && xh.elementsShareFamily(el, sib)) {
- index++;
- }
- }
- if (index > 1) {
- return index;
- }
- for (sib = el.nextSibling; sib; sib = sib.nextSibling) {
- if (sib.nodeType === Node.ELEMENT_NODE && xh.elementsShareFamily(el, sib)) {
- return 1;
- }
- }
- return 0;
- };
- var type = 0;
- function setType(param) {
- type = param;
- }
- //生成元素的xpath
- xh.makeQueryForElement = function (el, type) {
- //type表示模式,值为0时启用精准模式(id&class),否则默认为列表模式
- var query = '';
- for (; el && el.nodeType === Node.ELEMENT_NODE; el = el.parentNode) {
- var component = el.tagName.toLowerCase();
- var index = xh.getElementIndex(el);
- //精准模式
- if (type === true) {
- if (el.id) {
- component += '[@id=\'' + el.id + '\']';
- } else if (el.className) {
- component += '[@class=\'' + el.className + '\']';
- }
- if (index >= 1) {
- component += '[' + index + ']';
- }
- }
- //如果最后一个标签是img,可以选择使用img/@src.
- if (query === '' && el.tagName.toLowerCase() === 'img') {
- component += '/@src';
- }
- query = '/' + component + query;
- }
- return query;
- };
- //根据xpath查询元素
- xh.evaluateQuery = function (query, onclick) {
- var xpathResult = null;
- var nodeCount = 0;//元素数量
- var nodes = [];
- var toHighlight = [];
- var _viewNode = new Object();
- try {
- xpathResult = doc.evaluate(query, doc, null,
- XPathResult.ANY_TYPE, null);
- } catch (e) {
- str = '[无效的XPATH表达式]';
- nodeCount = 0;
- }
- if (!xpathResult) {
- return [str, nodeCount];
- }
- if (xpathResult.resultType === XPathResult.BOOLEAN_TYPE) {
- _viewNode.text = xpathResult.booleanValue ? '1' : '0';
- nodeCount = 1;
- } else if (xpathResult.resultType === XPathResult.NUMBER_TYPE) {
- _viewNode.text = xpathResult.numberValue.toString();
- nodeCount = 1;
- } else if (xpathResult.resultType === XPathResult.STRING_TYPE) {
- _viewNode.text = xpathResult.stringValue;
- nodeCount = 1;
- } else if (xpathResult.resultType === XPathResult.UNORDERED_NODE_ITERATOR_TYPE) {
- for (var node = xpathResult.iterateNext(); node; node = xpathResult.iterateNext()) {
- var viewNode = new Object();
- var urls = "";
- // var imgs = "";
- if (node.nodeType === Node.ELEMENT_NODE) {
- if (onclick === false) {
- toHighlight.push(node);
- }
- viewNode.text = node.textContent;
- //获取节点链接
- var _urls = node.getElementsByTagName('a');
- for (var i = 0; i < _urls.length; i++) {
- urls += _urls[i].href + '\n';
- }
- // //获取节点img
- // var _imgs = node.getElementsByTagName('img');
- // for (var i = 0; i < _imgs.length; i++) {
- // imgs += _imgs[i].src + '\n';
- // }
- }
- viewNode.urls = urls;
- // viewNode.imgs = imgs;
- nodes.push(viewNode);
- nodeCount++;
- }
- if (nodeCount === 0) {
- _viewNode.text = '[NULL]';
- nodes.push(_viewNode);
- }
- } else {
- //因为XPathResult.ANY_TYPE传递给了document.evaluate(),
- //应该永远不会得到上面没有处理的结果类型
- _viewNode.text = '[内部错误]';
- nodeCount = 0;
- }
- if (_viewNode) {
- nodes.push(_viewNode);
- }
- nodes.pop();
- xh.highlight(toHighlight);//高亮函数
- return [nodeCount, nodes];
- };
- //判断元素是否在父节点中
- xh.isTagXpathContains = function (xpath, subxpath) {
- return xpath.indexOf(subxpath) >= 0;
- }
- //获取DOM标题
- xh.queryTitle = function () {
- return doc.title
- }
- //高亮函数
- xh.highlight = function (els) {
- for (var i = 0, l = els.length; i < l; i++) {
- els[i].classList.add('xh-highlight');
- }
- };
- //清除高亮函数
- xh.clearHighlights = function () {
- var els = doc.querySelectorAll('.xh-highlight');
- for (var i = 0, l = els.length; i < l; i++) {
- els[i].classList.remove('xh-highlight');
- }
- };
- //禁用document中的链接跳转
- xh.disLink = function () {
- var links = doc.getElementsByTagName('a');
- for (var i = 0; i < links.length; i++) {
- links[i].classList.add('disabled');
- }
- }
- function docClick(e, type) {
- var el = e.target;
- if (type===0) {
- var xpath = xh.makeQueryForElement(el, true);
- var data = xh.evaluateQuery(xpath);
- showLook(data, xpath);
- } else {
- var xpath = xh.makeQueryForElement(el);
- var data = xh.evaluateQuery(xpath);
- showLook(data, xpath,0);
- }
- }
- function init(docm) {
- // set document
- doc = docm;
- //禁用document中的链接跳转
- xh.disLink();
- // 页面标题
- setFrameHtmlTitle(xh.queryTitle());
- //高亮
- doc.onmousemove = function (e) {
- //console.log("onmousemove");
- var el = e.target;
- var xpath = xh.makeQueryForElement(el, true);
- xh.evaluateQuery(xpath, false);
- }
- doc.onmouseout = function () {
- //console.log("onmouseout");
- xh.clearHighlights();
- }
- // 打开XPath页面
- // openXPathClick();
- }
- // window.onload = function () {
- //
- // doc = window.document;
- // xh.disLink();
- // console.log("=========函数执行标志=========");
- // console.log(xh.queryTitle());
- // document.onclick = function (e) {
- // var el = e.target;
- // var xpath = xh.makeQueryForElement(el);
- // console.log("列表模式xpath:", xpath);
- // console.log("列表模式DOM:", xh.evaluateQuery(xpath));
- // var xp = xh.makeQueryForElement(el, 0)
- // console.log("精准模式xpath:", xp);
- // console.log("精准模式DOM:", xh.evaluateQuery(xp));
- // xp = xp.replace('xh-highlight', '').replace('xh-disabled', '').replace("[@class='']", '');
- // console.log("原始的xpath:" + xp);
- // }
- // document.onmousemove = function (e) {
- // var el = e.target;
- // var xpath = xh.makeQueryForElement(el, 0);
- // xh.evaluateQuery(xpath, 0);
- // }
- // document.onmouseout = function () {
- // xh.clearHighlights();
- // }
- // };
|