Khi người dùng mở một liên kết, họ có thể thắc mắc rằng họ mở liên kết đó dễ dàng như thế nào trong một tab mới. Họ chỉ cần nhấp vào liên kết và các yếu tố sẽ mở trong một tab mới
Bạn đã bao giờ nghĩ làm như vậy với các liên kết của mình bằng HTML và JavaScript chưa?
Phương pháp 1. Sử dụng thẻ HTML để mở URL trong tab mới
Khi sử dụng trình duyệt web, người dùng thường cố gắng mở hoặc chuyển từ trang này sang trang khác. Khi các nhà phát triển web phát triển một ứng dụng web, họ sử dụng thẻ HTML [được gọi là thẻ neo] để thêm liên kết và điều hướng đến các trang khác
Nhưng vấn đề là trình duyệt mặc định không cho phép người dùng điều hướng đến tab mới sau khi nhấp vào liên kết. Vì vậy, các nhà phát triển cần chỉ định thuộc tính trên liên kết. Nó sẽ dẫn hướng dẫn đến trình duyệt web mà người dùng đang hướng dẫn trình duyệt mở liên kết sang một tab mới
Khi người dùng hoặc nhà phát triển sử dụng HTML, họ có thể sử dụng giá trị "_blank" trong thuộc tính đích và trình duyệt sẽ mở liên kết URL trong tab mới
Trong HTML, người dùng có thể tạo đường dẫn để mở siêu liên kết đến trang khác bằng thẻ phần tử neo. Ngoài ra, như chúng ta đã thảo luận ở các phần trên của bài viết này, người dùng có thể thêm giá trị "_blank" vào thuộc tính đích của thẻ để mở liên kết trong tab mới
Các nhà phát triển web có các tùy chọn khác để sử dụng với thẻ neo, tôi. e. , họ có thể sử dụng thuộc tính href để cung cấp URL của trang mà họ muốn bất kỳ người dùng nào nhắc
Chúng ta hãy xem đoạn mã và hiểu cách thức hoạt động của nó
Click to open in the same tab
Google.com Click to open in a different tab
Chạy đoạn mã
Giải trình
Ví dụ trên cho thấy cách sử dụng thẻ neo với hai thuộc tính của nó là thuộc tính href và target. Nhưng người dùng cần nhớ một điểm quan trọng đối với mối quan tâm bảo mật mạnh mẽ
Các chuyên gia khuyên rằng nhà phát triển web chuyên nghiệp nên thêm rel="noreferrer noopener" vào thẻ bất cứ khi nào họ sử dụng nó cùng với thuộc tính đích của nó. Nó sẽ ngăn chặn các cuộc tấn công độc hại tiềm ẩn từ các trang mà người dùng sẽ liên kết
Đoạn mã
Click to open in the same tab
Google.com Click to open in a different tab
Chạy đoạn mã
Phương pháp 2. Sử dụng các phương thức JavaScript để mở URL trong tab mới
Đó là một phương pháp khác để mở một liên kết trong một tab mới. Tại đây, */người dùng có thể sử dụng cửa sổ JavaScript. open[], khá đơn giản và dễ sử dụng. Người dùng chỉ cần chuyển hai đối số vào cửa sổ JavaScript. phương thức mở []. Đối số đầu tiên là URL của trang web và đối số thứ hai là người dùng đã sử dụng trong phần HTML, tôi. e. , thuộc tính đích trong thẻ neo. Trang web cần điều này để chỉ định nơi người dùng muốn mở liên kết hoặc URL. Ví dụ: "_blank. "
cú pháp
window.open["URL", "_blank"];Hãy để chúng tôi xem làm thế nào để sử dụng phương pháp này
- Đầu tiên, người dùng sử dụng thuộc tính _blank làm tham số thứ hai của cửa sổ JavaScript. open[] để mở liên kết đã cho trong tab mới
- Cửa sổ. open[] trả về một giá trị dưới dạng tham chiếu đến tab hoặc cửa sổ mới được tạo và trả về giá trị rỗng nếu không thể mở tab mới
- Cuối cùng, người dùng không nên sử dụng tham số thứ ba cho phương thức vì nó sẽ mở một cửa sổ mới thay vì một tab mới
Thuộc tính
- _blank - Mở URL trong tab mới
- _parent - Mở URL trong khung chính [Cần chỉ định tên khung]
- _self - Mở URL trong trang hiện tại
- _top - Mở URL trong bất kỳ bộ khung nào có thể được tải
Đoạn mã
Open a URL in a new tab
Click the button to open stechies.com in a new tab
Open Google
Chạy đoạn mã
Phương pháp 3. Sử dụng JQuery để mở một URL cụ thể trong tab mới
Đoạn mã
Open a URL in a new tab
Click the button to open stechies.com in a new tab
STechies.com
Chạy đoạn mã
Phương pháp 4. Sử dụng JQuery để mở tất cả các URL trong một tab mới
Đoạn mã
Open a URL in a new tab
Click the button to open stechies.com in a new tab
STechies.com
Chạy đoạn mã
Phần kết luận
Cuối cùng, chúng tôi đã kết thúc bài viết về cách mở URL trong tab mới bằng HTML và JavaScript. Người dùng có thể sử dụng thẻ neo trong HTML với các thuộc tính href và _blank hoặc họ cũng có thể sử dụng cửa sổ. open[] của JavaScript tại sự kiện onClick để tạo nút bấm và mở URL trong tab mới