BUG汇总
2019-08-23 本文已影响0人
hellomyshadow
-
echarts
:div
默认display:none
,改为display:block
时,echarts 无法识别 div 的宽高,只显示 100px,如果直接重新绘制resize()
,会发现图表从小到大的过程,体验性不好!
this.$nextTick(() => { //等待浏览器下一次轮询,此时 div 已经 none --> block
let container = document.getElementById(containerId);
let myChart = echarts.init(container, "light");
myChart.clear(); //清空画布,防止重新绘制时出现从小到大的过程
myChart.resize(); //重新绘制,让echarts识别 div 新的宽高
myChart.setOption(option, config); //开始渲染
});
- 控制滚动条平滑滚动
// 1. 滚动条在哪个元素上,就获取哪个元素的DOM元素
const dom = document.body;
// 2. 滚动到顶部
dom.scrollTo({
top: 0,
behavior: "smooth"
})
// 3. 获取可滚动的总高度
let scrollHeight = dom.scrollHeight;
// 4. 滚动到底部
dom.scrollTo({
top: scrollHeight,
behavior: "smooth"
})
// 5. 对于Vue,如果DOM高度是变化的,需要放在 this.$nextTick 中,等待下次轮询
-
target="_blank"
的安全性与性能
<a target="_blank">
可以打开一个新窗口,在新窗口的页面能通过window.opener
获取到来源页面的window
对象,即使跨域了也一样!某些属性的访问被拦截,是因为跨域安全策略的限制。- 新窗口中通过修改
window.opener.location
的值,神不知鬼不觉地把源窗口的地址篡改了,比如伪装成登录页,让用户以为登陆失效了,盗取用户的账号密码。 -
性能问题
target="_blank"
打开的新窗口跟原来的页面窗口共用一个进程。如果新窗口页面执行了性能不好的JS
代码,占用大量系统资源,那么原来的窗口页面也会受到影响。 -
解决方案:如果一定要用
target="_blank"
,需要加上属性rel="noopener"
或rel="noreferrer"
。这样新窗口的window.opener = null
,而且会让新窗口运行在独立的进程中,不会拖累源窗口的进程(有些浏览器做了性能优化,新开窗口默认就在独立进程打开)<a target="_blank" rel="noopener noreferrer">打开</a>
- 对于
JS
打开的新窗口,则手动设置为null
var newWindow = window.open(); // 受浏览器限制,无法频繁打开新窗口 newWindow.opener = null; newWindow.location = "https://weibo.com/"; newWindow.target = "_blank";
- 新窗口中通过修改