JavaScript Mở Tab mới: Các kỹ thuật hiệu quả nhất là gì? – javascript mở tab trình duyệt mới

Trong tính năng mở tab mới của JavaScript, cài đặt trình duyệt đóng một vai trò quan trọng. Tìm hiểu thêm về điều này và cách sử dụng phương thức window.open () để mở các tab mới.

Bạn đang xem : javascript mở tab trình duyệt mới

Javascript mở tab mới Chức năng tab mới mở của JavaScript cho phép người dùng đa nhiệm . Người dùng JavaScript có thể mở nhiều tab trên cùng một cửa sổ để thực hiện các tác vụ một cách hiệu quả. Ngoài việc mở tab, người dùng cũng có thể mở một cửa sổ mới .

Các cửa sổ mở JavaScript giúp thực hiện các tác vụ khác dễ dàng hơn khi tham chiếu đến cửa sổ mẹ. Để mở một cửa sổ mới hoặc để mở tab mới, JavaScript sử dụng cùng một thủ tục – phương thức window.open (). Giá trị thông số và cài đặt trình duyệt là một điểm khác biệt.

Bài viết này xem xét cách mở các tab mới bằng phương thức open () và url onClick.

Mở Tab mới JavaScript: Phương thức Window.open ()

Phương thức window open () phổ biến vì nó có nhiều tính năng. Nhiều tính năng giúp các nhà phát triển làm việc linh hoạt hơn.

Giá trị trả về window.open () đề cập đến tab, cửa sổ mới được tạo hoặc null nếu nó không mở được.

Vậy, làm cách nào để bạn mở một tab mới?

Cú pháp:

window.open (URL, ‘_blank’);

Sử dụng tham số _blank trong thông số window.open () thứ hai để mở tab mới. Nếu bạn thêm thông số thứ ba, thông số này sẽ mở ra một cửa sổ mới thay vì một tab mới.

Ngoài ra, bạn có thể bỏ qua hoàn toàn thông số thứ hai và chỉ chuyển URL.

JavaScript Window.open () Giải thích

Cú pháp:

var window = window.open (url, windowName, [windowFeatures]);

< p id = "ez-clearholder-box-4">

Phương thức open () là một phương thức có thể mở một tab mới hoặc một cửa sổ trình duyệt mới. Nhưng cách bạn mở phụ thuộc vào các giá trị tham số và cài đặt trình duyệt.

Quá trình mở JavaScript trong tab mới thật dễ dàng . Phương thức tải các tài nguyên được chỉ định vào tab, cửa sổ hiện tại hoặc mới hoặc & lt; iframe & gt; bằng cách sử dụng tên được chỉ định. Nếu tên không tồn tại, ngữ cảnh duyệt web sẽ tải trong tab hoặc cửa sổ mới , tải trang trong đó.

– Tổng quan về Window.open ()

Phương thức open () hoạt động tương tự như cách chọn Cửa sổ Mới từ menu Tệp. Url tham số, chỉ định URL được đưa vào và tải trong cửa sổ mới.

Nếu url trống, url sẽ tạo ra một cửa sổ trống màu đen mới – URL about: blank.

URL từ xa sẽ không tải ngay lập tức vì quá trình thực sự tìm nạp URL bắt đầu sau khi khối tập lệnh đang diễn ra hoàn tất việc thực thi. Việc tạo cửa sổ và tải tài nguyên tham chiếu diễn ra không đồng bộ.

Tuy nhiên, nếu một cửa sổ có tên đã xuất hiện, thì nó sẽ tải url vào cửa sổ hiện có. Ở đây, giá trị trả về là cửa sổ hiện tại – nó bỏ qua windowFeatures.

Chuỗi url trống cung cấp tham chiếu đến một cửa sổ đang mở và giữ lại vị trí của cửa sổ. Trong trường hợp khác, gọi window.open () sẽ tạo một cửa sổ mới. Như đã nêu trước đó, hãy sử dụng giá trị đặc biệt _blank cho windowName để mở một cửa sổ mới mỗi lần gọi window.open ().

Người dùng JavaScript mở tab mới với URL như được chỉ định trong cú pháp. Url có nghĩa là URL của trang web sẽ được mở.

– Thông số Window.open ()

  • url

Đây là Chuỗi DOM chỉ định URL của trang sẽ được mở, tức là vị trí của trang web sẽ được tải. Nó có thể là một URL hoặc đường dẫn đến một tệp hình ảnh, trang HTML hoặc bất kỳ trang nào khác mà trình duyệt hỗ trợ. Nếu một url không được chỉ định (chuỗi trống), nó sẽ mở ra một tab hoặc cửa sổ mới với about: blank. Nó có các thanh công cụ mặc định của cửa sổ chính.

  • windowName

Tên là Chuỗi DOM xác định thuộc tính mục tiêu hoặc tên của cửa sổ nơi một trang web cụ thể được tải. Nó cho phép bạn đặt tên cho cửa sổ mới . Nó hỗ trợ tên, biểu thị tên của cửa sổ hoặc các thuộc tính mục tiêu. Nó hỗ trợ:

  • _blank: đây là giá trị mặc định và nó mở URL trong cửa sổ hoặc tab mới.
  • _parent: URL tải vào cửa sổ chính.
  • _top: URL thay thế mọi bộ khung đã tải.
  • _self: URL thay thế cho trang web hiện tại.
  • tên: Tên của cửa sổ – nó không chỉ định tiêu đề của cửa sổ

Nếu tên không chỉ ra ngữ cảnh hiện có, thì nó sẽ tạo ra một cửa sổ mới windowName. Tên này được sử dụng làm mục tiêu cho các thuộc tính của & lt; một & gt; hoặc phần tử & lt; form & gt; .

Tên chỉ đơn giản là một số nhận dạng. Nếu bạn mở một cửa sổ có tên cụ thể và nhấp lại vào nút, nó sẽ làm mới cửa sổ đã mở để hiển thị nội dung mới. Tuy nhiên, nếu tên không tồn tại, chức năng này sẽ mở ra một cửa sổ mới với mỗi lần nhấp vào nút.

  • windowFeatures

Đây là Chuỗi DOM với danh sách các tính năng được phân tách bằng dấu phẩy. Danh sách có các giá trị tương ứng là “ name = value. ” Thông thường, tham số tính năng cho phép bạn xác định các phần tử của một cửa sổ đã mở hoặc mới được tạo. Nó có thể là chiều cao và chiều rộng hoặc vị trí của màn hình.

Các tính năng phổ biến là:

  • Trái (screenX) và trên cùng (screenY)

Các giá trị tính bằng pixel cho phép bạn sử dụng tọa độ X và Y để định vị cửa sổ trên màn hình. Nếu cửa sổ tham sốFeatures không trống và không có đối tượng vị trí nào được xác định, tọa độ screenX và screenY của tab hoặc cửa sổ mới được mặc định là 22 pixel tính từ điểm có nhiều cửa sổ nhất.

Các nhà sản xuất trình duyệt triển khai phần bù trên toàn cầu. Trong IE6 SP2, nó là 29 pixel và có chủ đề mặc định. Mục đích cơ bản của nó là giúp các nhà phát triển thông báo khi nào một cửa sổ mới đang mở. Giả sử cửa sổ được hiển thị gần đây đã được phóng to; sẽ không có chênh lệch – cửa sổ mới cũng được phóng to.

  • Chiều rộng (innerWidth) và chiều cao (innerHeight)
  • < / p>

Các tính năng này cho phép bạn điều chỉnh kích thước của cửa sổ ; giá trị của nó cũng tính bằng pixel. Giá trị chiều rộng cũng bao gồm chiều rộng của thanh cuộn dọc và không bao gồm thanh bên khi được mở rộng. Ngược lại, chiều cao bao gồm chiều cao của thanh cuộn ngang. Tuy nhiên, nó không bao gồm các phần giao diện người dùng khác như thanh tiêu đề, thanh vị trí, thanh tab, v.v. Cả chiều cao và chiều rộng phải có giá trị tối thiểu là 100 .

Tương tự, nếu cửa sổ tham số Tính năng không trống và không có tính năng kích thước nào được xác định, thì kích thước cửa sổ mới sẽ lấy kích thước của cửa sổ được mở gần đây nhất.

  • Các tính năng khác:

Có thể thay đổi kích thước: nó chấp nhận các giá trị, có và không hoặc 0 và 1 để chỉ định nếu một cửa sổ có thể được thay đổi kích thước sau khi mở. Thuộc tính này thay đổi từ trình duyệt này sang trình duyệt khác. Trong trình khám phá internet, giá trị mặc định là 0 hoặc không. Cửa sổ mới có thể thay đổi kích thước khi bạn bật tính năng này. Ngoài ra, trong trường hợp windowFeatures không trống, có thể thay đổi kích thước mặc định thành bật.

Thanh cuộn: cũng chấp nhận có và không hoặc 0 và 1 để chỉ định có thể cuộn tab mới mở hay không. Cửa sổ mới hiển thị thanh cuộn ngang hoặc / và dọc nếu tính năng này được bật. Ngược lại, nếu windowFeatures không trống, các thanh cuộn mặc định thành tắt.

Trạng thái: cũng vậy, nó sử dụng có và không hoặc 0 và 1 để cho biết liệu một tab hoặc cửa sổ có hiển thị thanh trạng thái ở dưới cùng hay không. Điều này không được khuyến nghị để ẩn thanh trạng thái vì nó cung cấp nhiều tính năng bảo mật. Thanh trạng thái luôn hiển thị khi tính năng này được bật. Nhưng nếu windowFeatures không trống, trạng thái sẽ mặc định là tắt.

Thanh trình đơn: cũng vậy, nó sử dụng có và không hoặc 0 và 1 và nó chỉ định liệu thanh trình đơn của trình duyệt có được hiển thị hay không. Nếu tính năng này được bật, cửa sổ mới sẽ hiển thị thanh thực đơn. Tuy nhiên, nếu windowFeatures không trống, thanh menu sẽ được mặc định tắt.

Thay thế: tính năng này lưu giữ lịch sử của các trang đã duyệt và sử dụng giá trị Boolean , chẳng hạn như true hoặc false. True nhắc nó tạo ra lịch sử mới thay cho lịch sử hiện tại. Ngược lại, false tạo ra một mục mới trong lịch sử trình duyệt.

Lưu ý rằng url, tên và các tính năng đều là tùy chọn.

Giá trị trả lại

Giá trị trả lại mong đợi là một cửa sổ hoặc tab đã mở – một đối tượng WindowProxy. Nó đại diện cho cửa sổ hoặc tab mới với toàn bộ tính năng của nó. Trong trường hợp một cửa sổ không được tạo, nó sẽ trả về giá trị rỗng.

Khi mở tab mới, JavaScript cho phép bạn nhấp vào liên kết hoặc nút đến tab hoặc cửa sổ mới. Bạn có thể mở URL trong tab mới bằng mã JavaScript. Đây là một ví dụ về mã:

& lt; input type = ”button” value = ”Tab Mới” onclick = ”window.open (‘ http://www.example.com ’)” & gt;

Nhưng nó phụ thuộc vào cài đặt mặc định của trình duyệt của bạn. Tuy nhiên, tất cả các trình duyệt hiện đại đều có chế độ xem nhiều tab và mặc định là mở một tab mới.

Thay đổi phần tử nút thành cửa sổ hoặc đặt ID cho phần tử cửa sổ.

Ngoài ra, bạn có thể sử dụng JavaScript để mở tab mới với URL bằng mã:

& lt; button onclick = ”window.open (‘ https://www.our-url.com ’)” id = ”myButton”

class = ”btn request-callback” & gt; Khám phá Thêm & lt; / button & gt;

Yêu cầu HTTP không đồng bộ

Trước khi sử dụng phương thức window.open (), hãy biết rằng một cửa sổ hoặc tab mới chỉ mở ra để phản hồi lại hành động trực tiếp từ người dùng . Chính xác là, URL sẽ mở ra sau một lần nhấp chuột thực sự.

Ngoài ra, các nhấp chuột yêu cầu HTTP không đồng bộ để mở URL trong tab mới có thể được thực hiện thành công. Tại đây, trình duyệt chặn cửa sổ bật lên vì chúng không phải là hành động trực tiếp của người dùng.

Nhưng bạn có thể sử dụng tab onclick đang mở để mở một cửa sổ trống mới. Sau khi hoàn thành yêu cầu, hãy cập nhật URL cửa sổ thực tế và đặt tiêu điểm. Trong trường hợp yêu cầu không thành công, hãy đóng cửa sổ bằng phương thức window.close ().

Kết luận

Trong bài viết này, chúng tôi đã thảo luận về điều đó:

  • Javascript mở mã tab mới

    window.open ()

    ; do đó, giá trị trả về có thể là null , một cửa sổ mới hoặc tab mới

  • Để đóng cửa sổ hoặc tab, hãy sử dụng

    close ()

Mở một cửa sổ mới dễ dàng hơn nhiều. sử dụng target = ”_ blank” trong thẻ biểu mẫu. Một lần nữa, hãy đảm bảo rằng tham số thứ hai là tên của cửa sổ. Sử dụng thuộc tính tính năng có sẵn, bạn có thể chỉ định chiều rộng và chiều cao của cửa sổ.

Xếp hạng bài đăng này


Xem thêm những thông tin liên quan đến chủ đề javascript mở tab trình duyệt mới

How To Open a New Tab With JavaScript

alt

  • Tác giả: codebubb
  • Ngày đăng: 2019-08-14
  • Đánh giá: 4 ⭐ ( 1810 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial, you will learn how to open a new tab with JavaScript. Get my free 32 page eBook of JavaScript HowTos 👉https://bit.ly/2ThXPL3

    In this short video, we will get an understanding of how JavaScript can be used to open a new tab with the click of the button.

    Whilst this can also be achieved using the target attribute of a link tag, there might be times when you want the new tab to open on a button click or from the result of some other action.

    This is an example of how JavaScript can be used to add functionality via DOM manipulation that would be difficult to implement with just HTML markup.

    javascripthowto javascript

Kích hoạt JavaScript trong các trình duyệt

  • Tác giả: quantrimang.com
  • Đánh giá: 4 ⭐ ( 6404 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tất cả các trình duyệt hiện đại đi kèm với hỗ trợ có sẵn cho JavaScript. Thường thì, bạn có thể cần thao tác để enable (kích hoạt) hoặc disable (vô hiệu hóa) hỗ trợ này. Chương này giải thích thủ tục để kích hoạt và vô hiệu hóa hỗ trợ JavaScript trong trình duyệt của bạn: Internet Explorer, Firefox, Chrome, và Opera.

JavaScript Mở liên kết trong tab/cửa sổ mới

  • Tác giả: www.javascriptbank.com
  • Đánh giá: 4 ⭐ ( 1622 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng đoạn mã JavaScript đơn giản này để làm cho tất cả các …JavaScript Mở liên kết trong tab/cửa sổ mới – Mở liên kết trong tab/cửa sổ mới – Ngôn ngữ: tiếng Việt

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

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 8331 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cung cấp cho cửa sổ một tham số ‘thông số kỹ thuật’ với chiều rộng /…

Mở tab hoặc cửa sổ mới trong JavaScript (window.open)

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 3 ⭐ ( 9028 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn các cách mở một tab cửa sổ mới trên trình duyệt trong JavaScript. Bạn sẽ học được cách sử dụng phương thức window.open để mở một tab hoặc cửa sổ mới trên trình duyệt trong JavaScript sau bài

Bật JavaScript

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 9850 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Code Javascript mở cửa sổ Popup Quảng cáo, tab mới khi click chuột

  • Tác giả: gocchiase.net
  • Đánh giá: 4 ⭐ ( 5508 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  » - căn chỉnh thẻ html img