兼容和Error

Posted 2021-03-22 pengdt

兼容

IE兼容

• ie没有forEach

if(!Array.prototype.forEach) {
    Array.prototype.forEach = function(fun){
        var len = this.length;
        if(typeof fun != "function"){
            throw new TypeError();
        }
        var thisp = arguments[1];
        for(var i = 0; i < len; i++){
            if (i in this){
                fun.call(thisp, this[i], i, this);  
            } 
        }
    }
}  

• ie没有trim

String.prototype.trim=function(){
    return this.replace(/(^s*)|(s*$)/g,"");
}  

• ie没有json

if (!window.JSON) {
    // 添加json对象      
    window.JSON = {
        parse: function(jsonStr) {
            console.log(123)
            return eval('(' + jsonStr + ')');
        },
        stringify: function(jsonObj) {
            var result = '',curVal;
            if (jsonObj === null) {
                return String(jsonObj);
            }
            switch (typeof jsonObj) {
                case 'number':
                case 'boolean':
                    return String(jsonObj);
                case 'string':
                    return '"' + jsonObj + '"';
                case 'undefined':
                case 'function':
                    return undefined;
            }
            switch (Object.prototype.toString.call(jsonObj)) {
                case '[object Array]':
                    result += '[';
                    for (var i = 0, len = jsonObj.length; i < len; i++) {
                        curVal = JSON.stringify(jsonObj[i]);
                        result += (curVal === undefined ? null : curVal) + ",";
                    }
                    if (result !== '[') {
                        result = result.slice(0, -1);
                    }
                    result += ']';
                    return result;
                case '[object Date]':
                    return '"' + (jsonObj.toJSON ? jsonObj.toJSON() : jsonObj.toString()) + '"';
                case '[object RegExp]':
                    return "{}";
                case '[object Object]':
                    result += '{';
                    for (i in jsonObj) {
                        if (jsonObj.hasOwnProperty(i)) {
                            curVal = JSON.stringify(jsonObj[i]);
                            if (curVal !== undefined) {
                                result += '"' + i + '":' +curVal + ',';
                            }
                        }
                    }
                    if (result !== '{') {
                        result = result.slice(0, -1);
                    }
                    result += '}';
                    return result;

                case '[object String]':
                    return '"' + jsonObj.toString() + '"';
                case '[object Number]':
                case '[object Boolean]':
                    return jsonObj.toString();
            }
        }
    };
}  

• ie没有xhr（jq做了兼容）
• ie没有addEventListener（jq做了兼容）
• ie没有event.stopPropagation（改成e.cancelBubble=true）
• ie没有event.preventDefault（改成window.event.returnValue = false;//注意加window）
• ie没有console.log（改成alert）

苹果手机

• 苹果手机日期转时间不支持"xxxx-xx-xx",只能用"xxxx/xx/xx"
• 苹果手机键盘回弹页面不回弹
  

document.body.addEventListener('click',function (e) {
   if(e.target.type == "text" || e.target.type == "password" || e.target.tagName == "TEXTAREA" ){
    var nowTop = document.documentElement.scrollTop || document.body.scrollTop || 0;
    e.target.addEventListener('blur',mimeBlur)
    function mimeBlur() {
        var e = event || window.event;
        e.target.removeEventListener('blur',mimeBlur)
        setTimeout(function() {
        window.scrollTo(0,nowTop);
        }, 100);
    }
   }
})

• 苹果的画布内容大小不能大于3m （这个无解）
• 移动端input只读属性在ios上点击还是有光标

<input type="text" unselectable="on" οnfοcus="this.blur();" readonly />
// unselectable属性作用 
// 在IE浏览器中，当input获得焦点时，点击有unselectable=”on”属性的标签时，不会触发onblur事件。 
// onfocus=”this.blur()”方法作用 
// 获取焦点时调用失去焦点事件

安卓手机

• 安卓手机的微信分享API不能用1.4api（继续用即将废弃的写法）
• 安卓需要去除300毫秒的双击延迟（用faskclick.js）

微信浏览器

• 手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的

//这也不行就得用接口签名之后再ready里执行play了
document.addEventListener("WeixinJSBridgeReady", function () {
     audio.play();
}, false);

• 微信的reload刷新地址无效

// location.reload()无效
location.href = location.href  + '_t=' + new Date().getTime()

上面的是开发过程中遇到的，其他文章有
浏览器兼容性问题解决方案
移动开发兼容问题整理笔记
移动开发软键盘兼容

错误捕获

文章来自
错误拦截插件，付费

常见错误

• JS 语法错误、代码异常
• AJAX 请求异常
• 静态资源加载异常
• Promise 异常
• Iframe 异常
• 跨域 Script error
• 崩溃和卡顿

错误捕获方式

• 可疑区域增加 Try-Catch，try-catch 只能捕获到同步的运行时错误，对语法和异步错误却无能为力，捕获不到
• 全局监控 JS 异常 window.onerror，onerror最好写在所有 JS 脚本的前面，否则有可能捕获不到错误

/**
* @param {String}  message    错误信息
* @param {String}  source    出错文件
* @param {Number}  lineno    行号
* @param {Number}  colno    列号
* @param {Object}  error  Error对象（对象）
*/
window.onerror = function(message, source, lineno, colno, error) {
   console.log('捕获到异常：',{message, source, lineno, colno, error});
}

• 全局监控静态资源异常 window.addEventListener

window.addEventListener('error', (error) => {
    console.log('捕获到异常：', error);
}, true)

• 捕获没有 Catch 的 Promise 异常：unhandledrejection

window.addEventListener("unhandledrejection", function(e){
  e.preventDefault()
  console.log('捕获到异常：', e);
  return true;
});

• VUE errorHandler 和 React componentDidCatch

Vue.config.errorHandler = (err, vm, info) => {
  console.error('通过vue errorHandler捕获的错误');
  console.error(err);
  console.error(vm);
  console.error(info);
}

• 监控网页崩溃：window 对象的 load 和 beforeunload
• 跨域 crossOrigin 解决