เปิด URL ในแท็บใหม่ (ไม่ใช่หน้าต่างใหม่)

2102

ฉันพยายามเปิดURLในแท็บใหม่ตรงข้ามกับหน้าต่างป๊อปอัป

ฉันเคยเห็นคำถามที่เกี่ยวข้องซึ่งคำตอบจะเป็นอย่างไร:

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

แต่ไม่มีใครทำงานให้ฉันเบราว์เซอร์ยังคงพยายามเปิดหน้าต่างป๊อปอัป

javascript 
— เครื่องหมาย
แหล่งที่มา
85
นี่เป็นเรื่องของการตั้งค่า บางคนชอบ windows (และป้องกันพฤติกรรมนี้อย่างรุนแรง) บางแท็บ (และป้องกันพฤติกรรมนี้อย่างรุนแรง) ดังนั้นคุณจะเอาชนะพฤติกรรมที่โดยทั่วไปถือว่าเป็นเรื่องของรสนิยมไม่ใช่การออกแบบ
— Jared Farrish
42
Javascript ไม่รู้อะไรเลยเกี่ยวกับเบราว์เซอร์และแท็บของคุณเทียบกับ windows ดังนั้นมันขึ้นอยู่กับเบราว์เซอร์จริง ๆ ในการตัดสินใจว่าจะเปิดหน้าต่างใหม่อย่างไร
— Andrey
3
ฉันจะกำหนดค่า Chrome ให้แสดงในแท็บใหม่ได้อย่างไรเมื่อเทียบกับป๊อปอัป
— ทำเครื่องหมาย
8
Gmail ใช้วิธีนี้อย่างน้อยก็ใน Chrome Shift + คลิกที่แถวอีเมลและคุณเปิดอีเมลนั้นในหน้าต่างใหม่ Ctrl + คลิกและคุณเปิดในแท็บใหม่ ปัญหาเฉพาะ: การขุดลงในรหัสที่สับสนของ Gmail คือ PITA
— Sergio
48
@Sergio นั่นเป็นพฤติกรรมเริ่มต้นของเบราว์เซอร์สำหรับลิงก์ใด ๆ (สำหรับ Chrome และ Firefox อย่างน้อย) ไม่มีส่วนเกี่ยวข้องกับ Gmail
— Qtax

คำตอบ:

929

ไม่มีสิ่งใดที่ผู้เขียนสามารถทำได้เพื่อเลือกเปิดในแท็บใหม่แทนที่จะเป็นหน้าต่างใหม่ มันเป็นความต้องการของผู้ใช้ (โปรดทราบว่าการตั้งค่าเริ่มต้นของผู้ใช้ในเบราว์เซอร์ส่วนใหญ่มีไว้สำหรับแท็บใหม่ดังนั้นการทดสอบเล็กน้อยในเบราว์เซอร์ที่ไม่ได้เปลี่ยนค่ากำหนดนั้นจะไม่แสดงสิ่งนี้)

CSS3 เสนอเป้าหมายใหม่แต่สเปคที่ถูกทอดทิ้ง

การย้อนกลับไม่เป็นความจริง โดยการระบุมิติสำหรับหน้าต่างในอาร์กิวเมนต์ที่สามของwindow.open()คุณสามารถเรียกหน้าต่างใหม่เมื่อการตั้งค่าสำหรับแท็บ

— เควนติน
แหล่งที่มา
42
@AliHaideri Javascript ไม่มีส่วนเกี่ยวข้องกับการเปิดแท็บ / หน้าต่างใหม่ ทุกอย่างขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ของคุณ การใช้window.openจะบอกให้เบราว์เซอร์เปิดสิ่งใหม่ ๆ จากนั้นเบราว์เซอร์จะเปิดสิ่งที่เลือกไว้ในการตั้งค่า - แท็บหรือหน้าต่าง ในเบราว์เซอร์ที่คุณทดสอบให้เปลี่ยนการตั้งค่าเพื่อเปิดในหน้าต่างใหม่แทนแท็บและคุณจะเห็นว่าโซลูชันของผู้อื่นนั้นไม่ถูกต้อง
— เอียน
239
สองสิ่งที่ทำให้คนอื่นเสียเวลามากกว่าบอกพวกเขาว่าไม่สามารถทำได้ (1) การบอกสิ่งที่ไม่สามารถทำได้สามารถทำได้ (2) อยู่เงียบ ๆ และปล่อยให้พวกเขามองหาวิธีที่จะทำสิ่งที่ไม่สามารถทำได้
— Quentin
8
@Cupcake - เอกสารมักจะไม่รบกวนอธิบายคุณสมบัติที่ไม่มีอยู่ evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/...
— เควนติน
9
@Neel - เพราะมันถึงจุดสำคัญในหัวข้อที่ผู้คนจำนวนมากต้องการทราบ
— Quentin
4
ผู้เขียนสามารถทำสิ่งต่าง ๆ (ส่วนใหญ่เขียนโค้ดที่ต่างกัน) ไม่มีสิ่งใดที่จะทริกเกอร์แท็บแทนหน้าต่าง
— Quentin
1733

นี่คือเคล็ดลับ 

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

ในกรณีส่วนใหญ่สิ่งนี้ควรเกิดขึ้นโดยตรงในonclickตัวจัดการสำหรับลิงก์เพื่อป้องกันตัวบล็อกป็อปอัพและพฤติกรรม "หน้าต่างใหม่" เริ่มต้น คุณสามารถทำได้ด้วยวิธีนี้หรือโดยการเพิ่มฟังเหตุการณ์ไปยังDOMวัตถุ ของคุณ

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

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

— Rinto George
แหล่งที่มา
117
ไม่ทำงาน, ไม่เป็นผล. ได้รับข้อความที่ด้านขวาของแถบที่อยู่ที่: ป๊อปอัพบล็อก จากนั้นฉันอนุญาตป๊อปอัป และมันจะเปิดขึ้นในป๊อปอัปไม่ใช่แท็บ ! Chrome 22.0.1229.94 บน OS X Lion
— nalply
39
@ b1naryatr0phy นั่นเป็นเพราะคุณไม่ได้ทดสอบอย่างถูกต้อง เปลี่ยนการตั้งค่าในเบราว์เซอร์ของคุณ ไม่ว่าจะเปิดในแท็บหรือหน้าต่างขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ของคุณ ไม่มีสิ่งใดที่คุณสามารถทำได้โดยการเรียก window.open (หรือ Javascript ใด ๆ ) เพื่อเลือกวิธีเปิดหน้าต่าง / แท็บใหม่
— เอียน
คำถาม: ฉันตั้ง url โดยไม่มีโปรโตคอล (เช่น my.site.com/Controller/Index) เป็นผลให้ฉันได้รับหน้าต่างใหม่ (แท็บ) โดย url เช่น url ของหน้าปัจจุบัน (จากที่ฉันใช้ฟังก์ชั่น OpenInNewTab) และส่งผ่านเข้าไปในฟังก์ชั่น url ด้วยหน้าต่างโปรโตคอลเปิดขึ้นโดยการเชื่อมโยงที่ถูกต้อง ทำไม?
— user2167382
2
var win = window.open (url, '_blank'); ไม่จำเป็นต้องใช้ '_blank' สำหรับwindow.open ()พารามิเตอร์ตัวที่สองคือ strWindowName สำหรับ: ชื่อสตริงสำหรับหน้าต่างใหม่ ชื่อนี้สามารถใช้เป็นเป้าหมายของลิงก์และแบบฟอร์มโดยใช้แอตทริบิวต์ target ขององค์ประกอบ <a> หรือ <form> ชื่อไม่ควรมีอักขระช่องว่างใด ๆ โปรดทราบว่า strWindowName ไม่ได้ระบุชื่อของหน้าต่างใหม่
— hydRAnger
มีวิธีใดบ้างไหมที่จะเปิดแท็บใหม่โดยไม่ใช้ iframe แบบ sandbox? เมื่อฉันใช้สิ่งนี้ฉันจะได้รับข้อผิดพลาด CORS เพราะค่า document.domain จะไม่เปลี่ยนแปลงตามที่เปิดเป็น iframe
— Ids van der Zee
380

window.open()จะไม่เปิดในแท็บใหม่หากไม่ได้เกิดขึ้นกับเหตุการณ์การคลิกจริง ในตัวอย่างที่ระบุ URL จะถูกเปิดในเหตุการณ์คลิกจริง งานนี้จะมีให้ผู้ใช้มีการตั้งค่าที่เหมาะสมในเบราว์เซอร์

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

ในทำนองเดียวกันหากคุณพยายามโทร Ajax ภายในฟังก์ชั่นคลิกและต้องการเปิดหน้าต่างสู่ความสำเร็จตรวจสอบให้แน่ใจว่าคุณกำลังทำการโทร Ajax ด้วยasync : falseชุดตัวเลือก

— Venkat Kotra
แหล่งที่มา
28
จะดีถ้าทำเครื่องหมายนี้เป็นคำตอบที่ถูกต้อง การทดสอบของฉันกับ Chrome v26 (Windows) ยืนยันว่าหากรหัสอยู่ในตัวจัดการคลิกของปุ่มมันจะเปิดแท็บใหม่และหากรหัสถูกเรียกใช้โดยทางโปรแกรมเช่นจากคอนโซลมันจะเปิดหน้าต่างใหม่
— CyberFonic
2
@Ian จากการทดสอบของฉันในเบราว์เซอร์ที่มีการตั้งค่าเริ่มต้นคำตอบนี้ใช้ได้ในกรณีที่คำตอบข้างต้นไม่ได้ คำตอบที่ได้รับการยอมรับซึ่งระบุว่า "ไม่มีสิ่งใดที่คุณสามารถทำได้" เป็นจริงเมื่อผู้ใช้เปลี่ยนการตั้งค่าเริ่มต้นเท่านั้น
— Garfield
@Ian เพื่อความชัดเจนฉันพูดถึงเรื่องนี้ในคำตอบคำเตือนเกี่ยวกับการตั้งค่าผู้ใช้ "สิ่งนี้จะทำงานหากผู้ใช้มีการตั้งค่าที่เหมาะสมในเบราว์เซอร์" ฉันคิดว่าผู้ใช้ส่วนใหญ่ไม่เปลี่ยนการตั้งค่าเบราว์เซอร์และคำตอบนี้ใช้ได้กับคนส่วนใหญ่
— Venkat Kotra
async: falseไม่ทำงานใน Chrome ในการเปิดหน้าต่างใหม่จากการโทรกลับคุณต้องเปิดหน้าต่างว่างก่อนส่งคำขอ HTTP และอัปเดตในภายหลัง นี่คือสับดี
— attacomsian
250

window.open ไม่สามารถเปิดป๊อปอัปในแท็บใหม่ในเบราว์เซอร์ทั้งหมดได้อย่างน่าเชื่อถือ

เบราว์เซอร์ที่แตกต่างกันใช้พฤติกรรม window.open ในรูปแบบที่แตกต่างกันโดยเฉพาะอย่างยิ่งเกี่ยวกับการตั้งค่าเบราว์เซอร์ของผู้ใช้ คุณไม่สามารถคาดหวังได้ว่าพฤติกรรมแบบเดียวกันนี้window.openจะเป็นจริงใน Internet Explorer, Firefox และ Chrome ทั้งหมดเนื่องจากวิธีการที่แตกต่างกันในการจัดการการตั้งค่าเบราว์เซอร์ของผู้ใช้

ยกตัวอย่างเช่น Internet Explorer (11) ผู้ใช้สามารถเลือกที่จะป๊อปอัพที่เปิดในหน้าต่างใหม่หรือแท็บใหม่คุณไม่สามารถบังคับให้ Internet Explorer ผู้ใช้ 11 คนที่จะป๊อปอัพที่เปิดในวิธีการบางอย่างผ่าน window.openเป็นพาดพิงถึงในคำตอบของเควนติน

สำหรับผู้ใช้ Firefox (29) การใช้window.open(url, '_blank') ขึ้นอยู่กับการตั้งค่าแท็บของเบราว์เซอร์แม้ว่าคุณจะยังสามารถบังคับให้พวกเขาเปิดป๊อปอัปในหน้าต่างใหม่โดยการระบุความกว้างและความสูง (ดูหัวข้อ "What About Chrome?" ด้านล่าง)

สาธิต

ไปที่การตั้งค่าเบราว์เซอร์ของคุณและกำหนดค่าให้เปิดป๊อปอัปในหน้าต่างใหม่

Internet Explorer (11)

กล่องโต้ตอบการตั้งค่า Internet Explorer 1

ช่องโต้ตอบการตั้งค่าแท็บ Internet Explorer

หน้าทดสอบ

หลังจากตั้งค่า Internet Explorer (11) เพื่อเปิดป๊อปอัปในหน้าต่างใหม่ดังที่แสดงด้านบนให้ใช้หน้าทดสอบต่อไปนี้เพื่อทดสอบ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>

สังเกตว่าป๊อปอัปเปิดขึ้นในหน้าต่างใหม่ไม่ใช่แท็บใหม่

คุณยังสามารถทดสอบตัวอย่างข้อมูลด้านบนใน Firefox (29) ด้วยการตั้งค่าแท็บที่ตั้งค่าเป็นหน้าต่างใหม่และดูผลลัพธ์เดียวกัน

แล้ว Chrome ล่ะ มันใช้window.openแตกต่างจาก Internet Explorer (11) และ Firefox (29)

ฉันไม่แน่ใจ 100% แต่ดูเหมือนว่า Chrome (รุ่น34.0.1847.131 m) ไม่มีการตั้งค่าใด ๆ ที่ผู้ใช้สามารถเลือกได้ว่าจะเปิดป๊อปอัปในหน้าต่างใหม่หรือแท็บใหม่ (เช่น Firefox และ Internet Explorer) มี). ฉันตรวจสอบเอกสารของ Chrome เพื่อจัดการป๊อปอัปแต่ไม่ได้พูดถึงสิ่งใด ๆ

นอกจากนี้ อีกครั้งเบราว์เซอร์ที่แตกต่างกันดูเหมือนจะใช้ลักษณะการทำงานของ window.open ที่แตกต่างกัน ใน Chrome และ Firefox การระบุความกว้างและความสูงจะบังคับให้ป๊อปอัปแม้ว่าผู้ใช้ตั้งค่า Firefox (29) เพื่อเปิดหน้าต่างใหม่ในแท็บใหม่ (ดังที่ได้กล่าวไว้ในคำตอบของJavaScript ที่เปิดในหน้าต่างใหม่ไม่ใช่แท็บ ) :

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

อย่างไรก็ตามข้อมูลโค้ดเดียวกันข้างต้นจะเปิดแท็บใหม่ใน Internet Explorer 11 เสมอหากผู้ใช้ตั้งค่าแท็บเป็นการตั้งค่าเบราว์เซอร์ของพวกเขาไม่ได้ระบุความกว้างและความสูงจะบังคับให้ป๊อปอัปหน้าต่างใหม่สำหรับพวกเขา

ดังนั้นพฤติกรรมของwindow.openใน Chrome จึงดูเหมือนว่าจะเปิดป๊อปอัปในแท็บใหม่เมื่อใช้ในonclickเหตุการณ์เปิดในหน้าต่างใหม่เมื่อใช้จากคอนโซลของเบราว์เซอร์ ( ดังที่คนอื่น ๆ สังเกต ) และเปิดในหน้าต่างใหม่เมื่อ ระบุด้วยความกว้างและความสูง

สรุป

เบราว์เซอร์ที่ต่างกันใช้พฤติกรรมที่ window.open แตกต่างกันตามการตั้งค่าเบราว์เซอร์ของผู้ใช้ คุณไม่สามารถคาดหวังได้ว่าพฤติกรรมแบบเดียวกันนี้window.openจะเป็นจริงใน Internet Explorer, Firefox และ Chrome ทั้งหมดเนื่องจากวิธีการที่แตกต่างกันในการจัดการการตั้งค่าเบราว์เซอร์ของผู้ใช้

อ่านเพิ่มเติม

— ปีเตอร์มอร์เทนเซ่น
แหล่งที่มา
12
คุณไม่ได้ตอบคำถามคุณเพิ่งพิสูจน์ว่า window.open นั้นไม่สอดคล้องกัน
— BentOnCoding
223

หนึ่งในสายการบิน:

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

มันสร้างaองค์ประกอบเสมือนให้มันtarget="_blank"เพื่อที่จะเปิดในแท็บใหม่ให้มันถูกต้องurl hrefแล้วคลิกมัน

และถ้าคุณต้องการตามที่คุณสามารถสร้างฟังก์ชั่นบางอย่าง:

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

แล้วคุณสามารถใช้มันเช่น:

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

โน๊ตสำคัญ:

openInNewTab(รวมถึงโซลูชันอื่น ๆ ในหน้านี้) จะต้องถูกเรียกในระหว่างการติดต่อกลับของผู้ใช้ - เช่น คลิกภายในเหตุการณ์ (ไม่จำเป็นในฟังก์ชั่นการโทรกลับโดยตรง แต่ในระหว่างการดำเนินการคลิก)

หากคุณจะโทรหาด้วยตนเองในบางช่วงเวลาแบบสุ่ม (เช่นภายในช่วงเวลาหรือหลังจากการตอบกลับของเซิร์ฟเวอร์) - เบราว์เซอร์อาจถูกปิดกั้น (ซึ่งสมเหตุสมผลเนื่องจากเป็นความเสี่ยงด้านความปลอดภัยและอาจนำไปสู่ประสบการณ์การใช้งานที่แย่มาก )

— pie6k
แหล่งที่มา
8
ขอบคุณ. pure-JS ของคุณมีชิ้นส่วนที่ขาดหายไป - ขณะที่ Luke Alderton เขียน (ดูด้านล่าง) คุณจะต้องแนบองค์ประกอบที่สร้างขึ้นมากับเนื้อหาเอกสารในโค้ดของคุณมันถูกแขวนในช่องว่างอย่างน้อยใน Firefox 37 มันไม่ได้ทำอะไรเลย .
— greenoldman
4
@mcginniwa การกระทำใด ๆ เช่นนี้ - หากไม่ได้รับการกระตุ้นจากการกระทำของผู้ใช้เช่นการคลิกเมาส์จะเป็นการเปิดป๊อปอัปอัพ ลองนึกภาพว่าคุณสามารถเปิด url ด้วย Javascript ได้โดยไม่ต้องดำเนินการใด ๆ กับผู้ใช้ซึ่งอาจเป็นอันตรายได้ หากคุณใส่รหัสนี้ในเหตุการณ์เช่นฟังก์ชั่นคลิก - มันจะทำงานได้ดี - เหมือนกันกับโซลูชันที่เสนอทั้งหมดที่นี่
— pie6k
4
คุณสามารถทำให้รหัสของคุณง่ายขึ้นดังต่อไปนี้: $('<a />',{'href': url, 'target', '_blank'}).get(0).click();
— shaedrich
5
@ Shaedrich แรงบันดาลใจจาก snipped ของคุณฉันได้เพิ่มหนึ่งซับไม่ใช่ jquery:Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
— pie6k
มันไม่ทำงานใน FF!
— Nolesh
91

หากคุณใช้window.open(url, '_blank')มันจะถูกบล็อก (ตัวป้องกันป๊อปอัป) ใน Chrome

ลองสิ่งนี้:

//With JQuery

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

ด้วยจาวาสคริปต์ที่บริสุทธิ์

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
— Mohammed Safeer
แหล่งที่มา
แต่ในคำถามนี้พวกเขาไม่ได้พูดถึงผู้เขียนเว็บไซต์ ต้องการเปิด URL ในหน้าต่างใหม่หรือแท็บใหม่เท่านั้น เบราว์เซอร์นี้ขึ้นอยู่กับ เราไม่จำเป็นต้องกังวลเกี่ยวกับผู้แต่ง โปรดตรวจสอบซอที่ มันใช้งานได้
— Mohammed Safeer
พบว่ามันไม่ทำงานบน js fiddle และ plunker แต่ทำงานได้เมื่อคุณสร้างไฟล์ html มันเป็นเพราะซอ js, เอาท์พุทจะปรากฏบน iframe, ดังนั้นหน้าต่างใหม่จะถูกบล็อกเพราะthe request was made in a sandboxed frame whose 'allow-popups' permission is not set
— Mohammed Safeer
67

เพื่ออธิบายคำตอบของสตีเวนสปีลเบิร์กอย่างละเอียดฉันทำสิ่งนี้ในกรณีเช่นนี้:

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

ด้วยวิธีนี้ก่อนที่เบราว์เซอร์จะตามลิงก์ฉันกำลังตั้งค่าแอตทริบิวต์เป้าหมายดังนั้นมันจะทำให้ลิงก์เปิดในแท็บหรือหน้าต่างใหม่ ( ขึ้นอยู่กับการตั้งค่าของผู้ใช้ )

ตัวอย่างหนึ่งบรรทัดใน 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.

สิ่งนี้สามารถทำได้โดยใช้ DOM API ของเบราว์เซอร์ดั้งเดิมเช่นกัน:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
— arikfr
แหล่งที่มา
58

ฉันใช้สิ่งต่อไปนี้และใช้งานได้ดีมาก!

window.open(url, '_blank').focus();
— Ezequiel García
แหล่งที่มา
2
สิ่งนี้อาจเปิดในแท็บหรือหน้าต่างใหม่ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ คำถามนี้เกี่ยวกับการเปิดในแท็บใหม่โดยเฉพาะแม้ว่าการกำหนดค่าตามความชอบนั้นสำหรับหน้าต่างใหม่
— เควนติน
19

ฉันคิดว่าคุณไม่สามารถควบคุมสิ่งนี้ได้ หากผู้ใช้ตั้งค่าเบราว์เซอร์ให้เปิดลิงก์ในหน้าต่างใหม่คุณจะไม่สามารถบังคับให้เปิดลิงก์ในแท็บใหม่ได้

JavaScript เปิดในหน้าต่างใหม่ไม่ใช่แท็บ

— Fran Verona
แหล่งที่มา
19

ข้อเท็จจริงที่น่าสนใจคือแท็บใหม่ไม่สามารถเปิดได้หากผู้ใช้ไม่ได้เรียกใช้การกระทำ (คลิกที่ปุ่มหรืออะไรบางอย่าง) หรือถ้าเป็นแบบอะซิงโครนัสตัวอย่างเช่นสิ่งนี้จะไม่เปิดในแท็บใหม่:

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

แต่สิ่งนี้อาจเปิดในแท็บใหม่ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
— karaxuna
แหล่งที่มา
2
สิ่งนี้กำลังถูกบล็อกในฐานะป๊อปอัปใน Firefox 28, Chrome 34b และ Safari 7.0.2 การตั้งค่าหุ้นทั้งหมด :(
— Steve Meisner
1
"แท็บใหม่ไม่สามารถเปิดได้หากผู้ใช้ไม่ได้เรียกใช้การกระทำ (คลิกที่ปุ่มหรืออะไรก็ได้) หรือหากเป็นแบบอะซิงโครนัส" - เป็นจริงของ Chrome แต่ไม่เป็นจริงสำหรับเบราว์เซอร์ทั้งหมด บันทึก<script>open('http://google.com')</script>ลงใน.htmlไฟล์และเปิดในการติดตั้ง Firefox เวอร์ชันใหม่ล่าสุด คุณจะสังเกตเห็นว่า Firefox เปิด Google อย่างมีความสุขในแท็บใหม่ (บางทีหลังจากที่คุณบอกให้อนุญาตป๊อปอัป) ไม่ใช่หน้าต่างใหม่
— Mark Amery
13

เพียงแค่ละเว้นพารามิเตอร์ [strWindowFeatures] จะเปิดแท็บใหม่ยกเว้นการแทนที่การตั้งค่าเบราว์เซอร์ (การตั้งค่าเบราว์เซอร์สำคัญกว่า JavaScript)

หน้าต่างใหม่

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

แท็บใหม่

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

-- หรือ --

var myWin = window.open(strUrl);
— MannyC
แหล่งที่มา
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
แหล่งที่มา
11

คุณสามารถใช้เคล็ดลับกับ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();
}

การสาธิต jsFiddle

— CodeNinja
แหล่งที่มา
4
หากคุณใช้วิธีนี้ตรวจสอบให้แน่ใจว่า URL ไม่มีพารามิเตอร์ข้อความค้นหาเพราะจะถูกข้ามโดยส่งแบบฟอร์ม ทางออกหนึ่งคือการฝังองค์ประกอบการป้อนข้อมูลที่ซ่อนอยู่ภายในองค์ประกอบแบบฟอร์มที่มีnameคีย์ & valueเป็นค่าสำหรับพารามิเตอร์ทั้งหมดที่อยู่ในแบบสอบถาม Params จากนั้นส่งแบบฟอร์ม
— Mudassir Ali
สิ่งนี้สามารถทำได้ง่ายกว่าด้วยaแท็กแทนแบบฟอร์มและใช้.click()วิธีjQuery เพื่อ "ส่ง" ตรวจสอบคำตอบของฉัน
10

สิ่งนี้ไม่เกี่ยวกับการตั้งค่าเบราว์เซอร์หากคุณพยายามเปิดแท็บใหม่จากฟังก์ชั่นที่กำหนดเอง

ในหน้านี้เปิดคอนโซล JavaScript และประเภท:

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

และจะพยายามเปิดป๊อปอัปโดยไม่คำนึงถึงการตั้งค่าของคุณเนื่องจาก 'คลิก' มาจากการกระทำที่กำหนดเอง

ในการที่จะทำตัวเหมือน 'การคลิกเม้าส์' ที่ลิงค์คุณต้องทำตามคำแนะนำของ @ spirinvladimirและสร้างมันขึ้นมาจริงๆ :

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'))));

นี่เป็นตัวอย่างที่สมบูรณ์ (อย่าลองใช้กับjsFiddleหรือบรรณาธิการออนไลน์ที่คล้ายกันเพราะมันจะไม่ยอมให้คุณเปลี่ยนเส้นทางไปยังหน้าภายนอกจากที่นั่น):

<!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
แหล่งที่มา
1
ฉันสิ้นสุดขึ้นไปวิธีการแก้ปัญหาที่แตกต่างกันที่ฉันทำw = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...)ตามtheandystratton.com/2012/...
— พอล Tomblin
11
@FahadAbidJanjua มันไม่ถูกต้องอย่างแน่นอน มันยังคงขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ ไม่มีสิ่งใดในข้อกำหนด HTML หรือ Javascript ที่ประกาศว่า "การกระทำที่กำหนดเอง" ต้องเปิดในป๊อปอัปแทนที่จะเป็นแท็บ แน่นอนไม่มีเบราว์เซอร์ในเครื่องปัจจุบันของฉันที่แสดงพฤติกรรมนี้
— 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
แหล่งที่มา
1
สิ่งนี้อาจเปิดในแท็บหรือหน้าต่างใหม่ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ คำถามนี้เกี่ยวกับการเปิดในแท็บใหม่โดยเฉพาะแม้ว่าการกำหนดค่าตามความชอบนั้นสำหรับหน้าต่างใหม่
— เควนติน
3

JQuery

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

JS

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
— ไบรอัน
แหล่งที่มา
สิ่งนี้อาจเปิดในแท็บหรือหน้าต่างใหม่ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ คำถามนี้เกี่ยวกับการเปิดในแท็บใหม่โดยเฉพาะแม้ว่าการกำหนดค่าตามความชอบนั้นสำหรับหน้าต่างใหม่
— เควนติน
2

หรือคุณเพียงแค่สร้างองค์ประกอบลิงก์และคลิกที่ ...

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);

สิ่งนี้ไม่ควรถูกบล็อคโดยตัวบล็อคป๊อปอัพใด ๆ ... หวังว่า

— ลุคอัลเดอร์ตัน
แหล่งที่มา
2

มีคำตอบสำหรับคำถามนี้และไม่ใช่ไม่ใช่

ฉันพบว่าง่ายต่อการแก้ไข:

ขั้นตอนที่ 1: สร้างลิงค์ที่มองไม่เห็น:

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

ขั้นตอนที่ 2: คลิกที่ลิงค์นั้นโดยทางโปรแกรม:

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

ไปเลย! ใช้งานได้มีเสน่ห์สำหรับฉัน

— ALZlper
แหล่งที่มา
สิ่งนี้อาจเปิดในแท็บหรือหน้าต่างใหม่ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ คำถามนี้เกี่ยวกับการเปิดในแท็บใหม่โดยเฉพาะแม้ว่าการกำหนดค่าตามความชอบนั้นสำหรับหน้าต่างใหม่
— เควนติน
1

ป้อนคำอธิบายรูปภาพที่นี่

ฉันค้นคว้าข้อมูลมากมายเกี่ยวกับวิธีเปิดแท็บใหม่และอยู่ในแท็บเดียวกัน ฉันได้พบเคล็ดลับเล็ก ๆ น้อย ๆ ที่จะทำมัน สมมติว่าคุณมี URL ที่คุณต้องเปิด - newUrlและ url เก่า - currentUrlซึ่งคุณต้องเปิดใช้งานหลังจากเปิดแท็บใหม่ รหัส JS จะมีลักษณะคล้ายกับสิ่งต่อไปนี้:

// 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;
— Váha
แหล่งที่มา
คำถามคือเกี่ยวกับการเปิดแท็บใหม่เมื่อการตั้งค่าของผู้ใช้คือการเปิดในหน้าต่างใหม่ ไม่ได้ถามถึงวิธีการเปิด URL ในแท็บใหม่ในขณะที่เปิด URL อื่นในแท็บที่มีอยู่ในเวลาเดียวกัน
— เควนติน
0

วิธีการเกี่ยวกับการสร้าง<a>ด้วย_blankเป็นtargetค่าคุณลักษณะและurlเป็นhrefพร้อมกับการแสดงสไตล์: ซ่อนด้วยองค์ประกอบเด็ก ๆ จากนั้นเพิ่มใน DOM แล้วทริกเกอร์เหตุการณ์คลิกบนองค์ประกอบย่อย

UPDATE

ไม่ได้ผล เบราว์เซอร์ป้องกันพฤติกรรมเริ่มต้น มันอาจถูกเรียกใช้โดยทางโปรแกรม แต่มันไม่เป็นไปตามพฤติกรรมเริ่มต้น

ตรวจสอบและดูด้วยตัวคุณเอง: http://jsfiddle.net/4S4ET/

— ผู้มีชัย
แหล่งที่มา
-1

การเปิดแท็บใหม่จากภายในส่วนขยาย Firefox (Mozilla) จะเป็นดังนี้:

gBrowser.selectedTab = gBrowser.addTab("http://example.com");
— Smile4ever
แหล่งที่มา
-1

วิธีนี้คล้ายกับโซลูชันด้านบน แต่ใช้งานแตกต่างกัน

.social_icon -> บางคลาสที่มี 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
แหล่งที่มา
-1

นี่อาจเป็นการแฮก แต่ใน Firefox หากคุณระบุพารามิเตอร์ตัวที่สามคือ 'fullscreen = ใช่' จะเป็นการเปิดหน้าต่างใหม่

ตัวอย่างเช่น,

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

ดูเหมือนจะแทนที่การตั้งค่าเบราว์เซอร์จริง ๆ

— Kunal
แหล่งที่มา
-1

งานนี้สำหรับฉันเพียงแค่ป้องกันไม่ให้เหตุการณ์ที่เพิ่ม URL ไปยังแล้วเรียกเหตุการณ์คลิกที่ว่า<a> tagtag

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
แหล่งที่มา
สิ่งนี้อาจเปิดในแท็บหรือหน้าต่างใหม่ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ คำถามนี้เกี่ยวกับการเปิดในแท็บใหม่โดยเฉพาะแม้ว่าการกำหนดค่าตามความชอบนั้นสำหรับหน้าต่างใหม่
— เควนติน
-1

window.open(url)จะเปิด URL ในเบราว์เซอร์ใหม่แท็บ ด้านล่าง 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

นี่คือตัวอย่างการทำงาน( ตัวอย่างสแต็คโอเวอร์โฟลว์ไม่อนุญาตให้เปิดแท็บใหม่)

— Kamil Kiełczewski
แหล่งที่มา
"window.open (url) จะเปิด url ในแท็บเบราว์เซอร์ใหม่" - มันจะเป็นไปตามการตั้งค่าของผู้ใช้สำหรับหน้าต่างใหม่หรือแท็บใหม่ มันจะไม่บังคับให้แท็บใหม่เมื่อการตั้งค่าสำหรับหน้าต่าง (ซึ่งเป็นคำถามที่เกี่ยวกับ) เช่นเดียวกับ target = _blank
— เควนติน
ทั้งแนวทางที่คุณแนะนำถูกกล่าวถึง (และถูกวิพากษ์วิจารณ์) หลายครั้งในคำตอบที่ไม่ได้ลบคำตอบ 56 ข้อสำหรับคำถามนี้
— เควนติน
-1

ไม่ว่าจะเปิด URL ในแท็บใหม่หรือหน้าต่างใหม่จะถูกควบคุมโดยการตั้งค่าเบราว์เซอร์ของผู้ใช้ ไม่มีวิธีการแทนที่ใน JavaScript

window.open()ทำงานแตกต่างกันไปขึ้นอยู่กับวิธีการใช้งาน หากมันถูกเรียกว่าเป็นผลโดยตรงจากการกระทำของผู้ใช้ให้เราบอกว่าคลิกปุ่มมันควรจะทำงานได้ดีและเปิดแท็บใหม่ (หรือหน้าต่าง):

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

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

อย่างไรก็ตามหากคุณพยายามเปิดแท็บใหม่จากการเรียกกลับคำขอ AJAXเบราว์เซอร์จะบล็อกเนื่องจากเป็นการกระทำของผู้ใช้โดยตรง

ในการเลี่ยงผ่านตัวป้องกันป๊อปอัปและเปิดแท็บใหม่จากการโทรกลับนี่คือแฮ็คเล็กน้อย :

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();
        });
});
— attacomsian
แหล่งที่มา
-1

ฉันลองด้วยวิธีนี้และดูเหมือนว่าจะทำงานได้ดี

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

ฉันพบตัวอย่างการทำงานมากมายที่นี่:

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

— Artem Shevtsov
แหล่งที่มา
ที่จะเปิดในแท็บหรือหน้าต่างใหม่ตามความต้องการของผู้ใช้ มันจะไม่บังคับให้แท็บใหม่ซึ่งเป็นคำถามเกี่ยวกับ
— เควนติน
คุณพลาดคำถามไปเล็กน้อยเมื่อ OP ได้ลองมาแล้วหรือยัง? หรือstackoverflow.com/a/59565074/19068 ? หรือstackoverflow.com/a/35939565/19068 ? หรือstackoverflow.com/a/30512485/19068 ? หรือstackoverflow.com/a/11384018/19068 ? หรือstackoverflow.com/a/26990478/19068 ?
— เควนติน
@Quentin ฉันพลาดส่วนนั้น แต่เมื่อฉันพยายามเรียก window.open ด้วยพารามิเตอร์ตัวที่สอง« windowName »เท่ากับ« _blank »หรือไม่ใช้เลยป๊อปอัปหรือแท็บใหม่ไม่ปรากฏใน Google Chrome ล่าสุด เมื่อฉันเปลี่ยนชื่อหน้าต่างเป็น« newWin »จะมีแท็บใหม่เปิดขึ้น มันแปลกเพราะพารามิเตอร์ชื่อหน้าต่างเป็นตัวเลือก
— Artem Shevtsov
-4

ฉันจะเห็นด้วยกับผู้เขียน (ถอดความที่นี่): "สำหรับลิงค์ในหน้าเว็บที่มีอยู่เบราว์เซอร์จะเปิดลิงค์ในแท็บใหม่เสมอหากหน้าใหม่เป็นส่วนหนึ่งของเว็บไซต์เดียวกันเช่น หน้าเว็บที่มีอยู่ " อย่างน้อยฉัน "กฎทั่วไป" นี้ใช้ได้กับ Chrome, Firefox, Opera, IE, Safari, SeaMonkey และ Konqueror

อย่างไรก็ตามมีวิธีที่ซับซ้อนน้อยกว่าในการใช้ประโยชน์จากสิ่งที่คนอื่นนำเสนอ สมมติว่าเรากำลังพูดถึงเว็บไซต์ของคุณเอง ("thissite.com" ด้านล่าง) ซึ่งคุณต้องการควบคุมสิ่งที่เบราว์เซอร์ทำอยู่ด้านล่างคุณต้องการให้ "specialpage.htm" ว่างเปล่าไม่มี HTML เลย ( ประหยัดเวลาในการส่งข้อมูลจากเซิร์ฟเวอร์!)

 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
แหล่งที่มา
-7

หากคุณต้องการเปิดลิงก์ภายนอก (ลิงก์ที่ไปยังไซต์อื่น ๆ ) ดังนั้น JavaScript / jQuery นี้จะทำงานได้ดี:

$(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
แหล่งที่มา
การตอบสนองนี้ไม่เหมาะสำหรับคำถามนี้ แต่นี่เป็นประโยชน์อย่างมากคิด! ขอบคุณสำหรับความคิดของคุณ!
— Nuri Akman
-9

เบราว์เซอร์จะเปิดลิงก์ในแท็บใหม่เสมอหากลิงก์นั้นอยู่ในโดเมนเดียวกัน (บนเว็บไซต์เดียวกัน) หากลิงก์นั้นอยู่ในโดเมนอื่นจะเปิดขึ้นในแท็บ / หน้าต่างใหม่ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์

ดังนั้นตามนี้เราสามารถใช้:

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

และเพิ่มรหัส 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;
    });
});

ดังนั้นก่อนเปิดหน้าต่างใหม่ในเว็บไซต์เดียวกันโดยมีเป้าหมาย _blank (จะเปิดในแท็บใหม่) จากนั้นเปิดเว็บไซต์ที่คุณต้องการภายในหน้าต่างใหม่นั้น

— loshMiS
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.