1

I have a html page with several links to files with various file types, such as pdf, csv, and zip. Depending on the available browser plugins, some of these files can be opened inline by the browser, whereas others will be downloaded.

I don't want such links to open in the current tab, so each one has the attribute target="blank".

This works fine in most browsers:

  • When the user clicks on a link to a file that can be displayed inline, the file is shown in a new tab.
  • Otherwise, a new tab is opened and immediately closed as soon as the file starts to download. The user stays in the current window.

In Microsoft Edge, however, the second case does not work: the new tab remains open. This is annoying, because the user is now looking at a useless empty tab.

Is there any way to prevent this from happening?

Rubrick
  • 308
  • 5
  • 13

2 Answers2

6

I don't think there is anything you can prevent Edge's this behaviour. What you can do is to change the HTML tag.

Use download attribute in <a> element without target attribute. This way, the browser will prompt save dialog instead of opening a new tab.

<a href="myfile" download>Download</a>

http://www.w3schools.com/tags/att_a_download.asp

In this case, the browser will not display the file inline.

If you still want your clients be able to see the files inline you can detect the client's browser; if it is Edge then use the download attribute, if not use target attribute. In addition, you can use something like navigator.mimetypes to detect which file types can be displayed inline (see https://developer.mozilla.org/en-US/docs/Web/API/NavigatorPlugins/mimeTypes).

Here is the detect function which I took from another post (How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript?)

function isEDGE(){
 return /Edge\/\d./i.test(navigator.userAgent)
}

Leave your <a> tags with no target and download attributes. Use detect function and decide on the right attribute.

Like this:

$(document).ready(function(){
    if(isEDGE()) {
        $('a').attr('download','download');
    } else {
        $('a').attr('target','_blank');
    }
})

Note: I am not sure about Edge detecting function.

Community
  • 1
  • 1
er-han
  • 1,859
  • 12
  • 20
  • Thanks for pointing me towards the the `download` attribute! That makes the experience a lot better already. However, this forces **all** files to download. What I would like is to show the file inline whenever the browser supports this, and otherwise download the file. – Rubrick Feb 03 '17 at 09:41
  • @Rubrick as i mentioned in the answer, what i would i do is to detect the browser and after that to decide which attribute to use. I don't think there is a way to find out if the client's browser supports inline file displaying. – er-han Feb 03 '17 at 11:05
  • 1
    After some more searching, I stumbled upon the `navigator.mimetypes` property (https://developer.mozilla.org/en-US/docs/Web/API/NavigatorPlugins/mimeTypes). I think this can be used to find out which files can be displayed inline. – Rubrick Feb 03 '17 at 12:32
  • @Rubrick yes, i liked this property. It can be helpful. I found a function in this link, which may help you: http://stackoverflow.com/a/29108246/5611328 – er-han Feb 03 '17 at 13:50
  • It doesn't seem sensible to use browser sniffing (which went out of fashion a long time ago) along with non–standard features. – RobG Feb 26 '17 at 11:53
0

Method 1: I suggest you clear the Clear browsing data option of Microsoft Edge and check if you face the issue. To do so perform the steps below. Click on the More actions icon next to the feedback icon present on top right corner of the Edge. Select Settings and click on Choose what to clear. Check the boxes Browsing history, Cookies and saved website data and Cached data and files and click on Clear.

Method 2: If you are using any Proxy connection, then try disabling the proxy connection and check. Follow the steps to disable proxy: Click the Settings icon at the top right corner in internet explorer. Click the Tools button, and then click Internet Options. Click the Connections tab, and then click LAN settings. Uncheck the box next to “proxy server for your LAN”. Click on OK to save the setting and close window. Now check the issue by opening Edge.

Brandon Starks
  • 1
  • 1
  • Can you explain how this is relevant to my question? To make it clear: I'm not looking for a solution where the user has to do something in the browser, but for something I can do as programmer to prevent this from happening when an Edge user uses my web app. – Rubrick Feb 02 '17 at 13:21
  • Your answer is for the client side, what the OP is looking for is a solution for server side. – er-han Feb 02 '17 at 13:50