Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 648
Carmen Cheshire Avatar asked Jan 19 '18 21:01

Carmen Cheshire


2 Answers

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!

like image 164
Matthew Smith Avatar answered Oct 05 '22 07:10

Matthew Smith


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.

like image 32
Carmen Cheshire Avatar answered Oct 05 '22 06:10

Carmen Cheshire