兼容
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 解决