[JavaScript]模拟鼠标拖拽、元素相对于文档坐标计算、页面内发送Http请求等小功能封装

分享一些平时开发和自动化测试时，需要嵌入到页面内的js功能脚本。

1.模拟鼠标拖拽

从源元素selector拖拽到目标元素selector，考虑了拖拽iframe中元素的情况

function simDrag(sourceSel, targetSel, iframeName = "noIframeName"){
    console.log(iframeName);
    let source;
    let target;
    if (iframeName == "noIframeName") {
      source = document.querySelector(sourceSel);
    } else {
      source = window.frames[iframeName].document.querySelector(sourceSel);
    }
    console.log(source);

    let rect = source.getBoundingClientRect();
    let dragPt = { x: rect.left + (rect.width >> 1), y: rect.top + (rect.height >> 1) };

    let dragmiddlePt = { x: dragPt.x + 20, y: dragPt.y + 20 };
    let dragmiddlePt2 = { x: dragmiddlePt.x + 20, y: dragmiddlePt.y + 20 };

    let emit = function (event, target, pt) {
      let evt = document.createEvent('MouseEvent');
      evt.initMouseEvent(event, true, true, window, 0, 0, 0, pt.x, pt.y, false, false, false, false, 0, null);
      target.dispatchEvent(evt);

      console.log(pt.x);
      console.log(pt.y);
    };

    emit('click', source, dragPt);
    emit('mousedown', source, dragPt);
    emit('mousemove', source, dragPt);
    emit('dragstart', source, dragPt);
    emit('mousemove', source, dragmiddlePt);
    emit('mousemove', source, dragmiddlePt2);

    if (iframeName == "noIframeName") {
      target = document.querySelector(targetSel);
    } else {
      target = window.frames[iframeName].document.querySelector(targetSel);
    }

    let targetrect = target.getBoundingClientRect();
    let dropPt = { x: targetrect.left + (targetrect.width >> 1), y: targetrect.top + (targetrect.height >> 1) };

    emit('mousemove', source, dropPt);
    emit('dragenter', target, dropPt);
    emit('dragover', target, dropPt);
    emit('drop', target, dropPt);
    emit('dragend', source, dropPt);
    emit('mouseup', source, dropPt);
};

2.页面内发送Get与Post请求

请求的返回结果"response"保存在了sessionStorage中

var httpRequest = {};
httpRequest.quest = function (option, callback) {
  var url = option.url;
  var method = option.method;
  var data = option.data;
  var timeout = option.timeout || 0;
  var xhr = new XMLHttpRequest();
  (timeout > 0) && (xhr.timeout = timeout);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status >= 200 && xhr.status < 400) {
        var result = xhr.responseText;
        try { result = JSON.parse(xhr.responseText); } catch (e) { }
        callback && callback(null, result);
      } else {
        callback && callback('status: ' + xhr.status);
      }
    }
  }.bind(this);
  xhr.open(method, url, true);
  if (typeof data === 'object') {
    try {
      data = JSON.stringify(data);
    } catch (e) { }
  }
  xhr.send(data);
  xhr.ontimeout = function () {
    callback && callback('timeout');
    console.log('%c连%c接%c超%c时', 'color:red', 'color:orange', 'color:purple', 'color:green');
  };
};
httpRequest.get = function (url, callback) {
  var option = url.url ? url : { url: url };
  option.method = 'get';
  this.quest(option, callback);
};
httpRequest.post = function (option, callback) {
  option.method = 'post';
  this.quest(option, callback);
};
function httpRequestGet(getUrl, getTimeout){
    httpRequest.get({url: getUrl, timeout: getTimeout}, function (err, result) {
    window.sessionStorage.setItem("response",JSON.stringify(result));
});
}
function httpRequestPost(postUrl, postData, postTimeout){
httpRequest.post({url: postUrl, data: postData, timeout: postTimeout}, function (err, result) {
    window.sessionStorage.setItem("response",JSON.stringify(result));
});
}

3.返回DOM元素相对于整个文档的x、y 坐标

function getElementPos(elementId) {
    var ua = navigator.userAgent.toLowerCase();
    var isOpera = (ua.indexOf('opera') != -1);
    var isIE = (ua.indexOf('msie') != -1 && !isOpera);
    var el = elementId;
    if(el.parentNode === null || el.style.display == 'none') {
     return false;
    }      
    var parent = null;
    var pos = [];     
    var box;     
    if(el.getBoundingClientRect)    
          {         
     box = el.getBoundingClientRect();
     var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
     var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
     return {x:box.left + scrollLeft, y:box.top + scrollTop};
    }else if(document.getBoxObjectFor)  
    {
     box = document.getBoxObjectFor(el); 
     var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0; 
     var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0; 
     pos = [box.x - borderLeft, box.y - borderTop];
    } else 
    {
     pos = [el.offsetLeft, el.offsetTop];  
     parent = el.offsetParent;     
     if (parent != el) { 
      while (parent) {  
       pos[0] += parent.offsetLeft; 
       pos[1] += parent.offsetTop; 
       parent = parent.offsetParent;
      }  
     }   
     if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) { 
      pos[0] -= document.body.offsetLeft;
      pos[1] -= document.body.offsetTop;         
     }    
    }              
    if (el.parentNode) { 
       parent = el.parentNode;
      } else {
       parent = null;
      }
    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') {
     pos[0] -= parent.scrollLeft;
     pos[1] -= parent.scrollTop;
     if (parent.parentNode) {
      parent = parent.parentNode;
     } else {
      parent = null;
     }
    }
    return {x:pos[0], y:pos[1]};
   }

 4.监听点击冒泡事件中存在标签产生的页面跳转

  window.addEventListener('click',function(){
  let obj = document.elementFromPoint(event.clientX,event.clientY);
  let path = window.event.path;
  let regex = /<.*?>/;
  let regexTagA = new RegExp("^$"); //匹配a标签
    for(let j = 0; j < 5; j++) {
      let str = path[j].innerHTML;
      let tag = regex.exec(str);

      if(regexTagA.test(tag)) {
        tag = tag + "<\\a>";
        let tempDom = document.createElement("a");
        tempDom.innerHTML = tag;
        let target = tempDom.childNodes[0].getAttribute("target");
        let href = tempDom.childNodes[0].getAttribute("href");
        let regexBlank = new RegExp("^.*_blank.*$");
        if (regexBlank.test(target) == true) {
          console.log("fourierEvent=Click to generate a new page event");
        }
        break;
      }
    }
  },false);