js模拟元素点击事件以及下载网络资源文件方法乱炖

2019-6-20 一诺 js+jquery+ajax

一、a标签的download下载功能
  只能下载本地文件即同一个域名的文件(base64位图片地址也是属于本地地址)如
  <a href="/images/logo.png" download="logo">
  若是其它域名下的文件则无法下载会直接打开如
  <a href="http://yuanqiao.pw/images/logo.png" download="logo">
  兼容性
    浏览器    兼容版本    目前最新版本
    Chrome   14.0         >74
    Firefox    20.0         >67
    Safari     10.1         >12.1
    Opera     15.0         >60
    IE        不支持        11&Edge
  一般进行真实业务开发,目前不建议直接使用a标签加download,除非明确表示不用兼容ie并且下载资源是同域名下的,或者判断是ie则使用别的方式下载。

二、使用Location.href或者window.open('url') 下载
    location.href = 'http://xxx.com/aaa.zip';
    location可以下载无法在浏览器直接打开的文件,比如.zip/.csv等
    但是若是css、图片、js等就无法下载了

三、js下载图片base64为数据流文件兼容性解决方案
var dbData = '你的base64图片数据流';
// 如果是ie 不支持download 则使用msSaveOrOpenBlob
if('msSaveOrOpenBlob' in navigator){
  // 根据base64 内容 取得 图片 bolb
  // 去掉url的头,并转换为byte
  let bytes = window.atob(dbData.split(',')[1]);
  //处理异常,将ascii码小于0的转换为大于0
  let ab = new ArrayBuffer(bytes.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  let $Blob = new Blob( [ab] , {type : 'image/png'});
  window.navigator.msSaveOrOpenBlob($Blob, 'download');
}else{
  let link = document.createElement('a');
  link.href = dbData;
  link.download = "download";
  document.body.appendChild(link);
  // 低版本的Safari/Chrome 不支持非input/button以外的元素click事件
  if(link.click){
    link.click();
  }else{
    var evt = document.createEvent("MouseEvents");
    evt.initEvent("click", true, true);
    link.dispatchEvent(evt);
  }
  document.body.removeChild(link);
}

四、自动触发 .click() 方法
    兼容性:低版本的Safari/Chrome 不支持非input/button以外的元素click事件
    element.onclick = function() {
      alert('被点击');
    };
    // 如果是在js里面创建的元素火狐和ie/Edge需要document.body.appendChild(element);不然无效
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
    注意:虽然所有浏览器都支持.click()触发点击按钮事件,但是ie浏览器不支持download,所以无法通过download实现ie浏览器下载文件。

五、document.createEvent
    let element = document.createElement('a');
    // 创建的元素 ie/Edge需要document.body.appendChild(element);不然无效
    // 注意这里火狐不加这句代码也是可以的
    document.body.appendChild(link);
    兼容性,不小于ie9
    var ev = document.createEvent('HTMLEvents');
    ev.initEvent('click', false, true);
    element.dispatchEvent(ev);

六、document.all
if(document.all){
  // 只有ie浏览器才会进入(Edge不会进入)
}
    所以网上比较常见的代码如下
if (document.all) {
  // For IE
  element.click();
} else if (document.createEvent) {
  //FOR DOM2
  var ev = document.createEvent('HTMLEvents');
  ev.initEvent('click', true, true);
  element.dispatchEvent(ev);
}
    在Edge中是完全没有必要的
    若元素没有被append到body中,Edge是不支持的
    若元素已经在body中则哪个方法都是好用的
    正确的写法应该是如果动态创建的element元素
document.body.appendChild(element);
if(element.click){
  element.click();
}else{
  var ev = document.createEvent('HTMLEvents');
  ev.initEvent('click', true, true);
  element.dispatchEvent(ev);
}
document.body.removeChild(element);
// 如果element已经存在dom文档中则直接
if(element.click){
  element.click();
}else{
  var ev = document.createEvent('HTMLEvents');
  ev.initEvent('click', true, true);
  element.dispatchEvent(ev);
}
    推荐使用上述组合使用click()和createEvent(),这样可以提高兼容性及健壮性。

七、click()和createEvent()区别
    click()用于模拟元素上的鼠标单击。
    element.click();
    createEvent()事件方法,可以定义想要的各种事件
    然后通过元素去触发比如click事件
    ar ev = document.createEvent('HTMLEvents');
    ev.initEvent('click', true, true);
    element.dispatchEvent(ev);

八、js通过文件链接下载文件
    如果想用js下载任意连接文件如图片,css,js等暂无方法
    只能使用后端语言写个接口,前端调用下

标签: 模拟点击

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by emlog