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

最新推荐文章于 2025-05-24 20:36:00 发布

原创最新推荐文章于 2025-05-24 20:36:00 发布 · 4.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

51 篇文章

订阅专栏

本文介绍三种使用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;