如何获得在新浏览器选项卡中打开的链接？答案

【问题标题】：How do I get a link to open in a new browser tab?如何获得在新浏览器选项卡中打开的链接？
【发布时间】：2020-06-26 00:43:53
【问题描述】：

我有一个 html 文件，它利用 javascript 将多个文件加载到页面，显示带有锚标记的名称以查看每个上传的文件。当我单击该链接时，它会在同一窗口中打开。我需要它在新标签页中打开。 Target="_blank" 不起作用。我怀疑创建每个链接的 html 和关联的 javascript 之间存在冲突。经过一天的研究无法弄清楚。谢谢。

{% extends "main/base.html" %}
{% block title %}
Title
{% endblock %}


{% block content %}
<button type="button" class="btn btn-primary js-upload-files">
    <span class="glyphicon glyphicon-cloud-upload"></span> Upload Files
</button>

<input id="fileupload" type="file" name="file" multiple
       style="display: none;"
       data-url="{%url 'basic_upload' %}"
       data-form-data='{"csrfmiddlewaretoken": "{{csrf_token}}"}'>

<table id="gallery" class="table table-bordered">
    <thead>
        <tr>
            <th>File</th>
        </tr>
    </thead>
    <tbody>
        {% for file in files %}
            <tr>
                <td class="table_link"><a href="{{file.file.url }}" target="_blank">{{ file.file.name }}</a></td> <!-- does not open in a new tab. stays in same window -->
            </tr>
        {% endfor %}
    </tbody>

</table>
<p><a href="/" target="_blank">click here to open a new window</a></p> <!-- test to confirm that outside of table, a link will open in a new tab -->

{% endblock content%}

/* AND MY JS */

$(function () {
  /* 1. OPEN THE FILE EXPLORER WINDOW */
  $(".js-upload-files").click(function () {
    $("#fileupload").click();
  });

  /* 2. INITIALIZE THE FILE UPLOAD COMPONENT */
  $("#fileupload").fileupload({
    dataType: 'json',
    done: function (e, data) {  /* 3. PROCESS THE RESPONSE FROM THE SERVER */
      if (data.result.is_valid) {
        $("#gallery tbody").prepend(
          "<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"
        )
      }
    }
  });

});

【问题讨论】：

这能回答你的问题吗？ How to open link in new tab on html?
我将 target="_blank" 属性放在 href 之前或之后，但仍会导致在同一选项卡中打开链接。
@pretzelhammer — 不。那只是说要做他们已经在做的事情。
我在问题中看到的任何内容都不会阻止 target="_blank" 正常工作。您可以按照minimal reproducible example 页面上的建议创建可重现的测试用例。使用问题编辑器的实时演示功能。

标签： javascript html

【解决方案1】：

您希望此链接在新标签页中打开吗？

"<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"

您需要添加target="_blank" 所以应该是：

"<tr><td><a target='_blank' href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"

【讨论】：

亚历克斯 - 成功了。我不知何故没有为目标属性尝试该位置。再次感谢。