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