Mở một URL trong một tab mới (và không phải là một cửa sổ mới)

2102

Tôi đang cố gắng mở một URL trong một tab mới, trái ngược với cửa sổ bật lên.

Tôi đã thấy các câu hỏi liên quan trong đó các câu trả lời sẽ giống như:

window.open(url,'_blank');
window.open(url);

Nhưng không ai trong số họ làm việc cho tôi, trình duyệt vẫn cố mở một cửa sổ bật lên.

javascript 
— dấu
nguồn
85
Đây thường là một vấn đề ưu tiên. Một số người thích cửa sổ (và bảo vệ quyết liệt hành vi này), một số tab (và bảo vệ quyết liệt hành vi này). Vì vậy, bạn sẽ đánh bại một hành vi thường được coi là vấn đề của hương vị, không phải là thiết kế.
— Jared Farrish
42
Javascript không biết gì về trình duyệt của bạn và các tab so với cửa sổ, vì vậy nó thực sự phụ thuộc vào trình duyệt để quyết định cách mở một cửa sổ mới.
— Andrey
3
Làm cách nào tôi có thể định cấu hình Chrome để hiển thị nó trong tab mới, trái ngược với cửa sổ bật lên?
— Đánh dấu
8
Gmail thực hiện điều này bằng cách nào đó, ít nhất là trong Chrome. Shift + nhấp vào một hàng email và bạn mở email đó trong một cửa sổ mới. Ctrl + nhấp và bạn mở nó trong một tab mới. Vấn đề duy nhất: đào sâu vào mã bị xáo trộn của gmail là một PITA
— Sergio
48
@Sergio, đó là hành vi trình duyệt mặc định cho bất kỳ liên kết nào. (Ít nhất là đối với Chrome và Firefox.) Không liên quan gì đến Gmail.
— Qtax

Câu trả lời:

929

Không có gì tác giả có thể làm có thể chọn để mở trong một tab mới thay vì một cửa sổ mới; nó là một sở thích của người dùng . (Lưu ý rằng tùy chọn người dùng mặc định trong hầu hết các trình duyệt là dành cho các tab mới, do đó, một thử nghiệm tầm thường trên trình duyệt nơi tùy chọn đó không được thay đổi sẽ không chứng minh điều này.)

CSS3 đề xuất mục tiêu mới , nhưng đặc điểm kỹ thuật đã bị bỏ qua .

Điều ngược lại là không đúng sự thật; bằng cách chỉ định kích thước cho cửa sổ trong đối số thứ ba window.open(), bạn có thể kích hoạt cửa sổ mới khi tùy chọn dành cho các tab.

— Quentin
nguồn
42
@AliHaideri Javascript không liên quan gì đến cách mở tab / cửa sổ mới. Tất cả đều được xác định bởi cài đặt trình duyệt của bạn. Sử dụng window.opencho trình duyệt mở một cái gì đó mới, sau đó trình duyệt sẽ mở ra những gì được chọn trong cài đặt của nó - tab hoặc cửa sổ. Trong các trình duyệt bạn đã kiểm tra, thay đổi cài đặt để mở trong cửa sổ mới thay vì tab và bạn sẽ thấy các giải pháp của người khác bị sai.
— Ian
239
Hai điều làm lãng phí thời gian của người khác hơn là nói với họ điều gì đó không thể thực hiện được. (1) Nói với họ những điều không thể làm được có thể được thực hiện. (2) Giữ im lặng và để họ tiếp tục tìm cách làm điều gì đó không thể làm được.
— Quentin
8
@Cupdding - Tài liệu thường không bận tâm để mô tả các tính năng không tồn tại. evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/...
— Quentin
9
@Neel - Bởi vì nó ngắn gọn đến điểm về một chủ đề mà nhiều người muốn biết.
— Quentin
4
Các tác giả có thể làm những việc (chủ yếu là viết mã khác nhau). Không ai trong số những thứ đó sẽ kích hoạt một tab thay vì một cửa sổ.
— Quentin
1733

Đây là một mẹo 

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

Trong hầu hết các trường hợp, điều này sẽ xảy ra trực tiếp trong onclicktrình xử lý cho liên kết để ngăn chặn trình chặn cửa sổ bật lên và hành vi "cửa sổ mới" mặc định. Bạn có thể làm theo cách này hoặc bằng cách thêm một trình lắng nghe sự kiện vào DOMđối tượng của bạn . 

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

http://www.tutsplanet.com/open-url-new-tab-USE-javascript/

— Rinto George
nguồn
117
Không hoạt động. Có một tin nhắn ở bên phải của thanh địa chỉ: Popup bị chặn . Sau đó, tôi cho phép quảng cáo. Và voilà, nó mở trong một cửa sổ bật lên, không phải là một tab ! Chrome 22.0.1229.94 trên OS X Lion.
— nalply
39
@ b1naryatr0phy Đó là vì bạn không thực sự kiểm tra nó đúng cách. Thay đổi cài đặt trong trình duyệt của bạn. Cho dù nó được mở trong một tab hoặc cửa sổ được xác định bởi cài đặt trình duyệt của bạn. Bạn không thể làm gì bằng cách gọi window.open (hoặc bất kỳ Javascript nào) để chọn cách mở cửa sổ / tab mới.
— Ian
Câu hỏi: Tôi đặt url mà không có giao thức (ví dụ: my.site.com/Controll/Index). Kết quả là tôi nhận được cửa sổ mới (tab) theo url, chẳng hạn như url của trang hiện tại (từ đó tôi sử dụng chức năng OpenInNewTab) cộng với được chuyển vào url chức năng. Với cửa sổ giao thức mở bằng liên kết chính xác. Tại sao?
— dùng2167382
2
var win = window.open (url, '_blank'); '_blank' không cần thiết, đối với window.open () , tham số thứ hai là strWindowName, cho: Tên chuỗi cho cửa sổ mới. Tên có thể được sử dụng làm mục tiêu của các liên kết và biểu mẫu bằng cách sử dụng thuộc tính đích của phần tử <a> hoặc <form>. Tên không được chứa bất kỳ ký tự khoảng trắng. Lưu ý rằng strWindowName không chỉ định tiêu đề của cửa sổ mới.
— hydRAnger
Có cách nào để làm cho điều này mở một tab mới mà không phải là một iframe được đóng hộp cát không? Khi tôi sử dụng, tôi gặp lỗi CORS vì giá trị document.domain không bị thay đổi khi nó được mở dưới dạng iframe.
— Id van der Zee
380

window.open()sẽ không mở trong một tab mới nếu nó không xảy ra trong sự kiện nhấp thực tế. Trong ví dụ đã cho, URL đang được mở trong sự kiện nhấp thực tế. Điều này sẽ hoạt động với điều kiện người dùng có các cài đặt phù hợp trong trình duyệt .

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });
</script>

Tương tự, nếu bạn đang cố thực hiện một cuộc gọi Ajax trong hàm nhấp chuột và muốn mở một cửa sổ thành công, hãy đảm bảo bạn đang thực hiện cuộc gọi Ajax với async : falsetùy chọn được đặt.

— Venkat Kotra
nguồn
28
Sẽ rất tốt nếu đánh dấu câu này là câu trả lời ĐÚNG. Các thử nghiệm của tôi với Chrome v26 (Windows) xác nhận rằng nếu mã nằm trong trình xử lý nhấp chuột của nút, nó sẽ mở một tab mới và nếu mã được gọi theo chương trình, ví dụ từ bảng điều khiển, thì nó sẽ mở một cửa sổ mới.
— CyberFonic
2
@Ian Từ thử nghiệm của tôi trên các trình duyệt có cài đặt mặc định, câu trả lời này hoạt động trong trường hợp câu trả lời ở trên không. Câu trả lời được chấp nhận cho biết "không có gì bạn có thể làm" chỉ đúng khi người dùng đã thay đổi cài đặt mặc định.
— Garfield
@Ian Để rõ ràng, tôi đã đề cập đến điều này trong cảnh báo câu trả lời về cài đặt người dùng. "Điều này sẽ hoạt động với điều kiện người dùng có các cài đặt phù hợp trong trình duyệt." Tôi nghĩ rằng phần lớn người dùng không thay đổi cài đặt trình duyệt và câu trả lời này hoạt động với phần lớn trong số họ.
— Venkat Kotra
async: falsekhông hoạt động trong Chrome. Để mở một cửa sổ mới từ cuộc gọi lại, trước tiên bạn cần mở một cửa sổ trống trước khi gửi yêu cầu HTTP và sau đó cập nhật nó. Đây là một hack tốt .
— attacomsian
250

window.open Không thể mở Popups đáng tin cậy trong một tab mới trong tất cả các trình duyệt

Các trình duyệt khác nhau thực hiện hành vi window.open theo những cách khác nhau, đặc biệt là liên quan đến tùy chọn trình duyệt của người dùng. Bạn không thể mong đợi hành vi tương tự window.openlà đúng trên tất cả Internet Explorer, Firefox và Chrome, vì các cách khác nhau mà chúng xử lý tùy chọn trình duyệt của người dùng.

Ví dụ: người dùng Internet Explorer (11) có thể chọn mở cửa sổ bật lên trong cửa sổ mới hoặc tab mới, bạn không thể buộc người dùng Internet Explorer 11 mở cửa sổ bật lên theo cách nhất định window.open , như được nhắc đến trong câu trả lời của Quentin .

Đối với người dùng Firefox (29), việc sử dụng window.open(url, '_blank') phụ thuộc vào tùy chọn tab trình duyệt của họ, mặc dù bạn vẫn có thể buộc họ mở cửa sổ bật lên trong một cửa sổ mới bằng cách chỉ định chiều rộng và chiều cao (xem phần "Điều gì về Chrome?" Bên dưới).

Trình diễn

Chuyển đến cài đặt trình duyệt của bạn và định cấu hình nó để mở cửa sổ bật lên trong một cửa sổ mới.

Internet Explorer (11)

Hộp thoại cài đặt Internet Explorer 1

Hộp thoại cài đặt tab Internet Explorer

Trang thử nghiệm

Sau khi thiết lập Internet Explorer (11) để mở cửa sổ bật lên trong một cửa sổ mới như đã trình bày ở trên, hãy sử dụng trang thử nghiệm sau để kiểm tra window.open:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

Quan sát rằng các cửa sổ bật lên được mở trong một cửa sổ mới, không phải là một tab mới.

Bạn cũng có thể kiểm tra các đoạn mã trên ở trên Firefox (29) với tùy chọn tab được đặt thành các cửa sổ mới và xem kết quả tương tự.

Chrome thì sao? Nó thực hiệnwindow.open khác với Internet Explorer (11) và Firefox (29).

Tôi không chắc chắn 100%, nhưng có vẻ như Chrome (phiên bản 34.0.1847.131 m) dường như không có bất kỳ cài đặt nào mà người dùng có thể sử dụng để chọn có hay không mở cửa sổ bật lên trong một cửa sổ mới hoặc tab mới (như Firefox và Internet Explorer có). Tôi đã kiểm tra tài liệu Chrome để quản lý cửa sổ bật lên , nhưng nó không đề cập bất cứ điều gì về loại điều đó.

Ngoài ra, một lần nữa, các trình duyệt khác nhau dường như thực hiện hành vi window.open khác nhau. Trong Chrome và Firefox, việc chỉ định chiều rộng và chiều cao sẽ buộc cửa sổ bật lên, ngay cả khi người dùng đã đặt Firefox (29) để mở các cửa sổ mới trong một tab mới (như đã đề cập trong câu trả lời cho JavaScript mở trong một cửa sổ mới, không phải tab ) :

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <code>window.open(url)</code>
    </button>
  </body>
</html>

Tuy nhiên, đoạn mã tương tự ở trên sẽ luôn mở một tab mới trong Internet Explorer 11 nếu người dùng đặt các tab làm tùy chọn trình duyệt của họ, thậm chí không chỉ định chiều rộng và chiều cao sẽ buộc cửa sổ bật lên mới cho họ.

Vì vậy, hành vi của window.openChrome dường như là mở cửa sổ bật lên trong tab mới khi được sử dụng trong một onclicksự kiện, để mở chúng trong các cửa sổ mới khi được sử dụng từ bảng điều khiển trình duyệt ( như được người khác lưu ý ) và mở chúng trong các cửa sổ mới khi quy định với chiều rộng và chiều cao.

Tóm lược

Các trình duyệt khác nhau thực hiện hành vi window.open khác nhau liên quan đến sở thích trình duyệt của người dùng. Bạn không thể mong đợi hành vi tương tự window.openlà đúng trên tất cả Internet Explorer, Firefox và Chrome, vì các cách khác nhau mà chúng xử lý tùy chọn trình duyệt của người dùng.

Đọc thêm

— Peter Mortensen
nguồn
12
Bạn không trả lời câu hỏi, bạn chỉ chứng minh rằng window.open không nhất quán.
— BentOnCoding
223

Lót:

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

Nó tạo ra một ayếu tố ảo , cung cấp cho nó target="_blank"để nó mở trong một tab mới, cung cấp cho nó một cách thích hợp url hrefvà sau đó nhấp vào nó.

Và nếu bạn muốn, dựa vào đó bạn có thể tạo một số chức năng:

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    href,
  }).click();
}

và sau đó bạn có thể sử dụng nó như:

openInNewTab("https://google.com");

Lưu ý quan trọng:

openInNewTab(cũng như mọi giải pháp khác trên trang này) phải được gọi trong quá trình gọi lại hành động của người dùng - ví dụ: bên trong sự kiện nhấp chuột (không cần thiết trong chức năng gọi lại trực tiếp, nhưng trong hành động nhấp chuột).

Nếu bạn sẽ gọi thủ công trong một số thời điểm ngẫu nhiên (ví dụ: trong một khoảng thời gian hoặc sau phản hồi của máy chủ) - nó có thể bị trình duyệt chặn (điều này có nghĩa là nó sẽ là một rủi ro bảo mật và có thể dẫn đến trải nghiệm người dùng rất kém )

— bánh6k
nguồn
8
Cảm ơn bạn. JS thuần của bạn có một phần bị thiếu - như Luke Alderton đã viết (xem bên dưới), bạn cần đính kèm phần tử đã tạo vào phần thân tài liệu, trong mã của bạn, nó được treo trong khoảng trống ít nhất là trong Firefox 37, nó không làm gì cả .
— greenoldman
4
@mcginniwa Bất kỳ hành động nào như thế này - nếu không được kích hoạt bởi hành động của người dùng như nhấp chuột sẽ biến trình chặn cửa sổ bật lên. Hãy tưởng tượng rằng bạn chỉ có thể mở bất kỳ url nào bằng Javascript mà không cần hành động của người dùng - điều đó sẽ khá nguy hiểm. Nếu bạn đặt mã này bên trong sự kiện như chức năng nhấp chuột - nó sẽ hoạt động tốt - nó giống với tất cả các giải pháp được đề xuất ở đây.
— pie6k
4
Bạn có thể đơn giản hóa mã của mình như sau: $('<a />',{'href': url, 'target', '_blank'}).get(0).click();
— shaedrich 22/12/17
5
@shaedrich lấy cảm hứng từ snipped của bạn Tôi đã thêm một lớp lót không jquery:Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
— pie6k
Nó không hoạt động trong FF!
— Nolesh
91

Nếu bạn sử dụng window.open(url, '_blank'), nó sẽ bị chặn (trình chặn cửa sổ bật lên) trên Chrome.

Thử cái này:

//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

Với JavaScript thuần túy,

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
— An toàn hơn
nguồn
Nhưng trong câu hỏi này, họ không đề cập đến tác giả trang web. Chỉ muốn mở một url trong cửa sổ mới hoặc tab mới. Đây là phụ thuộc trình duyệt. Chúng ta không cần bận tâm về tác giả. Vui lòng kiểm tra fiddle đó. Nó đang hoạt động
— Mohammed Safeer
Người ta thấy rằng, nó không hoạt động trên js fiddle và plunker, nhưng hoạt động khi bạn tạo một tệp html. Đó là vì js fiddle, đầu ra được hiển thị trên iframe, vì vậy cửa sổ mới bị chặn vìthe request was made in a sandboxed frame whose 'allow-popups' permission is not set
— Mohammed Safeer
67

Để giải thích câu trả lời của Steven Spielberg, tôi đã làm điều này trong trường hợp như vậy:

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

Bằng cách này, ngay trước khi trình duyệt sẽ theo liên kết tôi đang đặt thuộc tính đích, vì vậy nó sẽ làm cho liên kết mở trong một tab hoặc cửa sổ mới ( tùy thuộc vào cài đặt của người dùng ).

Ví dụ một dòng trong jQuery:

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

Điều này cũng có thể được thực hiện chỉ bằng cách sử dụng API DOM của trình duyệt riêng:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
— arikfr
nguồn
58

Tôi sử dụng sau đây và nó hoạt động rất tốt!

window.open(url, '_blank').focus();
— Ezequiel García
nguồn
2
Điều này có thể mở trong một tab hoặc cửa sổ mới tùy thuộc vào cài đặt trình duyệt. Câu hỏi cụ thể là về việc mở trong một tab mới ngay cả khi các tùy chọn dành cho một cửa sổ mới.
— Quentin
19

Một sự thật thú vị là tab mới không thể được mở nếu hành động không được người dùng gọi (nhấp vào nút hoặc một cái gì đó) hoặc nếu nó không đồng bộ, chẳng hạn, điều này sẽ KHÔNG mở trong tab mới:

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

Nhưng điều này có thể mở trong một tab mới, tùy thuộc vào cài đặt trình duyệt:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
— karaxuna
nguồn
2
Điều này đang bị chặn dưới dạng cửa sổ bật lên trong Firefox 28, Chrome 34b và Safari 7.0.2, tất cả các cài đặt chứng khoán. :(
— Steve Meisner
1
"Không thể mở tab mới nếu người dùng không thực hiện hành động (nhấp vào nút hoặc thứ gì đó) hoặc nếu nó không đồng bộ" - đúng với Chrome, nhưng không đúng với tất cả các trình duyệt. Lưu <script>open('http://google.com')</script>vào một .htmltệp và mở nó trong bản cài đặt mới của phiên bản Firefox gần đây; bạn sẽ quan sát thấy Firefox vui vẻ mở Google trong một tab mới (có lẽ sau khi bạn bảo nó cho phép cửa sổ bật lên), chứ không phải một cửa sổ mới.
— Đánh dấu Amery
13

Chỉ cần bỏ qua các tham số [strWindowFeatures] sẽ mở ra một tab mới, UNLESS cài đặt trình duyệt ghi đè (cài đặt trình duyệt bỏ qua JavaScript).

Cửa sổ mới

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

Tab mới

var myWin = window.open(strUrl, strWindowName);

-- hoặc là --

var myWin = window.open(strUrl);
— MannyC
nguồn
11 
(function(a){
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e){
    e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
    return e
}(document.createEvent('MouseEvents'))))}(document.createElement('a')))
— spirinvladimir
nguồn
11

Bạn có thể sử dụng một mẹo với form:

$(function () {
    $('#btn').click(function () {
        openNewTab("http://stackoverflow.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

bản demo jsFiddle

— MãNinja
nguồn
4
Nếu bạn thực hiện theo phương pháp này, hãy đảm bảo rằng url không có thông số truy vấn vì chúng sẽ bị bỏ qua khi gửi biểu mẫu. Một giải pháp là nhúng các phần tử đầu vào ẩn bên trong phần tử biểu mẫu có namekhóa & valuelàm giá trị cho tất cả các tham số bên trong tham số truy vấn. Và sau đó gửi biểu mẫu
— Mudassir Ali
điều này có thể được thực hiện đơn giản hơn với một athẻ thay vì một biểu mẫu và sử dụng .click()phương thức jQuery để "gửi" nó. kiểm tra câu trả lời của tôi
10

Điều này không liên quan gì đến cài đặt trình duyệt nếu bạn đang cố mở một tab mới từ một chức năng tùy chỉnh.

Trong trang này, mở bảng điều khiển JavaScript và gõ:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

Và nó sẽ cố gắng mở một cửa sổ bật lên bất kể cài đặt của bạn là gì, bởi vì 'nhấp chuột' xuất phát từ một hành động tùy chỉnh.

Để hành xử giống như một 'nhấp chuột' thực tế trên một liên kết, bạn cần làm theo lời khuyên của @ spirinvladimir và thực sự tạo ra nó:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

Dưới đây là một ví dụ hoàn chỉnh (không thử nó trên jsFiddle hoặc các trình soạn thảo trực tuyến tương tự, vì nó sẽ không cho phép bạn chuyển hướng đến các trang bên ngoài từ đó):

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>
— chipairon
nguồn
1
Cuối cùng tôi đã đi đến một giải pháp khác, nơi tôi làm w = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...)theo theandystratton.com/2012/iêu
— Paul Tomblin
11
@FahadAbidJanjua Điều đó hoàn toàn không đúng. Nó vẫn phụ thuộc vào cài đặt trình duyệt. Không có gì trong thông số kỹ thuật HTML hoặc Javascript tuyên bố rằng "hành động tùy chỉnh" phải mở trong cửa sổ bật lên thay vì tab. Thật vậy, không có trình duyệt nào trên máy hiện tại của tôi hiển thị hành vi này.
— nmclean
7 
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}
— Andrew Luca
nguồn
1
Điều này có thể mở trong một tab hoặc cửa sổ mới tùy thuộc vào cài đặt trình duyệt. Câu hỏi cụ thể là về việc mở trong một tab mới ngay cả khi các tùy chọn dành cho một cửa sổ mới.
— Quentin
3

JQuery

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

Mã não

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
— Bryan
nguồn
Điều này có thể mở trong một tab hoặc cửa sổ mới tùy thuộc vào cài đặt trình duyệt. Câu hỏi cụ thể là về việc mở trong một tab mới ngay cả khi các tùy chọn dành cho một cửa sổ mới.
— Quentin
2

Hoặc bạn chỉ có thể tạo một yếu tố liên kết và nhấp vào nó ...

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

Điều này không nên bị chặn bởi bất kỳ trình chặn cửa sổ bật lên ... Hy vọng.

— Luke Alderton
nguồn
2

Có một câu trả lời cho câu hỏi này và nó không phải là không.

Tôi tìm thấy một công việc dễ dàng xung quanh:

Bước 1: Tạo một liên kết vô hình:

<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>

Bước 2: Nhấp vào liên kết đó theo chương trình:

document.getElementById("yourId").click();

Bạn đi đây! Làm việc một cơ duyên cho tôi.

— ALZlper
nguồn
Điều này có thể mở trong một tab hoặc cửa sổ mới tùy thuộc vào cài đặt trình duyệt. Câu hỏi cụ thể là về việc mở trong một tab mới ngay cả khi các tùy chọn dành cho một cửa sổ mới.
— Quentin
1

nhập mô tả hình ảnh ở đây

Tôi đã nghiên cứu rất nhiều thông tin về cách mở tab mới và ở trên cùng một tab. Tôi đã tìm thấy một mẹo nhỏ để làm điều đó. Giả sử bạn có url mà bạn cần mở - newUrl và url cũ - currentUrl , mà bạn cần duy trì sau khi mở tab mới. Mã JS sẽ trông giống như tiếp theo:

// init urls
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
// open window with url of current page, you will be automatically moved 
// by browser to a new opened tab. It will look like your page is reloaded
// and you will stay on same page but with new page opened
window.open(currentUrl , '_blank');
// on your current tab will be opened new url
location.href = newUrl;
— Vaha
nguồn
Câu hỏi là về việc mở một tab mới khi sở thích của người dùng là mở chúng trong các cửa sổ mới. Nó không hỏi làm thế nào để mở một URL trong một tab mới trong khi mở một URL khác trong tab hiện có cùng một lúc.
— Quentin
0

Làm thế nào về việc tạo ra một <a>với _blanknhư targetgiá trị thuộc tính vàurl như href, với phong cách hiển thị: ẩn với aa yếu tố trẻ em? Sau đó thêm vào DOM và sau đó kích hoạt sự kiện nhấp chuột trên phần tử con.

CẬP NHẬT

Điều đó không hiệu quả. Trình duyệt ngăn chặn hành vi mặc định. Nó có thể được kích hoạt theo chương trình, nhưng nó không tuân theo hành vi mặc định.

Kiểm tra và xem cho chính mình: http://jsfiddle.net/4S4ET/

— Victor
nguồn
-1

Mở một tab mới từ bên trong tiện ích mở rộng Firefox (Mozilla) sẽ như sau:

gBrowser.selectedTab = gBrowser.addTab("http://example.com");
— Smile4ever
nguồn
-1

Cách này tương tự như giải pháp trên nhưng được thực hiện khác

.social_icon -> một số lớp có CSS 

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>


 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });
— CG_DEV
nguồn
-1

Đây có thể là một hack, nhưng trong Firefox nếu bạn chỉ định tham số thứ ba, 'fullscreen = yes', nó sẽ mở ra một cửa sổ mới.

Ví dụ,

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

Nó dường như thực sự ghi đè cài đặt trình duyệt.

— Kunal
nguồn
-1

công việc này đối với tôi, chỉ cần ngăn sự kiện, thêm url vào <a> tagsau đó kích hoạt sự kiện nhấp vào đó tag.

Js
$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href',"http://someurl.com");
        $(this).trigger('click');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>
— Carlos Salazar
nguồn
Điều này có thể mở trong một tab hoặc cửa sổ mới tùy thuộc vào cài đặt trình duyệt. Câu hỏi cụ thể là về việc mở trong một tab mới ngay cả khi các tùy chọn dành cho một cửa sổ mới.
— Quentin
-1

Các window.open(url)url sẽ mở trong Tab trình duyệt mới. Dưới đây thay thế JS

let a= document.createElement('a');
a.target= '_blank';
a.href= 'https://support.wwf.org.uk/';
a.click(); // we don't need to remove 'a' from DOM because we not add it

đây là ví dụ hoạt động (đoạn trích stackoverflow không cho phép mở tab mới)

— Kamil Kiełczewski
nguồn
"Window.open (url) sẽ mở url trong Tab trình duyệt mới" - Nó sẽ theo sở thích của người dùng cho một cửa sổ mới hoặc một tab mới. Nó sẽ không buộc một tab mới khi ưu tiên cho một cửa sổ. (Đó là những gì câu hỏi về). Điều tương tự áp dụng cho mục tiêu = _blank.
— Quentin
Cả hai cách tiếp cận mà bạn đề xuất đã được đề cập (và chỉ trích) nhiều lần trong 56 câu trả lời chưa được xóa trước đó cho câu hỏi này.
— Quentin
-1

Việc mở URL trong tab mới hay cửa sổ mới, thực sự được kiểm soát bởi các tùy chọn trình duyệt của người dùng. Không có cách nào để ghi đè nó trong JavaScript.

window.open()hành xử khác nhau tùy thuộc vào cách nó đang được sử dụng. Nếu nó được gọi là kết quả trực tiếp của hành động người dùng , hãy để chúng tôi nói một lần bấm nút, nó sẽ hoạt động tốt và mở một tab mới (hoặc cửa sổ):

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

Tuy nhiên, nếu bạn cố mở một tab mới từ cuộc gọi lại yêu cầu AJAX , trình duyệt sẽ chặn nó vì đây là hành động trực tiếp của người dùng.

Để bỏ qua trình chặn cửa sổ bật lên và mở một tab mới từ một cuộc gọi lại, đây là một chút hack :

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});
— gác mái
nguồn
-1

Tôi đã thử cách này và nó có vẻ hoạt động tốt

window.open('example.com', 'newWin');

Tôi đã tìm thấy rất nhiều ví dụ làm việc ở đây:

http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html#TestPopupControl

— Nữ hoàng Shevtsov
nguồn
Điều đó sẽ mở trong một tab hoặc cửa sổ mới theo sở thích của người dùng. Nó sẽ không buộc một tab mới, đó là những gì câu hỏi về.
— Quentin
Bạn đã bỏ lỡ một chút trong câu hỏi khi OP đã thử điều đó? hoặc stackoverflow.com/a/59565074/19068 ? hoặc stackoverflow.com/a/35939565/19068 ? hoặc stackoverflow.com/a/30512485/19068 ? hoặc stackoverflow.com/a/11384018/19068 ? hoặc stackoverflow.com/a/26990478/19068 ?
— Quentin
@Quentin Tôi đã bỏ lỡ phần đó, nhưng khi tôi cố gắng gọi window.open với tham số thứ hai «windowName» bằng «_blank» hoặc hoàn toàn không có nó, cửa sổ bật lên hoặc tab mới không xuất hiện trong Google Chrome mới nhất. Khi tôi đổi tên cửa sổ thành «newWin», một tab mới đã mở. Nó là lạ bởi vì tham số tên cửa sổ là tùy chọn.
— Artem Shevtsov
-4

Tôi sẽ đồng ý phần nào với người đã viết (diễn giải ở đây): "Đối với một liên kết trong một trang web hiện có, trình duyệt sẽ luôn mở liên kết trong một tab mới nếu trang mới là một phần của cùng một trang web như trang web hiện có. " Đối với tôi, ít nhất, "quy tắc chung" này hoạt động trong Chrome, Firefox, Opera, IE, Safari, SeaMonkey và Konqueror.

Dù sao, có một cách ít phức tạp hơn để tận dụng những gì người khác trình bày. Giả sử chúng tôi đang nói về trang web của riêng bạn ("thissite.com" bên dưới), nơi bạn muốn kiểm soát những gì trình duyệt làm, sau đó, bên dưới, bạn muốn "Specialpage.htmlm" là EMPTY, không có HTML nào trong đó ( tiết kiệm thời gian gửi dữ liệu từ máy chủ!).

 var wnd, URL;  //global variables

 //specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); //get reference to just-opened page
 //if the "general rule" above is true, a new tab should have been opened.
 URL = "http://www.someothersite.com/desiredpage.htm";  //ultimate destination
 setTimeout(gotoURL(),200);  //wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { wnd.open(URL, "_self");  //replace the blank page, in the tab, with the desired page
   wnd.focus();             //when browser not set to automatically show newly-opened page, this MAY work
 }
— vernonner3voltazim
nguồn
-7

Nếu bạn chỉ muốn mở các liên kết bên ngoài (các liên kết đi đến các trang web khác) thì bit JavaScript / jQuery này hoạt động tốt:

$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});
— Michael
nguồn
Câu trả lời này không phù hợp với câu hỏi này. NHƯNG, điều này rất hữu ích! Cảm ơn ý kiến ​​của bạn!
— Nuri Akman
-9

Trình duyệt sẽ luôn mở liên kết trong một tab mới nếu liên kết nằm trên cùng một tên miền (trên cùng một trang web). Nếu liên kết nằm trên một số tên miền khác, nó sẽ mở nó trong một tab / cửa sổ mới, tùy thuộc vào cài đặt trình duyệt.

Vì vậy, theo điều này, chúng ta có thể sử dụng:

<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>

Và thêm một số mã jQuery:

jQuery(document).ready(function () {
    jQuery(".my-link").on("click",function(){
        var w = window.open('http://www.mywebsite.com','_blank');
        w.focus();
        w.location.href = jQuery(this).attr('rel');
        return false;
    });
});

Vì vậy, trước tiên hãy mở cửa sổ mới trên cùng một trang web với mục tiêu _blank (nó sẽ mở nó trong tab mới), sau đó mở trang web mong muốn của bạn bên trong cửa sổ mới đó.

— loshMiS
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.