mirror of
https://github.com/NaiboWang/EasySpider.git
synced 2025-04-22 09:17:01 +08:00
276 lines
9.9 KiB
JavaScript
276 lines
9.9 KiB
JavaScript
//表现层的处理
|
||
|
||
if (window.location.href.indexOf("backEndAddressServiceWrapper") >= 0) {
|
||
throw "serviceGrid"; //如果是服务器网页页面，则不执行工具
|
||
}
|
||
|
||
//返回element相对node节点的xpath，默认的node节点是: /
|
||
function readXPath(element, type = 1, node = document.body) {
|
||
try {
|
||
if (type == 0) //type=0代表默认可通过id生成xpath type=1代表只能从根节点生成xpath, nodeList里必须使用绝对xpath!
|
||
{
|
||
if (element.id !== "") { //判断id属性，如果这个元素有id，则显示//*[@id="xPath"] 形式内容
|
||
return '//*[@id=\"' + element.id + '\"]';
|
||
}
|
||
if (element.className != ""){ //如果有class且某个class name只有一个元素，则使用class name生成xpath
|
||
console.log("class name: " + element.className);
|
||
names = element.className.split(" ");
|
||
for (var i = 0; i < names.length; i++) {
|
||
if (names[i] != "") {
|
||
// return '//*[@class=\"' + names[i] + '\"]';
|
||
console.log('//*[@contains(@class, \"' + names[i] + '\")]');
|
||
elements_of_class = node.getElementsByClassName(names[i]);
|
||
console.log("Length of elements_of_class: " + elements_of_class.length);
|
||
if(elements_of_class.length == 1){
|
||
return '//*[contains(@class, \"' + names[i] + '\")]'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//这里需要需要主要字符串转译问题，可参考js 动态生成html时字符串和变量转译（注意引号的作用）
|
||
if (element == node) { //递归到body处，结束递归
|
||
if (node == document.body) {
|
||
return '/html/' + element.tagName.toLowerCase();
|
||
} else {
|
||
return "";
|
||
}
|
||
}
|
||
var ix = 1, //在nodelist中的位置，且每次点击初始化
|
||
siblings = element.parentNode.childNodes; //同级的子元素
|
||
|
||
for (var i = 0, l = siblings.length; i < l; i++) {
|
||
var sibling = siblings[i];
|
||
//如果这个元素是siblings数组中的元素，则执行递归操作;arguments.callee代表当前函数的名称
|
||
if (sibling == element) {
|
||
return readXPath(element.parentNode, type, node) + '/' + element.tagName.toLowerCase() + '[' + (ix) + ']';
|
||
//如果不符合，判断是否是element元素，并且是否是相同元素，如果是相同的就开始累加
|
||
} else if (sibling.nodeType == 1 && sibling.tagName == element.tagName) {
|
||
//注意此处，为了防止多计算了插入的操作台的3个div元素导致定位错误，这里需要屏蔽掉三个元素的索引号
|
||
if(sibling.id != "wrapperDiv" && sibling.id != "wrapperTdiv" &&sibling.id != "wrapperToolkit"){
|
||
ix++;
|
||
}
|
||
}
|
||
}
|
||
} catch {
|
||
return "/"
|
||
}
|
||
};
|
||
|
||
//创造div作为选中元素后的样式存在
|
||
var div = document.createElement('div');
|
||
div.style.zIndex = -2147483647;
|
||
div.setAttribute("id", "wrapperDiv");
|
||
div.style.position = "fixed";
|
||
div.style.boxSizing = "border-box";
|
||
div.style.border = "dotted";
|
||
|
||
var tdiv = document.createElement('div');
|
||
tdiv.style.zIndex = 2147483647;
|
||
tdiv.style.position = "fixed";
|
||
tdiv.setAttribute("id", "wrapperTdiv");
|
||
tdiv.classList = "tdiv";
|
||
tdiv.style.top = "0px";
|
||
tdiv.style.width = "3000px";
|
||
tdiv.style.height = "3000px";
|
||
tdiv.style.pointerEvents = "none";
|
||
|
||
var mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
|
||
|
||
var toolkit = document.createElement("div")
|
||
toolkit.classList = "tooltips"; //添加样式
|
||
toolkit.setAttribute("id", "wrapperToolkit");
|
||
|
||
var tooltips = false; //标记鼠标是否在提示框上
|
||
|
||
var defaultbgColor = 'rgba(221,221,255,0.8)'; //移动到元素的背景颜色
|
||
var selectedColor = "rgba(151,255,255, 0.6)"; //选中元素的背景颜色
|
||
var boxShadowColor = "blue 0px 0px 5px"; //待选元素的边框属性
|
||
|
||
|
||
//右键菜单屏蔽
|
||
document.oncontextmenu = () => false;
|
||
var nodeList = []; //已被选中的节点列表
|
||
var readyList = []; //预备选中的list
|
||
var outputParameters = []; //输出参数列表
|
||
var outputParameterNodes = []; //输出参数节点列表
|
||
NowNode = null;
|
||
var xnode = null;
|
||
var step = 0; //记录这是第几次点击操作
|
||
var style = ""; //记录上个元素的颜色
|
||
document.addEventListener("mousemove", function() {
|
||
if (mousemovebind) {
|
||
tdiv.style.pointerEvents = "none";
|
||
}
|
||
|
||
//如果鼠标在元素框内则点击和选中失效
|
||
var x = event.clientX;
|
||
var y = event.clientY;
|
||
var divx1 = toolkit.offsetLeft;
|
||
var divy1 = toolkit.offsetTop;
|
||
var divx2 = toolkit.offsetLeft + toolkit.offsetWidth;
|
||
var divy2 = toolkit.offsetTop + toolkit.offsetHeight;
|
||
if (x >= divx1 && x <= divx2 && y >= divy1 && y <= divy2) {
|
||
tooltips = true;
|
||
return;
|
||
}
|
||
oe = document.elementFromPoint(event.x, event.y);
|
||
if (oe == tdiv) {
|
||
return;
|
||
}
|
||
tooltips = false;
|
||
NowNode = oe;
|
||
te = 0;
|
||
exist = 0;
|
||
exist2 = 0;
|
||
for (o of nodeList) {
|
||
if (o["node"] == oe) {
|
||
exist = 1;
|
||
break;
|
||
}
|
||
}
|
||
for (o of nodeList) {
|
||
if (o["node"] == xnode) {
|
||
exist2 = 1;
|
||
break;
|
||
}
|
||
}
|
||
// console.log(oe);
|
||
if (xnode == null) {
|
||
xnode = oe;
|
||
}
|
||
if (xnode != oe) {
|
||
if (exist2 == 0) { //如果上个元素不在数组里，改回上个元素的初始颜色
|
||
try {
|
||
xnode.style.backgroundColor = style; //上个元素改回原来元素的背景颜色
|
||
} catch {
|
||
xnode.style.backgroundColor = ""; //上个元素改回原来元素的背景颜色
|
||
}
|
||
}
|
||
|
||
try {
|
||
style = oe.style.backgroundColor;
|
||
} catch {
|
||
style = "";
|
||
}
|
||
|
||
if (exist == 1) {
|
||
|
||
} else {
|
||
try {
|
||
oe.style.backgroundColor = defaultbgColor; //设置新元素的背景元素
|
||
} catch {}
|
||
|
||
}
|
||
xnode = oe;
|
||
div.style.display = "none";
|
||
}
|
||
if (mousemovebind) {
|
||
tdiv.style.pointerEvents = "";
|
||
}
|
||
|
||
});
|
||
|
||
//点击没反应时候的替代方案
|
||
document.onkeydown = function(event) {
|
||
// console.log("keydown");
|
||
var e = event || window.event || arguments.callee.caller.arguments[0];
|
||
if (e && e.keyCode == 118) { // 按 F7
|
||
addEl();
|
||
} else if (e && e.keyCode == 119) { //按F8
|
||
clearEl();
|
||
} else if (e && e.keyCode == 120) { //按F9
|
||
NowNode.focus();
|
||
NowNode.click();
|
||
// console.log("click",NowNode);
|
||
} else {
|
||
return event.keyCode;
|
||
}
|
||
};
|
||
|
||
//选中元素到列表中
|
||
function addEl() {
|
||
// if (tooltips) {
|
||
// return;
|
||
// }
|
||
let exist = false;
|
||
for (o of nodeList) {
|
||
if (o["node"] == oe) {
|
||
exist = true;
|
||
break;
|
||
}
|
||
}
|
||
//元素没有被添加过才去添加
|
||
if (!exist) {
|
||
step++;
|
||
exist = false; //判断刚加入的元素是否在readyList中，如果在，则将所有readylist中的元素全部放入list中
|
||
for (o of readyList) {
|
||
if (o["node"] == oe) {
|
||
exist = true;
|
||
break;
|
||
}
|
||
}
|
||
if (exist) { //存在在readylist就全选中
|
||
readyToList(step);
|
||
if (app._data.selectedDescendents) {
|
||
handleDescendents(); //如果之前有选中子元素，新加入的节点又则这里也需要重新选择子元素
|
||
}
|
||
} else //不然只添加一个元素
|
||
{
|
||
clearReady(); //readylist清零重新算
|
||
nodeList.push({ node: NowNode, "step": step, bgColor: style, "boxShadow": NowNode.style.boxShadow == "" || boxShadowColor ? "none" : NowNode.style.boxShadow, xpath: readXPath(NowNode, 1) });
|
||
NowNode.style.backgroundColor = selectedColor;
|
||
}
|
||
handleElement(); //处理新状态
|
||
|
||
//将虚线框显示在元素上方但屏蔽其鼠标操作
|
||
var pos = NowNode.getBoundingClientRect();
|
||
div.style.display = "block";
|
||
div.style.height = NowNode.offsetHeight + "px";
|
||
div.style.width = NowNode.offsetWidth + "px";
|
||
div.style.left = pos.left + "px";
|
||
div.style.top = pos.top + "px";
|
||
div.style.zIndex = 2147483645;
|
||
div.style.pointerEvents = "none";
|
||
}
|
||
// console.log("------");
|
||
// for (i = 0; i < nodeList.length; i++) {
|
||
// console.log(nodeList[i]["xpath"]);
|
||
// }
|
||
//对于可点击元素，屏蔽a标签默认点击事件
|
||
event.stopImmediatePropagation();
|
||
event.stopPropagation();
|
||
event.preventDefault ? event.preventDefault() : event.returnValue = false;
|
||
}
|
||
document.addEventListener("mousedown", addEl);
|
||
toolkit.addEventListener("mousedown", function(e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
|
||
//清除选择项
|
||
function clearEl() {
|
||
//如果最后停留的元素被选中，则调整此元素的style为原始style，否则不进行调整
|
||
for (node of nodeList) {
|
||
node["node"].style.backgroundColor = node["bgColor"];
|
||
node["node"].style.boxShadow = node["boxShadow"];
|
||
if (NowNode == node["node"]) {
|
||
style = node["bgColor"];
|
||
}
|
||
}
|
||
step = 0;
|
||
clearReady();
|
||
clearParameters();
|
||
nodeList.splice(0, nodeList.length); //清空数组
|
||
app._data.option = 0; //选项重置
|
||
app._data.page = 0; //恢复原始页面
|
||
}
|
||
|
||
//清除预备数组
|
||
function clearReady() {
|
||
for (node of readyList) //节点列表状态恢复原状
|
||
{
|
||
node["node"].style.boxShadow = node["boxShadow"];
|
||
}
|
||
readyList.splice(0, readyList.length); //清空数组
|
||
}
|
||
document.body.append(div); //默认如果toolkit不存在则div和tdiv也不存在
|
||
document.body.append(tdiv);
|
||
document.body.append(toolkit);
|
||
var timer; |