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

写在前面

项目是很早的项目，而且是从别人那接手的项目，代码很老的，框架用的是早期的 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下载文件的方法（浏览器兼容）

sakila1012 / blog