Open sakila1012 opened 6 years ago
项目是很早的项目,而且是从别人那接手的项目,代码很老的,框架用的是早期的 MVC 框架backbone。
两种解决方法 第一种 Chrome Firefox有效
$("#filepath").val("");
第二种 兼容 IE 360浏览器兼容模式
if (window.navigator.userAgent.indexOf("MSIE") > 0) { $("#uploads")[0].reset(); $("#iptSearch").val(upFileName); }
当时用的是
margin-bottom: -9999px; padding-bottom: 9999px;
刚开始做的时候没有考虑到 IE,360,火狐 浏览器,结果测试时发现了这个问题,在这些浏览器中出现滚动条,以及页面下面出现大量的空白,所以这种方法无法实现两列等高的布局。
后来考虑到左侧是导航栏,固定布局,左侧使用 position: fixed,右侧使用margin-left: 150px 来处理,这样就解决之前出现的问题。
position: fixed
margin-left: 150px
使用 texarea: auto 来解决这个问题。
texarea: auto
简单的实现如下
function debounce(fn, wait) { var timeout = null; return function() { if(timeout !== null) clearTimeout(timeout); timeout = setTimeout(fn, wait); } }
使用的是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() }
这种写法可以正常使用
可以在不使用 js 的操作下实现原生的 url 跳转功能
具体见下:(3s跳转页面)
<Meta http-equiv="Refresh" Content="3; Url=http://www.baidu.com">
兼容写法如下
$(document).on('mouseover','#uploadMenu',function(e){ $("#uploadselect").show(); }).on('mouseout','#uploadMenu',function () { $("#uploadselect").hide(); });
<meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
::-ms-clear,::-ms-reveal{display:none;}
[1]window.URL.createObjectURL Blob URL无法在Microsoft IE和Edge中打开 [2]JS下载文件的方法(浏览器兼容)
写在前面
项目是很早的项目,而且是从别人那接手的项目,代码很老的,框架用的是早期的 MVC 框架backbone。
1.上传文件,input onchange 再次上传同一个文件无法触发
两种解决方法 第一种 Chrome Firefox有效
第二种 兼容 IE 360浏览器兼容模式
2.两列等高问题
当时用的是
刚开始做的时候没有考虑到 IE,360,火狐 浏览器,结果测试时发现了这个问题,在这些浏览器中出现滚动条,以及页面下面出现大量的空白,所以这种方法无法实现两列等高的布局。
后来考虑到左侧是导航栏,固定布局,左侧使用
position: fixed
,右侧使用margin-left: 150px
来处理,这样就解决之前出现的问题。3. textarea 在 IE 浏览器出现滚动条
使用
texarea: auto
来解决这个问题。4. 发布公告,快速点击发布按钮,会在数据创建多条同样的数据,这就用到我之前记录的防抖
简单的实现如下
5. 解决window.open(url)在30浏览器中被拦截
使用的是HTML5的download属性
兼容IE写法
试了下,但在IE浏览器中没有生效 在 HTML5 中,download 属性是 标签的新属性。
download 属性规定被下载的超链接目标。
在 标签中必须设置 href 属性。
该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
此方法不支持IE、Opera、Safari,支持Firefox、google浏览器 解决方法(兼容 IE 浏览器)
如果下载不是图片,则替换
最近发现download属性有一个新的问题,那就是同源策略限制问题,如果下载的链接跟当前页面不是同源,就会存在点击后无法下载。 解决方法: 通过另开新的窗口,来解决同源策略问题。
在做知识管理系统的过程中,发现兼容 IE 和 360 的不能下载
再网上又找了另外一种兼容性写法:
这种写法可以正常使用
6. 通过使用 meta 标签来实现 url 自动跳转功能
可以在不使用 js 的操作下实现原生的 url 跳转功能
具体见下:(3s跳转页面)
7. mousemove和mouseout 在火狐浏览器和IE 浏览器失效
兼容写法如下
8. 强制 360 使用极速模式
9. 去除 IE 浏览器输入框的叉号
参考资料
[1]window.URL.createObjectURL Blob URL无法在Microsoft IE和Edge中打开 [2]JS下载文件的方法(浏览器兼容)