前端问题处理汇总
chrome浏览器加载大文件失败 ERR_CONTENT_LENGTH_MISMATCH 的解决方案
chrome 浏览器访问项目时加载大文件失败；
报错提示：：ERR_CONTENT_LENGTH_MISMATCH：
我的解决方法：
H5 audio在移动端的一些问题
-
不能自动加载音乐，需要调用play()之后，才开始加载；
-
音乐文件加载完成之后才能获取到duration；
-
播放失败问题，调用play()之后，会有一定几率出现加载失败，导致无法播放；
第一个问题，暂时也没有什么好的办法，如果想要直接加载但不想播放，只能先调用play(),然后再调用pause()，但是这样也有几率遇到问题三，出现加载失败;
第二个问题，现在的解决办法是，只能把时间提前写好在数据里面，渲染的时候，去数据获取；
第三个问题，我是开了一个延时定时器，监控currentTime，如果等于0，就重新加载load()，然后再播放play()，如果不等于0 ， 就清除定时器;
表单自动填充密码问题
chrome浏览器下，保存密码后，其他表单元素只要有文本框和密码框相邻的时候，会自动填充先前保存的账号密码：
解决方法：
- 1.在表单元素渲染完成后，用js清空value值
- 2.在账号和密码输入框之间插入一个不可见的表单元素
- 3.不需要自动填充的账号和密码表单元素添加 autocomplete="new-password" 属性（推荐使用）
输入型表单元素的oninput事件优化
我们知道oninput事件在监控表单的value值时，如果输入法是中文，在编辑的文字时，也会触发，这样在我们要实时监控表单元素value值时，会出现问题。
解决方法：
两个新事件
compositionstart
当浏览器有非直接输入的文字时（编辑时处罚）, compositionstart事件会以同步模式触发。
compositionend
当浏览器有非直接输入的文字输入时（编辑完成输入时）, compositionend会以同步模式触发。
var text = document.querySelector('#person');
var cpLock = false;
text.addEventListener('compositionstart', function(){
cpLock = true;
})
text.addEventListener('compositionend', function(){
cpLock = false;
if(!cpLock) console.log(this.value);
})
text.addEventListener('input', function(){
if(!cpLock) console.log(this.value);
});
<textarea></textarea>里的换行标记到底是什么?
换行推荐用\r\n
这2个连用，是为了能够兼容各种不同环境
数组原生 forEach方法如何跳出循环？
注意，forEach（）无法在所有元素都传递给调用的函数之前终止遍历。也就是说，没有像for循环中使用的相应的break语句。如果要提前终止，必须把forEach（）方法放在一个try块中，并能抛出一个异常。如果forEach（）调用的函数抛出foreach.break异常，循环会提前终止：
function foreach（a,f,t）{
try { a.forEach（f,t）; }
catch（e）{
if（e === foreach.break）return;
else throw e;
}
}
foreach.break = new Error（"StopIteration"）;
// 转自： 《JavaScript权威指南（6版）》7.9.1 forEach()
前端文件下载
- 如果下载的文件是固定的静态文件，可以用a标签，配合download属性在点击的时候下载文件。
// a 标签的下载功能
download 属性，属性值就是下载的文件的名称。
<a href="/images/logo.png" download="aaa">
如果文件是动态的，需要在点击下载的时候，后端同学返回来的，上面的方法就无法实现了，我们可以用另一种方法，动态的创建a标签，把动态文件的路劲赋值给创建的a标签，主动触发a标签的点击，实现下载。
//动态资源下载
//首先我们从后端同学那里获取文件路劲；
function getPath(){
method:"get",
url:"XXXXXXX"
args:{},
callBack:function(){
//执行创建链接，下载函数
funDownload("下载文件"，"http://mvw-develop.oss-cn-beijing.aliyuncs.com//gp-test775.pdf");
}
}
getPath();
var funDownload = function ( filename , filePath ) {
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
eleLink.href = filePath;
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
};
js中innerHTML与innerText的用法与区别
例子：
<div id="test">
<span style="color:red">test1</span> test2
</div>
- test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
//上例中的test.innerHTML的值也就是
“<span style="color:red">test1</span> test2 ”。
- test.innerText:
从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerText的值也就是“test1 test2”, 其中span标签去除了。
- test.outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
//上例中的text.outerHTML的值也就是
<div id="test"><span style="color:red">test1</span> test2</div>
innerText 最早是Internet Explorer引入的一个属性， 于2016年在HTML标准中大会中标准化，所在老版浏览器中，可能会有兼容问题（火狐45以下不支持）。
支持程度:
- Chrome : 4;
- Firefox (Gecko): 45 (45);
- Internet Explorer : 6;
- Opera : 9.6;
- Safari (WebKit) : 3;
检测浏览器窗口最小化，切换窗口
window.addEventListener( 'blur', function(){
console.log( '切换页面了/窗口小化了' );
});
window.addEventListener( 'focus', function(){
console.log( '切回页面了' );
});
获取textarea value值中的换行
当我们要把获取textarea的value值渲染到页面中时，需要获取到textarea中的换行替换为HTML可以解析的换行符，否则文本将会变成一片，没有段落
//获取到textarea文本框中的回车换行符,传入textarea的value
function changeBr ( arg ){
return arg.replace(/\r\n|\n/g,'<br/>');
}
textarea中的 "<"、">"替换
当我们要把获取textarea的value值渲染到页面中时，如果value中存在 "<aaa>"这样的格式时，浏览器会解析为 标签，页面会显示错误，所有，要把他们替换为浏览器不解析的文本，再渲染到页面中。
// 替换文本中的"<"和">"，防止解析为标签
function replacePre ( str ){
return str.replace( /[<>]/g , function($1){
switch ($1) {
case "<":
return "<";
break;
case ">":
return ">";
break;
default:
break;
}
});
}
