记录下最近旧网盘开发维护的感悟

@sakila1012 2019-03-19 03:04:17发表于 sakila1012/blog

写在前面

网盘接手已经将近2年的时间,但是,随着时间的推移,感觉自己在个项目上,进展不大,成长也很有限。说说最近关于维护IE浏览器上传的问题

现有的问题

仅仅能实现 chrome,Firefox的上传,大文件上传,IE 浏览器存在诸多问题,无法上传大文件,上传文件的数量有限,无法实现秒传(没有计算 MD5值)等等

解决方案

引入百度的 web uploader 来实现,避免因为兼容性问题导致用户无法使用。

问题

模态窗弹出隐藏滚动条

// 弹出模态框时,隐藏页面出现的滚动条
document.getElementsByTagName("body")[0].style.cssText='height:100%;overflow:hidden;';
// 关闭模态框时,隐藏页面出现的滚动条
document.getElementsByTagName("body")[0].style.cssText=''

实现块元素垂直水平居中(有滚动条,浏览器窗口发生变化时)

            center($('.qrcode-dialog'))   
            function center(obj) {
                var screenWidth = $(window).width(), screenHeight = $(window).height(); //当前浏览器窗口的 宽高   
                    var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度   
                    var objLeft = (screenWidth - obj.width())/2 ;   
                    var objTop = (screenHeight - obj.height())/2 + scrolltop;   
                    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});   
                //浏览器窗口大小改变时   
                $(window).resize(function() {   
                    screenWidth = $(window).width();   
                    screenHeight = $(window).height();   
                    scrolltop = $(document).scrollTop();   
                    objLeft = (screenWidth - obj.width())/2 ;   
                    objTop = (screenHeight - obj.height())/2 + scrolltop;   
                    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});   
                });   
                //浏览器有滚动条时的操作、   
                $(window).scroll(function() {   
                    screenWidth = $(window).width();   
                    screenHeight = $(window).height();   
                    scrolltop = $(document).scrollTop();   
                    objLeft = (screenWidth - obj.width())/2 ;   
                    objTop = (screenHeight - obj.height())/2 + scrolltop;   
                    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});   
                });  
            }  

解决升级 chrome(>=75) 最新版本后,input 自动填充问题

之前的解决方式时设置 autocomplete=off,但是现在这种处理方式没有用

<input type="text" autocomplete="off" >
<input type="password" autocomplete="new-password" style="display: none"/>

ie9 在input内容为空的情况下placeholder的值被当做value取出

由于 IE 9 不支持 placeholder,在input为空的情况下,通过jquery获取的val是 placeholder的值

解决方式,替换掉 placeholder

旧网盘使用的 jQuery 版本是 1.8.3,而新网盘的版本是 3.2.1

更换后出现了一个问题
image

原因:jquery 1.9*开始为了安全性,必须将script中的html内容parseHTML转换后使用。否则就报无法解析HTML内容的错误 。

$($.parseHTML(this.linkTemplate))