Thuộc tính target của HTML <a>
Định nghĩa và cách sử dụng
target
Thuộc tính xác định vị trí mở tài liệu liên kết.
Mô hình
Thuộc tính target xác định vị trí mở tài liệu liên kết:
<a href="https://www.codew3c.com" target="_blank">Thăm CodeW3C.com</a>
Cú pháp
<a target="_blank|_self|_parent|_top|framename">
target
Công dụng của thuộc tính này là để thông báo cho trình duyệt nơi mà bạn muốn hiển thị tài nguyên được liên kết. Mặc định, trình duyệt sử dụng cửa sổ, thẻ hoặc khung (iframe) hiển thị tài liệu hiện tại, vì vậy tài liệu mới sẽ thay thế tài liệu đang hiển thị, nhưng còn có các lựa chọn khác, xem bảng dưới đây:
Giá trị thuộc tính
Giá trị | Mô tả |
---|---|
_blank | Mở tài liệu liên kết trong cửa sổ hoặc thẻ mới. |
_self | Mở tài liệu liên kết trong khung cùng với việc nhấp chuột (mặc định). |
_parent | Mở tài liệu liên kết trong khung cha. |
_top | Mở tài liệu liên kết trong toàn bộ phần thân của cửa sổ. |
framename | Mở tài liệu liên kết trong iframe được chỉ định. |
Mô tả chi tiết
Nếu trong thẻ <a> chứa thuộc tính target, trình duyệt sẽ tải và hiển thị tài liệu được đặt tên bằng thuộc tính href của thẻ này, hoặc khung hoặc cửa sổ có tên phù hợp với mục tiêu này. Nếu khung hoặc cửa sổ có tên hoặc id được chỉ định không tồn tại, trình duyệt sẽ mở một cửa sổ mới, gán cho cửa sổ này một dấu hiệu được chỉ định, và sau đó tải tài liệu mới vào cửa sổ đó. Từ đó, tài liệu liên kết siêu链接 có thể chỉ đến cửa sổ mới này.
Mở cửa sổ mới
Liên kết được chỉ định tạo cho việc tạo công cụ duyệt web hiệu quả trở nên dễ dàng. Ví dụ, danh sách tài liệu nội dung đơn giản có thể chuyển hướng đến cửa sổ riêng biệt:
<h3>Danh sách mục lục</h3> <ul> <li><a href="pref.html" target="view_window">Mở đầu</a></li> <li><a href="chap1.html" target="view_window">Chapter 1</a></li> <li><a href="chap2.html" target="view_window">Chapter 2</a></li> <li><a href="chap3.html" target="view_window">Chapter 3</a></li> </ul>
Khi người dùng lần đầu tiên chọn một liên kết trong danh sách nội dung, trình duyệt sẽ mở một cửa sổ mới, đánh dấu nó là "view_window", và trong đó hiển thị nội dung tài liệu mong muốn. Nếu người dùng chọn một liên kết khác từ danh sách nội dung này và "view_window" vẫn mở, trình duyệt sẽ lại tải tài liệu đã chọn vào cửa sổ đó, thay thế cho tài liệu trước đó.
Trong suốt quá trình, cửa sổ chứa danh sách nội dung này là nơi người dùng có thể truy cập. Bằng cách nhấp vào một liên kết trong cửa sổ, nội dung của cửa sổ khác sẽ thay đổi.
Mở cửa sổ trong khung
Không cần mở một cửa sổ trình duyệt hoàn chỉnh, phương pháp thông thường để sử dụng target là trong một khung <frameset> định hướng nội dung liên kết đến một hoặc nhiều khung. Bạn có thể đặt danh sách nội dung này vào một khung của tài liệu có hai khung, và sử dụng khung cạnh bên để hiển thị tài liệu đã chọn:
<frameset cols="100,*"> <frame src="toc.html"> <frame src="pref.html" name="view_frame"> </frameset>
Khi trình duyệt ban đầu hiển thị hai khung này, khung bên trái chứa danh mục, khung bên phải chứa mở đầu.
Đây là mã nguồn của "toc.html":
<h3>Danh sách mục lục</h3> <ul> <li><a href="pref.html" target="view_frame">Mở đầu</a></li> <li><a href="chap1.html" target="view_frame">Chapter 1</a></li> <li><a href="chap2.html" target="view_frame">Chapter 2</a></li> <li><a href="chap3.html" target="view_frame">Chapter 3</a></li> </ul>
Lưu ý rằng trong tài liệu "toc.html", mục tiêu của mỗi liên kết là "view_frame", cũng chính là khung bên phải.
Khi người dùng chọn một liên kết từ thư mục ở khung bên trái, trình duyệt sẽ tải và hiển thị tài liệu liên quan này trong khung "view_frame" bên phải. Khi một liên kết khác được chọn, nội dung trong khung bên phải này cũng sẽ thay đổi, trong khi khung bên trái始终保持 không đổi.
Mục tiêu đặc biệt
Có 4 tên mục tiêu được bảo lưu để sử dụng cho các thao tác chuyển hướng tài liệu đặc biệt:
_blank
Trình duyệt luôn tải tài liệu mục tiêu vào cửa sổ mới mở, không có tên.
_self
Giá trị của mục tiêu này là mặc định cho tất cả các nhãn <a> không có mục tiêu, nó làm cho tài liệu mục tiêu tải vào và hiển thị trong cùng khung hoặc cửa sổ như tài liệu nguồn. Mục tiêu này là dư thừa và không cần thiết, trừ khi sử dụng cùng với thuộc tính target của nhãn <base> trong tiêu đề tài liệu.
_parent
Mục tiêu này làm cho tài liệu tải vào cửa sổ cha hoặc khung chứa liên kết được trỏ đến. Nếu liên kết này ở cửa sổ hoặc trong khung cấp cao nhất, thì nó tương đương với mục tiêu _self.
_top
Mục tiêu này làm cho tài liệu tải vào cửa sổ chứa liên kết này, việc sử dụng mục tiêu _top sẽ xóa tất cả các khung được bao gồm và tải tài liệu vào toàn bộ cửa sổ trình duyệt.
Lưu ý:Tất cả 4 giá trị của target này đều bắt đầu bằng dấu gạch dưới. Bất kỳ cửa sổ hoặc mục tiêu nào khác bắt đầu bằng dấu gạch dưới sẽ bị trình duyệt bỏ qua, vì vậy, đừng sử dụng dấu gạch dưới làm ký tự đầu tiên của bất kỳ tên hoặc id nào được định nghĩa trong tài liệu.
Hỗ trợ trình duyệt
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ |