如何在单击文件链接时防止在Edge中出现空白选项卡

问题描述

我有一个带有多种链接的html页面，这些链接指向各种文件类型的文件，例如pdf，csv和zip。根据可用的浏览器插件，其中一些文件可以通过浏览器以内联方式打开，而其他文件则可以下载。

我不希望打开这些链接当前标签，所以每个人都有属性 target =blank。

这在大多数浏览器：

• 当用户点击一个指向可以内联显示的文件的链接时，该文件将显示在一个新标签中。 li>
  
• 否则，只要文件开始下载，就会打开一个新选项卡并立即关闭。用户停留在当前窗口中。然而，在Microsoft Edge中，第二种情况不起作用：新选项卡保持打开状态。这很烦人，因为用户现在正在查看无用的空标签。
  
  
  

  有什么办法可以防止这种情况发生吗？
  

  解决方案

  我不认为有什么可以阻止Edge的这种行为。您可以做的是更改HTML标记。

  
  
  

  在中使用下载属性<< ;没有 target 属性的> 元素。这样，浏览器将提示保存对话框而不是打开新的标签。

   < a href =myfile下载>下载< / A> 
    

  
  
  

  在这种情况下，浏览器不会显示该文件内联。
  
  

  如果您仍然希望客户端能够以内联方式查看文件，您可以检测客户端的浏览器;如果它是Edge，则使用下载属性，如果不使用 target 属性。另外，你可以使用类似于 navigator.mimetypes 的东西来检测哪些文件类型可以内联显示（参见）。

  
  
  

  这是我从另一篇文章中发现的检测函数（）

   函数isEDGE（）{
   return /Edge\/\d./i.test(navigator.userAgent）
  } 
    

  让您的< a> 标签没有 target 和下载属性。使用检测功能，并决定正确的属性。

  
  
  

  像这样：
  
  

   <$ c $ （$）$（'a'）。attr（'download'，'download'）; 
  （$） } else {
  '（'a'）。attr（'target'，'_ blank'）; 
  } 
  }）
    

  注意：
  我不确定边缘检测功能。

  
  

  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?

  解决方案

  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.

  这篇关于如何在单击文件链接时防止在Edge中出现空白选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！