兼容
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()”方法作用
// 获取焦点时调用失去焦点事件
- 苹果手机没有window.open方法
安卓手机
- 安卓手机的微信分享API不能用1.4的js-sdk（继续用即将废弃的写法）
- 安卓需要去除300毫秒的双击延迟，原因和解决方案
所有手机
- fixed弹窗上添加输入框，点击输入框，如果最底层页面没有滚动条，可以把fixed改成absolute，如果最底层页面有滚动条，弹出的手机键盘会把最底层页面往上推，弹窗却不会上移，导致键盘遮挡输入框，解决方案是记录页面的滚动高度，把底层页面设置超出隐藏禁止滚动，等关闭弹窗再恢复滚动，并自动滚动到原位置，下面附上小程序的代码，原生js同理进行修改就行
<view style="{{hide ? 'height:100vh;overflow:hidden;' : ''}}">
...
</view>
<van-popup
show="{{ showMask }}"
bind:close="closeMask">
<input value="{{ value }}" />
</van-popup>
data:{
scrollTop: 0,
scrollTop2: 0,
hide: false,
showMask: false,
value: "在fixed里的输入框"
},
// 页面滚动触发事件的处理函数
onPageScroll: function (e) {
this.setData({
scrollTop: e.scrollTop
})
},
openMask:function(){
this.setData({
hide: true,
showMask: true,
scrollTop2: this.data.scrollTop
})
},
closeMask:function(){
this.setData({
hide: false,
showMask: false,
})
wx.pageScrollTo({
scrollTop: this.data.scrollTop2,
duration: 0
})
},
- 滚动穿透，就是有一个弹窗，滚动到顶端和底端再接着滚动会变成滚动页面的滚动条，所以需要去阻止A层的滚动事件，但是直接阻止A层的滚动是会导致B也不能滚动，自己亲测，所以有什么时候阻止A的滚动就需要一个全局变量，上代码
<div class="A" style="position: fixed; 100%;height: 100%;overflow: hidden;top: 0;left: 0;background-color: rgba(100,100,100,0.5);">
<div class="B" style="position: absolute; 80%;height:50%;left: 50%; top: 50%;transform: translate(-50%,-50%);overflow: scroll;">
<div>
<div style="height: 100vh;"></div>
<div style="height: 100vh;"></div>
</div>
</div>
</div>
var y = 0;
var flag = true;
function ts(){
y = event.targetTouches[0].clientY
flag = false;
}
function tm(){
var top = this.scrollTop
// 这里取的是第一个子元素，所以不管B里面放多少东西，都要用个div装在一起
var ch = $(this).children().eq(0).height()
var h = $(this).height()
if(event.targetTouches[0].clientY < y){
// 向下
if(top > ch - h - 50){
event.preventDefault()
}
}else{
// 向上
if(top < 50){
event.preventDefault()
}
}
y = event.targetTouches[0].clientY
}
function te(){
flag = true
}
function ftm(){
if(flag){
event.preventDefault()
}
}
function addtouchFun(className,flagClass) {
$('.'+className).on('touchstart',ts)
$('.'+className).on('touchmove',tm)
$('.'+className).on('touchend',te)
if(flagClass){
$('.'+flagClass).on('touchmove',ftm)
}
}
// 使用
addtouchFun('B','A')
微信浏览器
- 手机端和微信端添加了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 解决