Các tab thật tuyệt phải không? Chúng cho phép người đa nhiệm trong tất cả chúng ta xử lý một loạt các nhiệm vụ trực tuyến cùng một lúc. Các tab hiện nay rất phổ biến nên khi bạn nhấp vào một liên kết, có thể nó sẽ mở ra trong một tab mới. Nếu bạn đã từng tự hỏi làm thế nào để

Bạn đang xem: cách mở liên kết trong html tab mới

Các tab thật tuyệt phải không? Chúng cho phép người đa nhiệm trong tất cả chúng ta xử lý nhiều công việc trực tuyến cùng một lúc.

Hiện nay, các tab đã trở nên phổ biến đến nỗi, khi bạn nhấp vào một liên kết, có khả năng nó sẽ mở trong một liên kết mới. tab.

Nếu bạn từng tự hỏi làm thế nào để thực hiện điều đó với các liên kết của riêng mình, thì bạn đã đến đúng nơi.

Phần tử neo

Để tạo liên kết trên trang web, bạn cần bao bọc một phần tử (văn bản, hình ảnh, v.v.) trong một phần tử neo ( & lt; a & gt; ) và đặt thuộc tính href của nó thành URL mà bạn muốn liên kết tới.

  & lt; p & gt; Xem & lt; a href = "https://www.freecodecamp.org/">freeCodeCamp</a>.</p>  

Nếu bạn nhấp vào liên kết ở trên, trình duyệt sẽ mở liên kết trong cửa sổ hoặc tab hiện tại. Đây là hành vi mặc định trong mọi trình duyệt.

Để mở một liên kết trong tab mới, chúng tôi sẽ cần xem xét một số thuộc tính khác trong số các thuộc tính khác của phần tử neo.

Thuộc tính Mục tiêu

Thuộc tính này cho trình duyệt biết cách mở liên kết.

Để mở một liên kết trong tab mới, chỉ cần đặt thuộc tính target cho _blank :

  & lt; p & gt; Xem & lt; a href = "https: //www.freecodecamp.org/ "target =" _ blank "& gt; freeCodeCamp & lt; / a & gt;. & lt; / p & gt;  

Bây giờ khi ai đó nhấp vào liên kết, liên kết sẽ mở ra trong tab mới hoặc có thể là cửa sổ mới tùy thuộc vào cài đặt trình duyệt của người đó.

Xem Thêm  AWS Lambda với Python: Hướng dẫn bắt đầu đầy đủ - làm thế nào để sử dụng lambda trong python

Mối quan tâm về bảo mật với target = "_ blank"

Tôi thực sự khuyên bạn nên luôn thêm rel = "noreferrer noopener" vào phần tử liên kết bất cứ khi nào bạn sử dụng thuộc tính target :

  & lt; p & g t; Xem & lt; a href = "https://www.freecodecamp.org/" target = "_ blank" rel = "noopener noreferrer" & gt; freeCodeCamp & lt; / a & gt;. & lt; / p & gt;  < / pre> 

Điều này dẫn đến kết quả sau:

Bộ thuộc tính rel mối quan hệ giữa trang của bạn và URL được liên kết. Đặt nó thành noopener noreferrer là để ngăn một loại lừa đảo được gọi là tabnabbing .

Tabnabbing là gì?

Tabnab, đôi khi được gọi là đảo ngược tabnab, là một khai thác sử dụng hành vi mặc định của trình duyệt với target = "_ blank" để có được quyền truy cập một phần vào trang của bạn thông qua cửa sổ . đối tượng API.

Với tính năng tab, một trang mà bạn liên kết đến có thể khiến trang của bạn chuyển hướng đến một trang đăng nhập giả mạo. Điều này sẽ khó đối với hầu hết người dùng vì tiêu điểm sẽ nằm trên tab vừa mở - không phải tab ban đầu với trang của bạn.

Sau đó, khi một người quay lại tab có trang của bạn, họ thay vào đó sẽ thấy trang đăng nhập giả mạo và có thể nhập chi tiết đăng nhập của họ.

Nếu bạn muốn tìm hiểu thêm về cách hoạt động của tabnabs và những gì kẻ xấu có thể làm với việc khai thác, hãy xem Alex Yumashev's bài báo và bài viết này của OWASP .

Nếu bạn muốn xem ví dụ làm việc an toàn, hãy xem trang này và GitHub repo của nó để biết thêm thông tin về cách khai thác và thuộc tính rel .

Tóm lại

Thật dễ dàng sử dụng HTML để mở một liên kết trong tab mới. Bạn chỉ cần một phần tử liên kết ( & lt; a & gt; ) với ba thuộc tính quan trọng:

  1. Thuộc tính href được đặt thành URL của trang mà bạn muốn liên kết tới
  2. Thuộc tính target được đặt thành _blank , thông báo cho trình duyệt mở liên kết trong tab / cửa sổ mới, tùy thuộc vào trên cài đặt của trình duyệt
  3. Thuộc tính rel được đặt thành noreferrer noopener để ngăn các cuộc tấn công nguy hiểm có thể xảy ra từ các trang bạn liên kết đến
  4. >

    Một lần nữa, đây là một ví dụ hoạt động đầy đủ:

      & lt; p & gt; Xem & lt; a href = "https://www.freecodecamp.org / "target =" _ blank "rel =" noopener noreferrer "& gt; freeCodeCamp & lt; / a & gt;. & lt; / p & gt;  

    Kết quả nào dẫn đến kết quả sau trong trình duyệt:

    Một lần nữa, cảm ơn bạn đã đọc. Chúc bạn viết mã vui vẻ.


Xem thêm những thông tin liên quan đến chủ đề cách mở liên kết trong html tab mới

Next Link - How to open a link in a new tab

  • Tác giả: Learn to code with James
  • Ngày đăng: 2021-11-02
  • Đánh giá: 4 ⭐ ( 6648 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Welcome to the Next Basics Series, a Series of short video tackling questions I get frequently. In this video, we talk about Next Link and how you can open Links in new tabs.

    Prefer a written article: https://www.jamesperkins.dev/post/next-link-open-new-tab
    Looking to connect: https://bio.link/jamesperkins

Bài 5: Chèn liên kết vào trang web với thẻ a trong HTML

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

Thẻ Tạo Link Liên Kết Trong HTML

  • Tác giả: nguyenhung.net
  • Đánh giá: 3 ⭐ ( 6460 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ a trong HTML - Thẻ tạo link liên kết trong HTML. Bài viết sẽ hướng dẫn cho bạn chi tiết nhất về thẻ a trong HTML cũng như cách dùng nó khi làm web.

Đoạn code mở liên kết trong trang mới

  • Tác giả: nocodebuilding.com
  • Đánh giá: 5 ⭐ ( 6469 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn muốn khi người dùng click vào link liên kết, trình duyệt sẽ mở một trang mới, đồng thời vẫn giữ website của bạn. Điều này là cần thiết.

Liên kết trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 3 ⭐ ( 8186 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng liên kết trong HTML.

Liên kết HTML trong một cửa sổ mới

  • Tác giả: www.rapidtables.org
  • Đánh giá: 4 ⭐ ( 2522 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách mở liên kết trong cửa sổ mới hoặc tab mới.

[HTML/HTML5] Phần 14: Liên kết trong HTML

  • Tác giả: www.dammio.com
  • Đánh giá: 3 ⭐ ( 7785 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

By ads_php