标签 JS 下的文章

js/jquery - 获取父级页面元素

// js 取父窗口的元素
window.parent.document.getElementById("idName");
// jquery 取父窗口的元素
$('#idName', window.parent.document);
// jquery 取父窗口的父窗口的元素
$('#idName', window.parent.parent.document);

vue - 比较两个Json对象是否相等

// 内容是否有修改
      // true:未改变;false:改变了
      isChange() {
        if(this.Compare(this.dialog.detail.form, this.dialog.detail.oldForm)){
          console.log('未改变');
        }else{
          console.log('改变');
        }
        return this.Compare(this.dialog.detail.form, this.dialog.detail.oldForm);
      },
      /**************************************比较json-start***************************************/
      isObj(object) {
        return object && typeof(object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == "[object object]";
      },
      isArray(object) {
        return object && typeof(object) == 'object' && object.constructor == Array;
      },
      getLength(object) {
        var count = 0;
        for(var i in object) count++;
        return count;
      },
      CompareObj(objA, objB, flag) {
        for(var key in objA) {
          if(!flag) //跳出整个循环
            break;
          if(!objB.hasOwnProperty(key)) {
            flag = false;
            break;
          }
          if(!this.isArray(objA[key])) { //子级不是数组时,比较属性值
            if(objB[key] != objA[key]) {
              flag = false;
              break;
            }
          } else {
            if(!this.isArray(objB[key])) {
              flag = false;
              break;
            }
            var oA = objA[key],
              oB = objB[key];
            if(oA.length != oB.length) {
              flag = false;
              break;
            }
            for(var k in oA) {
              if(!flag) //这里跳出循环是为了不让递归继续
                break;
              flag = this.CompareObj(oA[k], oB[k], flag);
            }
          }
        }
        return flag;
      },
      Compare(objA, objB) {
        if(!this.isObj(objA) || !this.isObj(objB)) return false; //判断类型是否正确
        if(this.getLength(objA) != this.getLength(objB)) return false; //判断长度是否一致
        return this.CompareObj(objA, objB, true); //默认为true
      },
      /**************************************比较json-end***************************************/

JS - 数组元素根据指定的字段排序

var arr = [
{far:123.45,address:"金粮路"},
{far:3685.45,address:"北京路"},
{far:2.8,address:"人民公园"},
];
//
arr.sort(function (a, b) {
    if (a.far < b.far) {
        return -1;
    } else if (a.far == b.far) {
        return 0;
    } else {
        return 1;
    }

JS - 判断鼠标指针移动离开页面

    function initMouseout() {
        document.body.addEventListener('mouseout', (evt) => {
            if (!evt) var evt = window.event;
            var to = evt.relatedTarget || evt.toElement;
            if (!to || to.nodeName == "HTML") {
                $('#menu_hover_bg')
                    .stop()
                    .animate({
                        height: '0'
                    }, 100);
            }
        });
    }

拓展

JS - 通过内核判断各种浏览器|区分360与谷歌

function getBrowserInfo(){
        var ua = navigator.userAgent.toLocaleLowerCase();
        var browserType=null;
        if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
            browserType = "IE";
            browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
        } else if (ua.match(/firefox/) != null) {
            browserType = "火狐";
        }else if (ua.match(/ubrowser/) != null) {
            browserType = "UC";
        }else if (ua.match(/opera/) != null) {
            browserType = "欧朋";
        } else if (ua.match(/bidubrowser/) != null) {
            browserType = "百度";
        }else if (ua.match(/metasr/) != null) {
            browserType = "搜狗";
        }else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
            browserType = "QQ";
        }else if (ua.match(/maxthon/) != null) {
            browserType = "遨游";
        }else if (ua.match(/chrome/) != null) {
            var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
            function _mime(option, value) {
                var mimeTypes = navigator.mimeTypes;
                for (var mt in mimeTypes) {
                    if (mimeTypes[mt][option] == value) {
                        return true;
                    }
                }
                return false;
            }
            if(is360){
                browserType = '360';
            }else{
                $('html').css("zoom",".80");
            }
        }else if (ua.match(/safari/) != null) {
            browserType = "Safari";
        }
}

JS - 微信移动端自带返回 - 判断

$(function () {
    function pushHistory(){
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
    pushHistory();
    window.addEventListener("popstate", function (e) {
        //TODO
    }, false);
});

JS - 判断微信相关

function isWeiXin() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger' && ua.match(/WindowsWechat/i) != 'windowswechat' && ua.match(/WechatDevTools/i) !='wechatdevtools') {
        return true;
    } else {
        return false;
    }
}

JS - 判断图片是否是一个透明的png图片

前言

最近做了个在移动端手写签名的需求,从github上搜了个插件就开始开搞。 插件地址

问题

这个插件最后会生成对应签名图片的base64,但是在页面上需要判断用户是否真正签名了。 因为一旦调用这个插件,就算用户没有触碰屏幕,插件也会对应的生成一个透明图片的base64。

阅读全文