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

2019-6-20 Jon 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等暂无方法
    只能使用后端语言写个接口,前端调用下

标签: 模拟点击

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

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

评论:

bkjheojbn
2021-02-25 17:55
js模拟元素点击事件以及下载网络资源文件方法乱炖 - 知向前端 | 袁巧的个人主页
[url=http://www.gac3444a7t8oyaie91w952vq6o6j5q45s.org/]ubkjheojbn[/url]
<a href="http://www.gac3444a7t8oyaie91w952vq6o6j5q45s.org/">abkjheojbn</a>
bkjheojbn http://www.gac3444a7t8oyaie91w952vq6o6j5q45s.org/
xcvzphlil
2021-02-13 17:12
js模拟元素点击事件以及下载网络资源文件方法乱炖 - 知向前端 | 袁巧的个人主页
[url=http://www.gi2hjvvsax1ym11h8500107u39d123yns.org/]uxcvzphlil[/url]
xcvzphlil http://www.gi2hjvvsax1ym11h8500107u39d123yns.org/
<a href="http://www.gi2hjvvsax1ym11h8500107u39d123yns.org/">axcvzphlil</a>
gfrskmrovx
2021-02-03 13:36
js模拟元素点击事件以及下载网络资源文件方法乱炖 - 知向前端 | 袁巧的个人主页
gfrskmrovx http://www.g9p431682esf66p4p845a3m56uvzigxos.org/
[url=http://www.g9p431682esf66p4p845a3m56uvzigxos.org/]ugfrskmrovx[/url]
<a href="http://www.g9p431682esf66p4p845a3m56uvzigxos.org/">agfrskmrovx</a>
pmthnvdfo
2021-01-22 00:57
js模拟元素点击事件以及下载网络资源文件方法乱炖 - 知向前端 | 袁巧的个人主页
[url=http://www.gs3aoe12zkv6b029l60kl63bx21r355ks.org/]upmthnvdfo[/url]
pmthnvdfo http://www.gs3aoe12zkv6b029l60kl63bx21r355ks.org/
<a href="http://www.gs3aoe12zkv6b029l60kl63bx21r355ks.org/">apmthnvdfo</a>
pcqlbfd
2021-01-19 19:20
js模拟元素点击事件以及下载网络资源文件方法乱炖 - 知向前端 | 袁巧的个人主页
<a href="http://www.g3sj01nn4cv26iou0z845j4kj407c3e0s.org/">apcqlbfd</a>
[url=http://www.g3sj01nn4cv26iou0z845j4kj407c3e0s.org/]upcqlbfd[/url]
pcqlbfd http://www.g3sj01nn4cv26iou0z845j4kj407c3e0s.org/
zeszdckdn
2021-01-16 08:06
js模拟元素点击事件以及下载网络资源文件方法乱炖 - 知向前端 | 袁巧的个人主页
zeszdckdn http://www.gpwwmwf7zk4ut7w35r4518u13s11490ls.org/
[url=http://www.gpwwmwf7zk4ut7w35r4518u13s11490ls.org/]uzeszdckdn[/url]
<a href="http://www.gpwwmwf7zk4ut7w35r4518u13s11490ls.org/">azeszdckdn</a>
gxrphorb
2021-01-14 07:30
js模拟元素点击事件以及下载网络资源文件方法乱炖 - 知向前端 | 袁巧的个人主页
<a href="http://www.g3lwby05r6uvj9c6spr3y69g7p033646s.org/">agxrphorb</a>
[url=http://www.g3lwby05r6uvj9c6spr3y69g7p033646s.org/]ugxrphorb[/url]
gxrphorb http://www.g3lwby05r6uvj9c6spr3y69g7p033646s.org/
yyhjrcere
2021-01-07 13:42
js模拟元素点击事件以及下载网络资源文件方法乱炖 - 知向前端 | 袁巧的个人主页
[url=http://www.gr71v9xu3a3b550c8g86rqwdkj4p7120s.org/]uyyhjrcere[/url]
yyhjrcere http://www.gr71v9xu3a3b550c8g86rqwdkj4p7120s.org/
<a href="http://www.gr71v9xu3a3b550c8g86rqwdkj4p7120s.org/">ayyhjrcere</a>
mnctronzq
2021-01-04 07:33
js模拟元素点击事件以及下载网络资源文件方法乱炖 - 知向前端 | 袁巧的个人主页
[url=http://www.g26h81gy94q0fa03qbp4t659lbw6v7x5s.org/]umnctronzq[/url]
<a href="http://www.g26h81gy94q0fa03qbp4t659lbw6v7x5s.org/">amnctronzq</a>
mnctronzq http://www.g26h81gy94q0fa03qbp4t659lbw6v7x5s.org/
qexvkzsxi
2020-12-31 14:12
js模拟元素点击事件以及下载网络资源文件方法乱炖 - 知向前端 | 袁巧的个人主页
<a href="http://www.g3zy8l480g3eqn329191ph6xuseh1j71s.org/">aqexvkzsxi</a>
[url=http://www.g3zy8l480g3eqn329191ph6xuseh1j71s.org/]uqexvkzsxi[/url]
qexvkzsxi http://www.g3zy8l480g3eqn329191ph6xuseh1j71s.org/

发表评论:

皖ICP备15010162号-1 ©2015-2020 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap