Sẽ có lúc bạn muốn người dùng của mình nhấp vào liên kết trang web và mở nó trong tab trình duyệt mới. Nhưng làm thế nào để bạn làm điều đó trong HTML?
Trong bài viết này, tôi sẽ hướng dẫn các bạn cách sử dụng thuộc tính target="_blank"
thông qua các đoạn mã ví dụ. Tôi cũng sẽ nói về thời điểm bạn nên cân nhắc sử dụng thuộc tính này
Cách mở một tab trình duyệt mới bằng cách sử dụng target="_blank"
Thuộc tính target="_blank"
được sử dụng bên trong thẻ neo mở như thế này
Khi người dùng nhấp vào liên kết, một tab trình duyệt mới sẽ tự động mở đến trang đó
Trong ví dụ này, tôi đã lồng một liên kết bên trong một tập hợp các thẻ đoạn văn để hướng mọi người đến freeCodeCamp
To learn how to code for free, please visit freeCodeCamp.org
Khi bạn nhấp vào liên kết freeCodeCamp, nó sẽ mở ra một tab trình duyệt mới cho bạn
Nếu tôi bỏ qua thuộc tính target="_blank"
, thì hành vi mặc định sẽ là rời khỏi trang web hiện tại và truy cập trực tiếp vào liên kết mà không cần mở tab trình duyệt mới
Từ khóa noopener
là gì?
Từ khóa noopener
trong thuộc tính
To learn how to code for free, please visit freeCodeCamp.org
1 được sử dụng chủ yếu vì lý do bảo mật để ngăn người dùng có ác ý gây rối với trang web gốc thông qua thuộc tính To learn how to code for free, please visit freeCodeCamp.org
2. Nếu người dùng độc hại có quyền truy cập vào đối tượng cửa sổ của bạn thì họ có thể chuyển hướng trang của bạn đến một URL độc hạiBạn có thể sử dụng từ khóa noopener
như một cách giúp ngăn chặn sự cố bảo mật đó xảy ra. Đây là cách sử dụng từ khóa noopener
DevDocs documentation
Nếu bạn muốn tìm hiểu thêm về các vấn đề bảo mật mà
To learn how to code for free, please visit freeCodeCamp.org
5 đã giúp giải quyết, vui lòng đọc qua bài viết hữu ích nàyCập nhật cho từ khóa noopener
Vào năm 2021, đã có một bản cập nhật trong đó các trình duyệt hiện đại hiện đặt
To learn how to code for free, please visit freeCodeCamp.org
5 cho bất kỳ liên kết nào bằng thuộc tính To learn how to code for free, please visit freeCodeCamp.org
8. Như bạn có thể thấy trong bảng Tôi có thể sử dụng không, từ khóa noopener
được hầu hết các trình duyệt hỗ trợ ngoại trừ Internet Explorer 11Ngay cả với bản cập nhật này, nhiều nhà phát triển vẫn sẽ sử dụng
To learn how to code for free, please visit freeCodeCamp.org
5 cho các liên kết sử dụng thuộc tính To learn how to code for free, please visit freeCodeCamp.org
8Bạn có nên sử dụng thuộc tính target="_blank"
mọi lúc không?
Khi người dùng nhấp vào một liên kết, hành vi mặc định là mở liên kết đó trên trang hiện tại mà họ đang truy cập mà không cần mở tab trình duyệt mới. Trong nhiều trường hợp, bạn không muốn thay đổi hành vi mặc định này vì người dùng ngày càng mong đợi điều này
Bạn phải suy nghĩ cẩn thận về thời điểm thích hợp để sử dụng thuộc tính target="_blank"
. Một ví dụ điển hình là nếu người dùng đang làm việc trên một trang và họ không muốn rời khỏi trang đó nếu họ nhấp vào liên kết
Trong ví dụ này, chúng tôi đang liên kết đến tài liệu DevDocs, vì vậy người dùng có thể ở lại trang hiện tại của họ và tra cứu tài liệu tham khảo trên tab mới
Phần kết luận
Bạn có thể sử dụng thuộc tính target="_blank"
nếu bạn muốn người dùng của mình nhấp vào liên kết mở ra tab trình duyệt mới
Thuộc tính target="_blank"
được sử dụng bên trong thẻ neo mở như thế này
Từ khóa noopener
trong thuộc tính
To learn how to code for free, please visit freeCodeCamp.org
1 được thêm vào để ngăn những người dùng có ác ý gây rối với trang web gốc thông qua thuộc tính To learn how to code for free, please visit freeCodeCamp.org
2
Bạn phải suy nghĩ cẩn thận về thời điểm thích hợp để sử dụng thuộc tính target="_blank"
vì bạn không muốn luôn thay đổi hành vi mặc định của liên kết
Tôi hy vọng bạn thích bài viết này và chúc may mắn trên hành trình lập trình của bạn
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Tôi là một nhạc sĩ và một lập trình viên
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu