簡體   English   中英

如何獲得在新瀏覽器選項卡中打開的鏈接?

[英]How do I get a link to open in a new browser tab?

我有一個 html 文件,它利用 javascript 將多個文件加載到頁面,顯示帶有錨標記的名稱以查看每個上傳的文件。 當我單擊該鏈接時,它會在同一個 window 中打開。 我需要它在新標簽頁中打開。 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>"
        )
      }
    }
  });

});

您希望此鏈接在新標簽頁中打開嗎?

"<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>"

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM