背景:前端点击文件预览
点击office文件进行预览时,打开的预览子页面有时会刷新,而有时则会打开新的页面,点开pptx文件格式后打开了一个新页面,再点docx格式或者xls格式依然会打开一个新页面,如果一开始点击docx页面打开了新页面,再点xls格式或pptx格式则刷新了docx页面。震惊之余去查看了下代码,难道是打开文件格式的原因?
好吧其实不是,代码如下
// 错误代码:
window.open(url, '_blank ')
发现问题:
即使是小白,也能一眼看出问题!没错,window.open第二个参数'_blank '的后面多了一个的空格
那第二个参数是什么意思呢,window.open有几个参数,都有哪些作用?
ok,学习记录一下window.open吧,
// 路径、名称、页面特性、替换历史记录
window.open(url, name, features, replace);
1.url 必选:要打开的 URL 地址。可以是任何有效的 URL,包括 HTTP、HTTPS、FTP 等协议
2.name 可选:新窗口的名称,默认 _blank
。有以下几种情况
- _blank:一定会在新窗口中打开
- _self:在当前窗口打开
- 任意名称:在新窗口中打开,同名则刷新该打开窗口
3. features 可选:一个逗号分隔的字符串,指定新窗口的一些特性,宽高左右等巴拉巴拉
4.replace 可选:一个布尔值,指定新打开的 url 是否替换当前页面的历史记录。如果为 true,则新的 url会替换当前页面的历史记录,用户点击浏览器的“返回”按钮时会回到上一个页面;如果为 false,则新的 url 会添加到当前页面的历史记录中,用户点击浏览器的“返回”按钮时会回到上一个 url
所以,该bug出现的原因是因为window.open 将 ‘_blank ’当成了任意名称
更改为:
// 正确代码:
window.open(url, '_blank')
以上,记录完毕