CODEWITHSUNDEEP
htmlhyperlinkdownloadsafari
Carmen Cheshire
Carmen Cheshire

Reputation: 91

Clicking a download link in Safari causes all target=_blank links to download when clicked, is there a workaround?

Issue: After clicking on a link that downloads content, all other links that have target="_blank" and no download attr download when clicked instead of opening in the new tab.

Browser: Safari 11.0.2

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h3>Instructions</h3>
    <ul>
      <li>Click <a href='sample.txt' target='_blank'>ME</a> (download NOT present) to see page load in new tab then come back to this page</li>
      <li>Click <a href='sample.txt' download='sample.txt'>ME</a> (download PRESENT) to see it downloaded</li>
      <li>Click <a href='sample.txt' target='_blank'>ME</a> (download NOT present).  Safari forces this link to download</li>
    </ul>
  </body>

</html>

Code Sample: https://embed.plnkr.co/IscC6LTTmpEbAMLrxyYJ/

Replicate:

  1. Click a link with download attribute
  2. After the download click a link on the same page with target="_blank" and see that it's forced to download instead of opening in a new tab.

Update: I updated the issue hopefully to explain better what's happening. I've found a sort of workaround, but if I change the links to _self instead of _blank then they work like normal after a download.

Upvotes: 8

Views: 10377

Answers (2)

Carmen Cheshire
Carmen Cheshire

Reputation: 91

Not really an answer, but after reporting the issue to apple and waiting, we now have Safari 11.1.1 which seems to have resolved the issue, so marking resolved.

Upvotes: 1

Matthew Smith
Matthew Smith

Reputation: 510

With regards to your issue mention above, you have a couple of option to download a file:

Open file in same window:

<a href="sample.txt" target="_self">Click to Download</a>

Open file in new window:

<a href="sample.txt" target="_blank">Click to Download</a>

Force file download window:
However, if you want to force the file to download, by prompting a download pop-up box (to open or save), then all you need to do is add ‘download’ to the link as seen below:

<a href="sample.txt" download>Click to Download</a>

Therefore, your edited code could look something like this:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h3>Instructions</h3>
    <ul>
      <li>Click <a href='sample.txt' target='_blank'>ME</a> (download NOT present) to see page load in new tab then come back to this page</li>
      <li>Click <a href='sample.txt' download='sample.txt'>ME</a> (download PRESENT) to see it downloaded</li>
      <li>Click <a href='sample.txt' download>ME</a> (download NOT present).  Safari forces this link to download</li>
    </ul>
  </body>

</html>

Hope this helps you!

Upvotes: 7

Related Questions