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: 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  Phương thức Java String isEmpty () - chuỗi trống java

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:

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


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

How To Make A lInk Open In A New Tab

  • Tác giả: Computer And Internet Tips
  • Ngày đăng: 2014-02-27
  • Đánh giá: 4 ⭐ ( 4037 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: We previously showed you how to make a clickable link.In this video we show you how to make that link open in a new window or tab..
    How To Create A Link - http://internettipstv.blogspot.ie/2014/02/this-tutorial-shows-you-how-to-create.html

Làm thế nào để mở liên kết trong tab mới trên html?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 9821 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Đặt thuộc tính 'đích' của liên kết thành _blank: Link Chỉnh sửa:…

Liên kết trong HTML

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

Các liên kết trong HTML

  • Tác giả: timoday.edu.vn
  • Đánh giá: 4 ⭐ ( 8016 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Siêu liên kết cho phép người sử dụng điều hướng tới những nội dung khác.

Mẹo tự Động mở tab mới khi click vào link, Đoạn code mở liên kết trong trang mới

  • Tác giả: jdomain.vn
  • Đánh giá: 5 ⭐ ( 6969 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có bao giờ thắc mắc khi trình duyệt tự động mở liên kết trong tab mới khi bạn vừa nhấp chuột không?Ví dụ: Sau khi nhấp vào dòng chữ màu xanh về bài viết hướng dẫn toàn diện về SEO cho người mới bạn sẽ thấy nó mở trong tab mới, Vậy tại sao lại làm được điều này? Nó tự động hay sao?Không đâu!Đối với những liên kết trên kết quả Google có thể được coi là tự động, tuy nhiên trên Website do bạn quản lý thì bạn được quyền kiểm soát điều đó

One moment, please...

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

Thẻ tạo liên kết HTML

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