Question

我正在使用Angular2，我有一个下载文件的方法...一切正常但我使用<a>并使用href='routetodownload'下载文件我被要求禁用此链接在某些情况下，然后决定将<a>改为<button>（链接在任何一种方式作为按钮工作）并且这样做，而不是使用href属性，我已经创造了一个功能的 HTML

<button (click)="download(url)">download</button>

打字稿

download(url) {
    window.location.href = url;
}

但是这会在firefox上引起奇怪的行为，当我点击下载时，会出现保存对话框但页面刷新后面。使用<a href='url'>时，当出现另存为对话框时，页面不会刷新

仅在使用Firefox时才会发生这种情况......在这两种情况下，Edge和Chrome都能正常运行。

我想知道为什么window.location.href会导致Firefox自动刷新。

如果有人对此有任何疑问，请告诉我

更新

问题毕竟是NG Live Development Server（来自angular-cli ng serve命令）...我不知道为什么这只发生在Firefox上。问题是，我的应用程序托管在IIS上，我在使用它的解决方案中没有刷新。

我稍后会与angular-cli团队的成员一起检查这可能是什么行为......

谢谢大家。

此致

Answer 1

这只发生在本地angular-cli live服务器上，因为默认情况下所有路由都会路由到/index.html，这是应用程序的根目录。 Angular路由器找不到您的文件URL，只是将您带到默认路由。

Answer 2

我总是使用这个：

<a href="/images/myw3schoolsimage.jpg" download>

添加下载属性以获得更好的结果。

Answer 3

window.location.href尝试加载另一个HTML网页，但您处于特殊情况。

您应该将其替换为：

download(url) {
    window.open(url);
}

或尝试这样的事情：

download(url) {
    link = document.createElement('a');
    link.href = url;
    ...
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Answer 4

禁用链接的另一种方法是使用Javascript取消超链接激活事件。

某些事件被指定为可取消。对于这些事件，DOM实现通常具有与事件关联的默认操作。一个例子是Web浏览器中的超链接。当用户单击超链接时，默认操作通常是激活该超链接。在处理这些事件之前，实现必须检查已注册接收事件的事件侦听器并将事件分派给这些侦听器。然后，这些侦听器可以选择取消实现的默认操作或允许默认操作继续。对于浏览器中的超链接，取消操作将导致不激活超链接。

https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-cancelation

例如：

<a [attr.href]="isDisabled(link) ? null : 'link.href'"
   [class.disabled]="isDisabled(link)"
   (click)="!isDisabled(link)">
   {{ link.name}}
</a>

angular2：为什么window.location.href会导致Firefox上的页面刷新，但href不会

4 个答案: