Câu hỏi Mở một URL trong một tab mới (và không phải là một cửa sổ mới) bằng cách sử dụng JavaScript


Tôi đang cố mở URL trong một tab mới, trái ngược với một cửa sổ bật lên. Tôi đã nhìn thấy các câu hỏi liên quan nơi các câu trả lời sẽ trông giống như sau:

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ổ popup.


1594
2018-02-05 15:52


gốc


Đây thường là vấn đề ưu tiên. Một số người thích cửa sổ (và quyết liệt bảo vệ hành vi này), một số tab (và quyết liệt bảo vệ hành vi này). Vì vậy, bạn sẽ đánh bại một hành vi mà thường được coi là một vấn đề của hương vị, không phải thiết kế. - Jared Farrish
Javascript không biết gì về trình duyệt và các tab của bạn so với các cửa sổ, do đó, nó thực sự là trình duyệt để quyết định cách mở một cửa sổ mới. - Andrey
Tôi làm cách nào để định cấu hình Chrome để hiển thị nó trong một tab mới, trái ngược với một cửa sổ bật lên? - Mark F
Gmail thực hiện điều này bằng cách nào đó, ít nhất là trong Chrome. Shift + bấm vào một hàng email và bạn mở email đó trong một cửa sổ mới. Ctrl + click và bạn mở nó trong một tab mới. Chỉ có vấn đề: đào sâu vào mã obfuscated của gmail là một PITA - Sergio
@Sergio, đó là hành vi trình duyệt mặc định cho bất kỳ liên kết nào. (Đối với Chrome và Firefox ít nhất.) Không có liên quan gì đến Gmail. - Qtax


Các câu trả lời:


Không có gì tác giả có thể làm có thể chọn mở trong tab mới thay vì cửa sổ mới. Nó là một ưu tiên người sử dụng.

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

Các đảo ngược 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 của 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.


699
2018-02-05 15:53



@JacksonGariety - Và làm cách nào để ghi đè tùy chọn trình duyệt cho cửa sổ hoặc tab? - Quentin
@AliHaideri Javascript không có gì để làm với cách tab mới / cửa sổ được mở ra. Tất cả đều được xác định bởi cài đặt của trình duyệt của bạn. Sử dụng window.open yêu cầu trình duyệt mở một cái gì đó mới, sau đó trình duyệt 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 đã thử nghiệm, hãy 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 sai. - Ian
Hai điều lãng phí thời gian của người khác nhiều hơn là nói với họ điều gì đó không thể làm được. (1) Cho họ biết điều gì đó không thể làm được có thể được làm. (2) Giữ im lặng và để cho họ tiếp tục tìm cách để làm điều gì đó không thể làm được. - Quentin
@Cupcake - 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
@ Neel - Bởi vì nó ngắn gọn được đưa đến một điểm về một chủ đề mà nhiều người muốn biết. - Quentin


Đâ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 onclick trì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 trình xử lý sự kiện vào DOM vật.

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

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


1263
2017-07-08 14:49



Không hoạt động. Có một thông báo ở bên phải của thanh địa chỉ: Bật lên bị chặn. Sau đó, tôi cho phép cửa sổ bật lên. Và voilà, nó sẽ mở ra trong một popup, không phải chuyển hướng! Chrome 22.0.1229.94 trên OS X Lion. - nalply
Tôi nghĩ lý do khiến rất nhiều người gặp vấn đề là vì họ không triển khai đúng cách (mặc dù tôi không thể thấy như thế nào). Thử nghiệm trong vani: Chrome, IE, FF, SeaMonkey, Safari và Opera. Làm việc như một say mê. - b1nary.atr0phy
@Dhaval 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 điện window.open (hoặc bất kỳ Javascript) nào để chọn làm sao để mở cửa sổ / tab mới. - Ian
@ b1naryatr0phy Đó là bởi 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
@duke Bạn có thể cung cấp ngay cả một ví dụ duy nhất của một trình duyệt trong đó sử dụng mã OP hay không, trang mới mở trong một cửa sổ mới và với trang của bạn, nó sẽ mở ra trong một tab mới? Cho đến nay, bạn chưa cung cấp bất kì Ví dụ, trong đó mã này hoạt động, và những người khác đã cung cấp rất nhiều trong đó (họ yêu cầu) nó không thành công. - Mark Amery


window.open() sẽ không mở trong tab mới nếu nó không xảy ra trên sự kiện nhấp chuột thực tế. Trong ví dụ cho URL đang được mở trên sự kiện nhấp chuột thực tế. Thao tác này sẽ hoạt động nếu người dùng có cài đặt thích 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 cuộc gọi Ajax trong hàm click và muốn mở một cửa sổ thành công, hãy đảm bảo rằng bạn đang thực hiện cuộc gọi Ajax với async : false tùy chọn thiết lập.


316
2017-10-31 13:15



Sẽ rất hay khi đánh dấu câu trả lời 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, sau đó nó sẽ mở ra một cửa sổ mới. - CyberFonic
@CyberFonic Không có lý do để làm điều đó, vì nó không phải là câu trả lời đúng. Nó không xác định cách mở tab / trình duyệt mới. Bạn không thể kiểm soát nó từ Javascript. Nó được xác định bởi cài đặt của trình duyệt của bạn. - Ian
@PaulBrown Câu trả lời này không khác gì câu trả lời khác. Tất cả đều nói để sử dụng window.open. Tham số thứ hai là "_blank" không thay đổi gì cả. Vì vậy, không có sự khác biệt ở đây. Và thực tế họ tuyên bố "window.open() sẽ không mở trong tab mới nếu nó không xảy ra trên sự kiện nhấp chuột thực tế. "cũng không đúng. Các cài đặt trong trình duyệt là lý do cho bất kỳ điều gì xảy ra, không phải mã Javascript - Ian
@PaulBrown Tôi không biết tại sao bạn sẽ không chấp nhận thực tế là bạn không thể kiểm soát nó. Tất cả CyberFonic đã giải thích / chứng minh rằng đó là một sự không thống nhất giữa các trình duyệt và cho thấy rằng không an toàn window.open các cuộc gọi khác với các cuộc gọi an toàn..ON CHROME. Tôi vừa thử nghiệm cùng một thứ trên Firefox và IE và cả hai đều mở trong một tab mới. Dưới đây là một ví dụ để bạn có thể kiểm tra trái tim nhỏ của mình: jsfiddle.net/gEuMK . Tại sao bạn xác nhận một giải pháp không nhất quán giữa các trình duyệt và chỉ "hoạt động" trên một trình duyệt, mặc dù bạn không thể kiểm soát điều gì xảy ra - một sự kiện thực, an toàn hoặc một sự kiện ngẫu nhiên / không an toàn? - Ian
@PaulBrown Không, nó không. Có Không đảm bảo rằng một tab sẽ mở (từ quan điểm của Javascript). Các tab mở cho tôi vì cài đặt mặc định của trình duyệt của tôi là mở trong tab. Nó hoạt động cho bạn và những người khác vì cài đặt mặc định của bạn có thể giống nhau. Câu hỏi cho biết "Cách mở URL trong tab mới". Điều này và tất cả các câu hỏi khác có mã, câu trả lời "Cách mở URL dựa trên cài đặt mặc định của trình duyệt". Và với tôi, OP muốn toàn quyền kiểm soát. Nếu họ muốn điều gì đó xảy ra, câu trả lời nên chế tạo nó xảy ra. Những câu trả lời này có thể làm cho nó xảy ra - Ian


window.open Không thể mở cửa sổ bật lên đáng tin cậy trong 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 của  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ự cho window.open là đúng trên tất cả các trình duyệt 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 thông qua  window.open, như được ám chỉ trong Câu trả lời của Quentin.

Đối với người dùng Firefox (29), sử dụng window.open(url, '_blank')  tùy thuộc vào tùy chọn tab của 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 cửa sổ mới bằng cách chỉ định chiều rộng và chiều cao (xem phần "Giới thiệu về Chrome?" bên dưới).

Trình diễn

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

Internet Explorer (11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

Trang thử nghiệm

Sau khi thiết lập Internet Explorer (11) để mở cửa sổ bật lên trong cửa sổ mới như được minh họa ở trên, hãy sử dụng trang kiểm tra 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 trong Firefox (29) với tùy chọn tab được đặt thành cửa sổ mới và xem kết quả tương tự.

Còn Chrome thì sao? Nó thực hiện window.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 cửa sổ mới hoặc tab mới (như Firefox và Internet Explorer). 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 gì về thứ đó.

Cũng thế, 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 của  window.open  khác nhau. Trong Chrome và Firefox, 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 đã thiết lập Firefox (29) để mở các cửa sổ mới trong một tab mới (như đã đề cập trong các câu trả lời cho JavaScript mở trong 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, cùng một đoạn mã trên sẽ luôn mở một tab mới trong Internet Explorer 11 nếu người dùng đặt 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 chúng.

Vì vậy, hành vi của window.open trong Chrome có vẻ là mở cửa sổ bật lên trong tab mới khi được sử dụng trong onclick sự kiện, để mở chúng trong cửa sổ mới khi được sử dụng từ bảng điều khiển trình duyệt (như được ghi nhận bởi những người khác), và để mở chúng trong cửa sổ mới khi được chỉ đị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 của  window.open  khác nhau tùy theo 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ự cho window.open là đúng trên tất cả các trình duyệt 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


224
2018-05-01 19:42



Bạn đã không trả lời câu hỏi, bạn chỉ chứng minh rằng window.open là không phù hợp. - BentOnCoding


Lót:

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

hoặc là

Với jQuery Tôi đang sử dụng cái này:

var url = "http://google.com";
$("<a>").attr("href", url).attr("target", "_blank")[0].click();

Nó tạo ra một ảo a yếu tố, cho nó target="_blank" vì vậy nó sẽ mở ra trong tab mới, cho nó thích hợp url  href và sau đó nhấp vào nó.

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

function openInNewTab(url) {
    $("<a>").attr("href", url).attr("target", "_blank")[0].click();
}

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

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

Cho một không phải jQuery kịch bản, chức năng sẽ trông như thế này:

function openInNewTab(url) {
    var a = document.createElement("a");
    a.target = "_blank";
    a.href = url;
    a.click();
}

// And then
openInNewTab("http://google.com");

136
2018-02-06 20:35



Cảm ơn bạn. JS thuần túy của bạn có một phần thiếu - như Luke Alderton đã viết (xem bên dưới), bạn cần phải đính kèm phần tử được 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 trong Firefox 37 nó không làm gì cả . - greenoldman
@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ẽ bật 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 có Javascript mà không có 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 - 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
Đây là suy nghĩ đầu tiên của tôi. Có lẽ tốt nhất nên xem xét các trình chặn cửa sổ bật lên mà tôi nghĩ. - Arg0n
Bạn có thể đơn giản hóa mã của bạn như sau: $('<a />',{'href': url, 'target', '_blank'}).get(0).click(); - shaedrich
@shaedrich lấy cảm hứng từ của bạn snipped tôi thêm không jquery một lót: Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click(); - pie6k


Để giải thích câu trả lời của Steven Spielberg, tôi đã làm điều này trong một 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 thiết lập 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 (phụ thuộc vào cài đặt của người dùng).


55
2018-04-05 15:02





Nếu bạn 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:

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

51
2018-05-28 16:43



Đây là chính xác những gì tôi mong đợi để xem như là câu trả lời được chấp nhận, là có một lý do không sử dụng tùy chọn này? Tôi đã thử nghiệm trên Chrome, Safari và IE11 và nó hoạt động tốt trong các trình duyệt đó, nhưng không có ý tưởng về thiết bị di động và LTE (IE10) - cloying
Điều này có thể mở trong một cửa sổ mới. Điều này có thể mở trong một tab mới. Mà nó không phải là dưới sự kiểm soát của tác giả trang web. Mã này giống như mã trong câu hỏi mà OP cho biết không hoạt động đối với họ. - Quentin
Cảm ơn nó hoạt động tốt nhưng thiết lập trình duyệt là cần thiết để xử lý quảng cáo .. - chetan
Tôi thực sự nghĩ rằng đây có thể là một giải pháp tốt vì nó hoạt động như mong đợi khi mở một tab mới và cũng hoạt động tốt ngay cả khi trình chặn quảng cáo hoặc trình chặn cửa sổ bật lên được bật - LucioB
Điều này không hoạt động cả trong FF và chrome. - Faisal Mq


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

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

29
2018-03-11 11:51



làm cho trình chặn cửa sổ bật lên xuất hiện
-1. Cái này sai. Cuộc gọi đến .focus() không ảnh hưởng đến việc trang mới được mở trong một cửa sổ hay một tab vì nó diễn ra sau .open() gọi và window.open(url, '_blank') theo nghĩa đen chính xác mã mà người hỏi câu hỏi đưa vào câu hỏi và anh ấy và nhiều áp phích khác ở đây đã giải thích không hoạt động. - Mark Amery
Không. Điều đó có thể mở trong một tab mới hoặc một cửa sổ mới theo sở thích của người dùng. Câu hỏi đặt ra là hỏi làm thế nào để đảm bảo nó mở ra trong một tab mới và không phải là một cửa sổ mới. - Quentin


Một thực tế thú vị là không thể mở tab mới nếu hành động không được người dùng gọi (nhấp vào nút hoặc thứ gì đó) hoặc nếu nó không đồng bộ, ví dụ, đ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 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');              
    }
});

14
2017-10-18 12:35



Tìm thấy điều này hữu ích, do đó, ít nhất một số trình duyệt (với cài đặt mặc định) sẽ mở tab mà không có cảnh báo trình chặn cửa sổ bật lên. - Populus
Điều này đang bị chặn làm cửa sổ bật lên trong Firefox 28, Chrome 34b và Safari 7.0.2, tất cả cài đặt cổ phiếu. :( - Steve Meisner
+1 Đây chính xác là vấn đề của tôi async: giả giúp nhưng nó nguy hiểm - Mina Gabriel
Có cách giải quyết cho vấn đề này không? - Struggler
"không thể mở tab mới nếu hành động không được người dùng gọi (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. Tiết kiệm <script>open('http://google.com')</script> đến một .html và mở nó trong một phiên bản mới của một 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 yêu cầu nó cho phép các cửa sổ bật lên), không phải là một cửa sổ mới. - Mark Amery


Tôi nghĩ rằng bạn không thể kiểm soát điều này. Nếu người dùng đã thiết lập trình duyệt của họ để mở các liên kết trong một cửa sổ mới, bạn không thể ép buộc điều này để mở các liên kết trong một tab mới.

JavaScript mở trong cửa sổ mới, không phải tab


13
2018-02-05 15:55