动态添加a标签及打开下载链接,location.href用法&&与window.open区别

本文介绍三种使用JavaScript动态创建A标签实现文件下载的方法,包括处理非同源链接及不同文件类型的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

动态添加a标签,并打开下载链接

方法一、

//此处aa是你的网址
var a = document.createElement('a');
			a.setAttribute('href', aa);
			a.setAttribute('download', ''); // download属性
			a.setAttribute('target', '_blank');
			a.setAttribute('id', 'start');
			// 防止反复添加
			if (document.getElementById('start')) {
				document.body.removeChild(document.getElementById('start'));
			}
			document.body.appendChild(a);
			a.click();

方法二、

//此处aa是你的网址
var a = document.createElement('a');
			a.href = aa;   
			a.download = aa;
			a.click();
			return false;

注意:非同源链接download属性会无效,浏览器会直接打开图片。

方法三、

//此处aa是你的网址	
location.href=aa

我们大部分的情况下可以使用location.href = url来进行下载文件的,比如xlsx、doc等。但是,当我们下载的东西为比如图片,音

乐等,就是打开文件,而不是下载。

location.href用法:

self.location.href=”/url” 当前页面打开URL页面

location.href=”/url” 当前页面打开URL页面

windows.location.href=”/url” 当前页面打开URL页面,前面三个用法相同。

this.location.href=”/url” 当前页面打开URL页面

parent.location.href=”/url” 在父页面打开新页面

top.location.href=”/url” 在顶层页面打开新页面

如果页面中自定义了frame,那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址

window.location或window.open如何指定target?
这是一个经常遇到的问题,特别是在用frame框架的时候,解决办法:

window.location 改为 top.location 即可在顶部链接到指定页 
window.open("你的网址","_top"); 

window.open()和window.location()区别:

//window.open 用来打开新窗口 
//window.location 用来替换当前页,也就是重新定位当前页 
<input type="button" value="新窗口打开" onclick="window.open('http://www.baidu.com')"> 
<input type="button" value="当前页打开" onclick="window.location='http://www.baidu.com/'"> 

window.open()是可以在一个网站上打开另外的一个网站的地址
window.location()是只能在一个网站中打开本网站的网页

简单字符串拼接:(下次再详细说)

http://xxx.com是你现有的网址

res.data.data.info是从后台动态获取的那部分

let aa = "http://xxx.com/" + res.data.data.info;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值