记录网盘项目开发过程中遇到的坑

@sakila1012 2018-07-27 07:18:51发表于 sakila1012/blog

写在前面

项目是很早的项目,而且是从别人那接手的项目,代码很老的,框架用的是早期的 MVC 框架backbone。

1.上传文件,input onchange 再次上传同一个文件无法触发

两种解决方法
第一种 Chrome Firefox有效

$("#filepath").val("");

第二种 兼容 IE 360浏览器兼容模式

if (window.navigator.userAgent.indexOf("MSIE") > 0) {
	$("#uploads")[0].reset();
	$("#iptSearch").val(upFileName);
}

2.两列等高问题

当时用的是

margin-bottom: -9999px;
padding-bottom: 9999px;

刚开始做的时候没有考虑到 IE,360,火狐 浏览器,结果测试时发现了这个问题,在这些浏览器中出现滚动条,以及页面下面出现大量的空白,所以这种方法无法实现两列等高的布局。

后来考虑到左侧是导航栏,固定布局,左侧使用 position: fixed,右侧使用margin-left: 150px 来处理,这样就解决之前出现的问题。

3. textarea 在 IE 浏览器出现滚动条

使用 texarea: auto 来解决这个问题。

4. 发布公告,快速点击发布按钮,会在数据创建多条同样的数据,这就用到我之前记录的防抖

简单的实现如下

function debounce(fn, wait) {
			var timeout = null;
			return function() {
				if(timeout !== null) 
						clearTimeout(timeout);
				timeout = setTimeout(fn, wait);
			}
		}

5. 解决window.open(url)在30浏览器中被拦截

使用的是HTML5的download属性

function downloadFile(url, saveName){
    if(typeof url == 'object' && url instanceof Blob) {
	 url = URL.createObjectURL(url); // 创建blob地址
     }
     var aLink = document.createElement('a');
     aLink.href = url;
     aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
     var event;
      if(window.MouseEvent) event = new MouseEvent('click');
      else	 {
		 event = document.createEvent('MouseEvents');
		 event.initMouseEvent('click', false, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	}
	aLink.dispatchEvent(event);

兼容IE写法

if('msSaveOrOpenBlob' in window.navigator) {
	window.navigator.msSaveOrOpenBlob(blob, downloadUrl);
}

试了下,但在IE浏览器中没有生效
在 HTML5 中,download 属性是 标签的新属性。

download 属性规定被下载的超链接目标。

在 标签中必须设置 href 属性。

该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

此方法不支持IE、Opera、Safari,支持Firefox、google浏览器
解决方法(兼容 IE 浏览器)

function download_pic() {
    var codeurl='文件服务器路径';
    if(browserIsIe()){//假如是ie浏览器  
        DownLoadReportIMG(codeurl);  
    }else{  
       downloadFile(codeurl)
    }  
 }  
  
function DownLoadReportIMG(URL) {  
    //如果隐藏IFRAME不存在,则添加  
    if (!document.getElementById("IframeReportImg"))  
        $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");  
    if (document.all.IframeReportImg.src != URL) {  
        //加载图片  
        document.all.IframeReportImg.src = URL;  
    }  
    else {  
        //图片直接另存为  
        DoSaveAsIMG();  
    }  
}  
function DoSaveAsIMG() {  
    if (document.all.IframeReportImg.src != "about:blank")  
        window.frames["IframeReportImg"].document.execCommand("SaveAs");  
}  
//判断是否为ie浏览器  
function browserIsIe() {  
    if (!!window.ActiveXObject || "ActiveXObject" in window)  
        return true;  
    else  
        return false;  
} 

如果下载不是图片,则替换

最近发现download属性有一个新的问题,那就是同源策略限制问题,如果下载的链接跟当前页面不是同源,就会存在点击后无法下载。
解决方法:
通过另开新的窗口,来解决同源策略问题。

在做知识管理系统的过程中,发现兼容 IE 和 360 的不能下载

再网上又找了另外一种兼容性写法:

    DownLoadReportIMG (url) {
      var oPop = window.open(url, '', 'width=1, height=1, top=5000, left=5000')
      for (; oPop.document.readyState !== 'complete';) {
        if (oPop.document.readyState === 'complete') break
      }
      oPop.document.execCommand('SaveAs')
      oPop.close()
    }

这种写法可以正常使用

6. 通过使用 meta 标签来实现 url 自动跳转功能

可以在不使用 js 的操作下实现原生的 url 跳转功能

具体见下:(3s跳转页面)

<Meta http-equiv="Refresh" Content="3; Url=http://www.baidu.com">

7. mousemove和mouseout 在火狐浏览器和IE 浏览器失效

兼容写法如下

$(document).on('mouseover','#uploadMenu',function(e){
       $("#uploadselect").show();
   }).on('mouseout','#uploadMenu',function () {
    $("#uploadselect").hide();
 });

8. 强制 360 使用极速模式

<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

9. 去除 IE 浏览器输入框的叉号

::-ms-clear,::-ms-reveal{display:none;}

参考资料

[1]window.URL.createObjectURL Blob URL无法在Microsoft IE和Edge中打开
[2]JS下载文件的方法(浏览器兼容)