Làm cách nào để mở liên kết trong cửa sổ mới?

Tôi có một trình xử lý nhấp chuột cho một liên kết cụ thể, bên trong đó tôi muốn làm điều gì đó tương tự như sau:

window.location = url

Tuy nhiên, tôi cần điều này để thực sự mở url trong một cửa sổ mới, làm cách nào để thực hiện việc này?

Bạn có thể thích:

window.open('url', 'window name', 'window settings')

jQuery:

$('a#link_id').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

Bạn cũng có thể thiết lập targetđể _blankthực sự.

Đây là cách để buộc mục tiêu bên trong trình xử lý nhấp chuột:

$('a#link_id').click(function() {
    $(this).attr('target', '_blank');
});

bạn sẽ cần sử dụng window.open(url);

tài liệu tham khảo:
http://www.htmlcodetutorial.com/linking/linking_famsupp_120.html
http://www.w3schools.com/jsref/met_win_open.asp

Bạn cũng có thể sử dụng phương thức jquery prop () cho việc này.

$(function(){
  $('yourselector').prop('target', '_blank');
}); 

Tôi vừa tìm thấy một giải pháp thú vị cho vấn đề này. Tôi đang tạo các khoảng có chứa thông tin dựa trên lợi nhuận từ một dịch vụ web. Tôi đã nghĩ về việc cố gắng đặt một liên kết xung quanh khoảng thời gian để nếu tôi nhấp vào nó, "a" sẽ bắt được nhấp chuột.

Nhưng tôi đang cố gắng nắm bắt cú nhấp chuột với khoảng cách ... vì vậy tôi nghĩ tại sao không làm điều này khi tôi tạo khoảng cách.

var span = $('<span id="something" data-href="'+url+'" />');

Sau đó, tôi đã liên kết một trình xử lý nhấp chuột vào khoảng thời gian tạo liên kết dựa trên thuộc tính 'data-href':

span.click(function(e) {
    e.stopPropagation();
    var href = $(this).attr('data-href');
    var link = $('<a href="http://' + href + '" />');
    link.attr('target', '_blank');
    window.open(link.attr('href'));
});

Điều này thành công cho phép tôi nhấp vào một khoảng và mở một cửa sổ mới với một url thích hợp.

Có chuyện gì vậy <a href="myurl.html" target="_blank">My Link</a>? Không cần Javascript ...

giải pháp này cũng đã xem xét trường hợp url trống và vô hiệu hóa (màu xám) liên kết trống.

$(function() {
  changeAnchor();
});

function changeAnchor() {
  $("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
    $(this).css("background", "none");
    $(this).css("font-weight", "normal");

    var url = $(this).attr('href').trim();
    if (url == " " || url == "") { //disable empty link
      $(this).attr("class", "disabled");
      $(this).attr("href", "javascript:void(0)");
    } else {
      $(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
    }
  });
}

a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>

Hãy lưu ý nếu bạn muốn thực hiện các yêu cầu AJAX bên trong hàm xử lý sự kiện cho sự kiện nhấp chuột. Vì lý do nào đó, Chrome (và có thể các trình duyệt khác) sẽ không mở tab / cửa sổ mới.

Đây không phải là một bản sửa lỗi rất hay nhưng nó hoạt động:

CSS:

.new-tab-opener
{
    display: none;
}

HTML:

<a data-href="http://www.google.com/" href="javascript:">Click here</a>
<form class="new-tab-opener" method="get" target="_blank"></form>

Javascript:

$('a').on('click', function (e) {    
    var f = $('.new-tab-opener');
    f.attr('action', $(this).attr('data-href'));
    f.submit();
});

Ví dụ trực tiếp: http://jsfiddle.net/7eRLb/

Microsoft IE không hỗ trợ tên là đối số thứ hai.

window.open('url', 'window name', 'window settings');

Vấn đề là window name. Điều này sẽ hoạt động:

window.open('url', '', 'window settings')

Microsoft chỉ cho phép các đối số sau, Nếu sử dụng đối số đó:

• _chỗ trống
• _phương tiện truyền thông
• _cha mẹ
• _Tìm kiếm
• _chính mình
• _hàng đầu

Kiểm tra trang web này của Microsoft