[HTML] Validate “target” attribute in XHTML Strict
Bình thường mình muốn open new window khi click trên 1 link nào đó, cách đơn giản nhất mình hay dùng từ lúc biết HTML đến giờ là dùng tag “target=_blank”, thật dễ dàng.
<a href="index.html" target="_blank">index</a>
Vấn đề là tag “target” không còn được hỗ trợ nữa trong XHTML1.0 Strict & XHTML1.1, xem trả lời tại đây.
Để validate HTML trong trường hợp này cần dùng Javascript hỗ trợ, có vài cách như sau:
1. Script trực tiếp trong code HTML
Cách này đơn giản dễ dùng, nhưng phải chèn code cho mỗi tag “a”
<a href="index.html" onclick="return ! window.open(this.href);">index</a>
2. Dùng JS Framework với jQuery
Cách này cần phải thêm rel=”blank” thay cho target=”_blank”, việc còn lại script sẽ xử lý
$(document).ready(function(){
$('a').each(function(){
if ($(this).attr('rel') == "blank"){
$(this).click(function(){
window.open($(this).attr('href'));
});
}
});
});
3. Không dùng Framework
Cách này cũng cần phải thêm rel=”blank” thay cho target=”_blank”, script sẽ auto run khi được include
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&anchor.getAttribute("rel") == "blank")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
Và cuối cùng, save as và include file
Bài viết liên quan:
- New-Window Links in a Standards-Compliant World
- Validate target attribute XHTML Strict or HTML 4.0 Strict
Hi! My full name is Nguyen Hoang Hien, and Hagin is my nickname.
Hi ban,
Minh co thac mac. Tai sao o cach 2 va 3 minh phai them thuoc tinh rel=”blank” vay ban?
Việc dùng DOCTYPE Strict (hoặc XHTML1.1) sẽ báo lỗi tại thuộc tính “target”, do đó mục đích của việc dùng javascipt là tránh việc dùng target trong code HTML mà vẫn đạt được hiệu quả mong muốn.
Trong cả 2 cách, việc dùng thuộc tính “rel” là một cách để đánh dấu thẻ “a” muốn open new window (external link) với các thẻ “a” thường (internal link), qua đó ta sẽ chọn (select) được các thẻ “a” cần xử lý, không nhất thiết phải là rel=”blank” mà bạn có thể cho “rel” bằng bất cứ giá trị nào, và xử lý điều kiện trong script theo giá trị đó:
if ($(this).attr(’rel’) == “blank”) -> if ($(this).attr(’rel’) == “gia_tri_cua_rel”) - cách 2anchor.getAttribute(”rel”) == “blank” -> anchor.getAttribute(”rel”) == “gia_tri_cua_rel” -cách 3Cả 2 cách đều tự động chọn tất cả thẻ “a” được đánh dấu, xử lý sự kiện khi click lên link sẽ open new window (cách 2), hoặc thêm thuộc tính “target=_blank” (cách 3), do “target=blank” được thêm vào cho các thẻ “a” được đánh dấu sau khi html được load xong, do vậy source code HTML vẫn validate với chuẩn XHTML Strict của W3C.
Cho mình hỏi một chút.
Với trường hợp ko dùng Framework.
Khi thêm đoạn js vào source code rồi test với ví dụ sau:
Test link
thì khi rê chuột vô “Test link” sẽ thấy có dạng là http://www.yourdomain.com/www.google.com
và click vào thì ko mở đc trang mới.
Mình đang dùng blog thuộc hệ thống BlogSpot của Google!
Thân!
Sửa lại cái trên 1 chút. Quên mất nó tự chuyển code
<a href="www.google.com" rel="blank">Test link</a>
Cho mình hỏi 1 vấn đề ạ!
Cái ko dùng framework. Đã chèn vào source chính và khi mình làm như sau:
<a href="www.googl.com" rel="blank">Test link</a>
thì nó lại ra dạng http://www.yourdomain.com/www.google.com
Mình đang dùng Blogspot. Thân!
@Nhok:
Mình không rõ blog bạn có chỉnh gì khác không, vì khi mình test thì link không bi replace như bạn nói, và điều quan trọng là mình chưa biết cách nào để chèn đoạn javascript trên vào source code của Blogspot, do chưa từng dùng blog đó bao giờ.
Có thời gian mình sẽ test lại xem, nhưng cách tốt nhất mình nghỉ bạn nên bỏ qua bài viết này, vì valid cho blog đó gần như không cần thiết, vì nó đã có sẵn khá nhiều warning về validation XHTML/CSS, hãy dùng cách cơ bản của HTML là chèn thêm target=”_blank” vào trong thẻ a, vậy sẽ hiệu quả hơn.