Compatible and Error

compatible

IE compatible

• ie no 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 no trim

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

• ie no 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 no xhr (jq made compatible)
• ie no addEventListener (jq made compatible)
• No ie that event.stopPropagation (changed e.cancelBubble = true)
• ie without the event.preventDefault (changed window.event.returnValue = false; // add note window)
• ie no console.log (change alert)

iPhone

• Apple phone does not support Date turn time "xxxx-xxxx", only with "xxxx / xx / xx"
• Apple phone keypad rebound page does not rebound
  

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);
    }
   }
})

• Apple's canvas content size can not exceed 3m (this is no solution)
• Clicking input movement end on the read-only attribute or the cursor iOS

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

Android phone

• Andrews mobile phone micro-channel sharing API can not be used 1.4api (continue with the upcoming abandoned wording)
• Andrews need to remove 300 ms Double-delay (with faskclick.js)

Micro-channel browser

• Mobile terminal and the communication terminal is added after the micro autoplay AutoPlay or not, because the mobile terminal in order to save the set flow rate

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

• reload refresh address micro letter is invalid

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

The above is encountered in the development process, there are other articles
browser compatibility issues Solutions
Mobile Development compatibility organize notes
mobile development software compatible keyboard

Error trapping

Articles from
error blocking plug-ins, pay

Common Errors

• JS syntax error codes Exception
• AJAX request an exception
• Abnormal Load static resources
• Promise abnormal
• Iframe abnormal
• Cross-domain Script error
• Collapse and Caton

Error capture method

• Suspect areas increased Try-Catch, try-catch only captures the synchronous run-time error, syntax and asynchronous errors can not do anything, not capture
• JS Global Monitoring abnormal window.onerror, onerror best to write in front of all the JS script, or they may not catch the error

/**
* @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});
}

• Global Monitoring static resource abnormal window.addEventListener

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

• Catch the capture no abnormal 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);
}

• Monitoring web page crashes: load and beforeunload window object
• To solve cross-domain crossOrigin