Làm cách nào để mở một cửa sổ mới trong html?

Đầu tiên, tôi đã thực hiện một số thay đổi nhỏ trong mã ban đầu, bây giờ nó mở cửa sổ mới theo tỷ lệ màn hình người dùng một cách hoàn hảo (đối với máy tính để bàn nằm ngang)

nhưng, tôi muốn khuyên bạn nên sử dụng đoạn mã sau để mở liên kết trong tab mới nếu bạn sử dụng thiết bị di động (nhờ câu trả lời của zvona trong câu hỏi khác)

Tôi đang thêm liên kết HTML tùy chỉnh thông qua Tiện ích HTML tùy chỉnh trên thanh bên nhưng liên kết đang mở trong cùng một cửa sổ mà tôi muốn liên kết này được mở trong TAB mới

Xin vui lòng đề nghị làm thế nào để làm điều đó

Blog tôi cần trợ giúp là. (chỉ hiển thị cho người dùng đã đăng nhập)

Tháng Bảy 31, 2018 tại 9. 27 giờ chiều

mwinya

Thành viên

Hi sumittaxaii,

Bạn có thể mở một liên kết HTML trong một tab mới bằng cách thêm thuộc tính target=”_blank”. Bạn nên chèn cái này sau địa chỉ liên kết

Đây là một liên kết ví dụ sẽ mở WordPress. trang chủ com trong tab mới

<a href="//www.WordPress.com" target="_blank">WordPress Homepage</a>

Vui lòng cho tôi biết nếu bạn cần hỗ trợ thêm

Ngày 2 tháng 12 năm 2021 tại 5. 50 giờ chiều

siêu tân tinh

Nhân viên

câu trả lời được chấp nhận

Giống như một bản cập nhật cho điều này, bạn không còn phải chỉnh sửa HTML trực tiếp nữa. Nếu bạn đang sử dụng trình chỉnh sửa WordPress hiện tại, chỉ cần đánh dấu (các) từ bạn muốn liên kết, dán URL và chuyển đổi “Mở trong tab mới” trong hộp xuất hiện. Nó trông như thế này

Phương thức window.open("//www.mozilla.org/", "mozillaTab"); 1 của giao diện window.open("//www.mozilla.org/", "mozillaTab"); 2 tải tài nguyên được chỉ định vào ngữ cảnh duyệt web mới hoặc hiện có (nghĩa là tab, cửa sổ hoặc iframe) dưới một tên được chỉ định

open() open(url) open(url, target) open(url, target, windowFeatures)

window.open("//www.mozilla.org/", "mozillaTab"); 3 Tùy chọn

Một chuỗi cho biết URL hoặc đường dẫn của tài nguyên sẽ được tải. Nếu một chuỗi trống (window.open("//www.mozilla.org/", "mozillaTab"); 4) được chỉ định hoặc tham số này bị bỏ qua, một trang trống sẽ được mở trong ngữ cảnh duyệt được nhắm mục tiêu

window.open("//www.mozilla.org/", "mozillaTab"); 5 Tùy chọn

Một chuỗi, không có khoảng trắng, chỉ định tên của ngữ cảnh duyệt mà tài nguyên đang được tải vào. Nếu tên không xác định ngữ cảnh hiện có, ngữ cảnh mới sẽ được tạo và đặt tên đã chỉ định. Đặc biệt , window.open("//www.mozilla.org/", "mozillaTab"); 7, window.open("//www.mozilla.org/", "mozillaTab"); 8, window.open("//www.mozilla.org/", "mozillaTab"); 9, và window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 0, cũng có thể được sử dụng

Tên này có thể được sử dụng làm thuộc tính window.open("//www.mozilla.org/", "mozillaTab"); 5 của hoặc các phần tử

window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 4 Tùy chọn

Một chuỗi chứa danh sách các tính năng cửa sổ được phân tách bằng dấu phẩy ở dạng window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 5 — hoặc đối với các tính năng boolean, chỉ cần window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 6. Các tính năng này bao gồm các tùy chọn như kích thước và vị trí mặc định của cửa sổ, có mở cửa sổ bật lên tối thiểu hay không, v.v. Các tùy chọn sau được hỗ trợ

window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 7

Nếu tính năng này được bật, nó sẽ yêu cầu sử dụng một cửa sổ bật lên tối thiểu. Các tính năng giao diện người dùng có trong cửa sổ bật lên sẽ được trình duyệt tự động quyết định, thường chỉ bao gồm một thanh địa chỉ

Nếu window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 7 không được bật và không có tính năng cửa sổ nào được khai báo, ngữ cảnh duyệt web mới sẽ là một tab

Ghi chú. Việc chỉ định bất kỳ tính năng nào trong tham số window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 4, ngoại trừ const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 0 hoặc const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 1, cũng có tác dụng yêu cầu cửa sổ bật lên

Để bật tính năng này, hãy chỉ định window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 7 hoàn toàn không có giá trị hoặc nếu không, hãy đặt nó thành const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 3, const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 4 hoặc const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 5

Thí dụ. const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 6, const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 7, const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 8 và window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 7 đều có kết quả giống hệt nhau

<a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 0 hoặc <a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 1

Chỉ định chiều rộng của vùng nội dung, bao gồm thanh cuộn. Giá trị yêu cầu tối thiểu là 100

<a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 2 hoặc <a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 3

Chỉ định chiều cao của khu vực nội dung, bao gồm thanh cuộn. Giá trị yêu cầu tối thiểu là 100

<a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 4 hoặc <a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 5

Chỉ định khoảng cách tính bằng pixel từ phía bên trái của khu vực làm việc như được xác định bởi hệ điều hành của người dùng nơi cửa sổ mới sẽ được tạo

<a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 6 hoặc <a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 7

Chỉ định khoảng cách tính bằng pixel từ phía trên cùng của khu vực làm việc như được xác định bởi hệ điều hành của người dùng nơi cửa sổ mới sẽ được tạo

const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 0

Nếu tính năng này được đặt, cửa sổ mới sẽ không có quyền truy cập vào cửa sổ ban đầu thông qua <a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 9 và trả về let windowObjectReference = null; // global variable function openRequestedTab(url, windowName) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, windowName); } else { windowObjectReference.focus(); } } const link = document.querySelector("a[target='OpenWikipediaWindow']"); link.addEventListener( "click", (event) => { openRequestedTab(link.href); event.preventDefault(); }, false ); 0

Khi const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 0 được sử dụng, các tên mục tiêu không trống, ngoài window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 0, window.open("//www.mozilla.org/", "mozillaTab"); 7 và window.open("//www.mozilla.org/", "mozillaTab"); 9, được xử lý như window.open("//www.mozilla.org/", "mozillaTab"); 8 về mặt quyết định có mở ngữ cảnh duyệt web mới hay không

const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 1

Nếu tính năng này được đặt, trình duyệt sẽ bỏ qua tiêu đề let windowObjectReference = null; // global variable function openRequestedTab(url, windowName) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, windowName); } else { windowObjectReference.focus(); } } const link = document.querySelector("a[target='OpenWikipediaWindow']"); link.addEventListener( "click", (event) => { openRequestedTab(link.href); event.preventDefault(); }, false ); 7, cũng như đặt const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … } 0 thành true. Xem let windowObjectReference = null; // global variable function openRequestedTab(url, windowName) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, windowName); } else { windowObjectReference.focus(); } } const link = document.querySelector("a[target='OpenWikipediaWindow']"); link.addEventListener( "click", (event) => { openRequestedTab(link.href); event.preventDefault(); }, false ); 9 để biết thêm thông tin

Ghi chú. Các giá trị vị trí được yêu cầu (<a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 6, <a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 4) và thứ nguyên được yêu cầu (<a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 0, <a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> 2) trong window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 4 sẽ được sửa nếu bất kỳ giá trị nào được yêu cầu như vậy không cho phép hiển thị toàn bộ cửa sổ bật lên của trình duyệt trong khu vực làm việc cho các ứng dụng của hệ điều hành của người dùng. Nói cách khác, ban đầu không có phần nào của cửa sổ bật lên mới có thể được định vị ngoài màn hình

Một đối tượng <p> <a href="//www.wikipedia.org/" target="SingleSecondaryWindowName"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> </p> <p> <a href="//support.mozilla.org/products/firefox" target="SingleSecondaryWindowName"> Firefox FAQ (opens in another, possibly already existing, tab) </a> </p> 5. Tham chiếu được trả về có thể được sử dụng để truy cập các thuộc tính và phương thức của cửa sổ mới miễn là nó tuân thủ các yêu cầu bảo mật của chính sách cùng nguồn gốc

Phương thức window.open("//www.mozilla.org/", "mozillaTab"); 1 của giao diện window.open("//www.mozilla.org/", "mozillaTab"); 2 lấy một URL làm tham số và tải tài nguyên mà nó xác định vào một tab hoặc cửa sổ mới hoặc hiện có. Tham số window.open("//www.mozilla.org/", "mozillaTab"); 5 xác định cửa sổ hoặc tab nào sẽ tải tài nguyên vào và tham số window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 4 có thể được sử dụng để kiểm soát mở một cửa sổ bật lên mới với các tính năng giao diện người dùng tối thiểu và kiểm soát kích thước cũng như vị trí của nó

Lưu ý rằng các URL từ xa sẽ không tải ngay lập tức. Khi let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); } 0 trả về, cửa sổ luôn chứa let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); } 1. Quá trình tìm nạp URL thực tế được hoãn lại và bắt đầu sau khi khối tập lệnh hiện tại kết thúc thực thi. Việc tạo cửa sổ và tải tài nguyên được tham chiếu được thực hiện không đồng bộ

window.open("//www.mozilla.org/", "mozillaTab");

Ngoài ra, ví dụ sau minh họa cách mở cửa sổ bật lên, sử dụng tính năng window.open("//www.mozilla.org/", "mozillaWindow", "popup"); 7

Cảnh báo. Các trình duyệt hiện đại có trình chặn cửa sổ bật lên tích hợp, ngăn việc mở các cửa sổ bật lên đó. Người dùng phải thay đổi cài đặt trình duyệt của họ để bật cửa sổ bật lên hoặc bật chúng trên cơ sở từng trang từ giao diện người dùng của trình duyệt (một thông báo có thể xuất hiện khi trang web cố gắng mở cửa sổ bật lên lần đầu tiên, cung cấp tùy chọn bật hoặc

window.open("//www.mozilla.org/", "mozillaWindow", "popup");

Có thể kiểm soát kích thước và vị trí của cửa sổ bật lên mới

const windowFeatures = "left=100,top=100,width=320,height=320"; const handle = window.open( "//www.mozilla.org/", "mozillaWindow", windowFeatures ); if (!handle) { // The window wasn't allowed to open // This is likely caused by built-in popup blockers. // … }

Trong một số trường hợp, JavaScript bị tắt hoặc không khả dụng và let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); } 0 sẽ không hoạt động. Thay vì chỉ dựa vào sự hiện diện của tính năng này, chúng tôi có thể cung cấp giải pháp thay thế để trang web hoặc ứng dụng vẫn hoạt động

Nếu hỗ trợ JavaScript bị tắt hoặc không tồn tại, thì tác nhân người dùng sẽ tạo một cửa sổ phụ tương ứng hoặc sẽ hiển thị tài nguyên được tham chiếu theo cách xử lý thuộc tính ________0____5. Mục tiêu và ý tưởng là cung cấp (chứ không áp đặt) cho người dùng cách mở tài nguyên được tham chiếu

HTML

<a href="//www.wikipedia.org/" target="OpenWikipediaWindow"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a>

JavaScript

let windowObjectReference = null; // global variable function openRequestedTab(url, windowName) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, windowName); } else { windowObjectReference.focus(); } } const link = document.querySelector("a[target='OpenWikipediaWindow']"); link.addEventListener( "click", (event) => { openRequestedTab(link.href); event.preventDefault(); }, false );

Đoạn mã trên giải quyết một số vấn đề về khả năng sử dụng liên quan đến liên kết mở cửa sổ bật lên. Mục đích của let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); } 5 trong mã là hủy bỏ hành động mặc định của liên kết. nếu trình xử lý sự kiện cho let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); } 6 được thực thi, thì không cần thực hiện hành động mặc định của liên kết. Nhưng nếu hỗ trợ JavaScript bị tắt hoặc không tồn tại trên trình duyệt của người dùng, thì trình xử lý sự kiện cho let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); } 6 sẽ bị bỏ qua và trình duyệt sẽ tải tài nguyên được tham chiếu trong khung hoặc cửa sổ đích có tên let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); } 8. Nếu không có khung cũng như cửa sổ nào có tên let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); } 8 thì trình duyệt sẽ tạo một cửa sổ mới và đặt tên là let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); } 8

Ghi chú. Để biết thêm chi tiết về thuộc tính window.open("//www.mozilla.org/", "mozillaTab"); 5, hãy xem hoặc

Sử dụng // Script from example.com const otherOriginContext = window.open("//example.org"); // example.com and example.org are not the same origin console.log(otherOriginContext.origin); // DOMException: Permission denied to access property "origin" on cross-origin object 5 làm giá trị thuộc tính đích sẽ tạo ra một số cửa sổ mới và chưa được đặt tên trên màn hình của người dùng không thể tái chế hoặc sử dụng lại. Cố gắng cung cấp một tên có ý nghĩa cho thuộc tính window.open("//www.mozilla.org/", "mozillaTab"); 5 của bạn và sử dụng lại thuộc tính window.open("//www.mozilla.org/", "mozillaTab"); 5 đó trên trang của bạn để một cú nhấp chuột vào một liên kết khác có thể tải tài nguyên được tham chiếu trong một cửa sổ đã được tạo và hiển thị (do đó tăng tốc quá trình cho người dùng) và do đó biện minh cho . Việc sử dụng một giá trị thuộc tính window.open("//www.mozilla.org/", "mozillaTab"); 5 duy nhất và sử dụng lại nó trong các liên kết sẽ thân thiện với tài nguyên người dùng hơn nhiều vì nó chỉ tạo ra một cửa sổ phụ duy nhất, cửa sổ này được sử dụng lại

Đây là một ví dụ nơi một cửa sổ phụ có thể được mở và sử dụng lại cho các liên kết khác

HTML

<p> <a href="//www.wikipedia.org/" target="SingleSecondaryWindowName"> Wikipedia, a free encyclopedia (opens in another, possibly already existing, tab) </a> </p> <p> <a href="//support.mozilla.org/products/firefox" target="SingleSecondaryWindowName"> Firefox FAQ (opens in another, possibly already existing, tab) </a> </p>

JavaScript

let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); }

Nếu bối cảnh duyệt mới được mở không có cùng nguồn gốc, tập lệnh mở sẽ không thể tương tác (đọc hoặc viết) với nội dung của bối cảnh duyệt

// Script from example.com const otherOriginContext = window.open("//example.org"); // example.com and example.org are not the same origin console.log(otherOriginContext.origin); // DOMException: Permission denied to access property "origin" on cross-origin object

// Script from example.com const sameOriginContext = window.open("//example.com"); // This time, the new browsing context has the same origin console.log(sameOriginContext.origin); // //example.com

Để biết thêm thông tin, hãy tham khảo bài viết Chính sách cùng nguồn gốc

Tốt hơn là tránh dùng đến let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); } 0, vì nhiều lý do

  • Các trình duyệt hiện đại cung cấp tính năng chặn cửa sổ bật lên
  • Các trình duyệt hiện đại cung cấp tính năng duyệt tab và người dùng trình duyệt hỗ trợ tab thích mở tab mới hơn mở cửa sổ mới trong hầu hết các tình huống
  • Người dùng có thể sử dụng các tính năng hoặc tiện ích mở rộng tích hợp sẵn của trình duyệt để chọn mở một liên kết trong một cửa sổ mới, trong cùng một cửa sổ, trong một tab mới, cùng một tab hay trong nền. Buộc phần mở đầu diễn ra theo một cách cụ thể, sử dụng let windowObjectReference = null; // global variable let previousURL; /* global variable that will store the url currently in the secondary window */ function openRequestedSingleTab(url) { if (windowObjectReference === null || windowObjectReference.closed) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); } else if (previousURL !== url) { windowObjectReference = window.open(url, "SingleSecondaryWindowName"); /* if the resource to load is different, then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowObjectReference.focus(); } else { windowObjectReference.focus(); } previousURL = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. */ } const links = document.querySelectorAll( "a[target='SingleSecondaryWindowName']" ); for (const link of links) { link.addEventListener( "click", (event) => { openRequestedSingleTab(link.href); event.preventDefault(); }, false ); } 0, sẽ khiến họ bối rối và bỏ qua thói quen của họ
  • Cửa sổ bật lên không có thanh công cụ menu, trong khi các tab mới sử dụng giao diện người dùng của cửa sổ trình duyệt;

Tránh // Script from example.com const sameOriginContext = window.open("//example.com"); // This time, the new browsing context has the same origin console.log(sameOriginContext.origin); // //example.com 1 hoặc // Script from example.com const sameOriginContext = window.open("//example.com"); // This time, the new browsing context has the same origin console.log(sameOriginContext.origin); // //example.com 2

Các giá trị // Script from example.com const sameOriginContext = window.open("//example.com"); // This time, the new browsing context has the same origin console.log(sameOriginContext.origin); // //example.com 3 không có thật này gây ra hành vi không mong muốn khi sao chép/kéo liên kết, mở liên kết trong tab/cửa sổ mới, đánh dấu trang hoặc khi JavaScript đang tải, lỗi hoặc bị vô hiệu hóa. Chúng cũng truyền đạt ngữ nghĩa không chính xác cho các công nghệ hỗ trợ, như trình đọc màn hình

Nếu cần, hãy sử dụng phần tử // Script from example.com const sameOriginContext = window.open("//example.com"); // This time, the new browsing context has the same origin console.log(sameOriginContext.origin); // //example.com 4 để thay thế. Nói chung, bạn chỉ nên sử dụng liên kết để điều hướng đến một URL thực

Xác định các liên kết sẽ mở ra các cửa sổ mới theo cách giúp điều hướng cho người dùng

window.open("//www.mozilla.org/", "mozillaTab"); 0

Mục đích là để cảnh báo người dùng về những thay đổi ngữ cảnh để giảm thiểu sự nhầm lẫn từ phía người dùng. việc thay đổi cửa sổ hiện tại hoặc bật lên các cửa sổ mới có thể khiến người dùng mất phương hướng (trong trường hợp cửa sổ bật lên, không có thanh công cụ nào cung cấp nút "Trước" để quay lại cửa sổ trước đó)

Khi những thay đổi cực đoan trong bối cảnh được xác định rõ ràng trước khi chúng xảy ra, thì người dùng có thể xác định xem họ có muốn tiếp tục hay không hoặc để họ có thể chuẩn bị cho thay đổi. không những họ sẽ không bị nhầm lẫn hoặc cảm thấy mất phương hướng, mà những người dùng có kinh nghiệm hơn có thể quyết định tốt hơn cách mở các liên kết đó (trong một cửa sổ mới hay không, trong cùng một cửa sổ, trong một tab mới hay không, trong "nền" hay không)

Chủ đề