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ở trên một tab mới html

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  JavaScript Lấy phần tử theo id, tên, lớp, giá trị thẻ - lấy id phần tử js

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ở trên một tab mới html

how to open link in new tab in html - Codingwithsonu || HTML Tutorial

  • Tác giả: Coding With Sonu
  • Ngày đăng: 2018-10-02
  • Đánh giá: 4 ⭐ ( 9785 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: how to open link in new tab in html - Codingwithsonu || HTML Tutorial
    HtmlTutorial
    HTML5
    HtmlCoding

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

  • Tác giả: www.javascriptbank.com
  • Đánh giá: 5 ⭐ ( 3477 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

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

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 7656 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:…

Tổng hợp một số cách mở 1 link trong tab mới với Selenium Webdriver

  • Tác giả: topdev.vn
  • Đánh giá: 4 ⭐ ( 9257 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này chúng ta sẽ cùng nhau xem lại một vài cách để thực hiện mở 1 link trong tab mới, trong tiếng anh là “Open a link in new tab”

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

  • Tác giả: www.rapidtables.org
  • Đánh giá: 5 ⭐ ( 4098 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.

Hướng Dẫn Xây Dựng Tabs Với HTML, CSS và Javascript

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

Cách mở một tab mới cho một trang web cụ thể trong trình duyệt của bạn / làm thế nào để

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 4 ⭐ ( 3755 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hầu hết các trình duyệt có một trang mặc định hiển thị khi bạn mở một tab mới. Nếu bạn không muốn trình duyệt của mình quyết định trang web nào bạn nhìn thấy khi mở tab mới, bạn có thể thay đổi trang web đó thành trang web tùy chỉnh do bạn chọn.

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