Hướng dẫn cài đặt thuộc tính tự động mở trang mới khi click vào liên kết

Bài viết này sẽ hướng dẫn chi tiết về cách thực hiện cả hai cách để phù hợp với nhu cầu của từng website.

Giới thiệu về tính năng tự động mở trang mới

Việc thiết lập các liên kết mở ở một trang mới là tính năng phổ biến và rất hữu ích trên các website ngày nay. Khi người dùng click vào một liên kết, nếu liên kết đó dẫn đến một trang khác ngoài trang hiện tại, tính năng tự động mở ở một tab mới sẽ giúp giữ nguyên trang gốc mà người dùng đang duyệt, tạo sự thuận tiện trong việc tham khảo và so sánh nội dung giữa các trang. Điều này đặc biệt có ý nghĩa với các website cung cấp tài liệu tham khảo hoặc các trang thương mại điện tử, nơi mà người dùng thường xuyên cần truy cập nhiều nguồn tài liệu hoặc sản phẩm khác nhau.

Việc mở trang mới giúp tăng trải nghiệm người dùng khi duyệt web, nhất là khi người dùng không muốn bị gián đoạn quá trình tìm kiếm thông tin trên trang hiện tại. Ngoài ra, tính năng này còn mang lại nhiều lợi ích cho SEO và thời gian truy cập trang (dwell time). Khi người dùng ở lại trên trang lâu hơn mà vẫn có thể mở thêm các trang mới, các công cụ tìm kiếm sẽ đánh giá website của bạn là hữu ích, từ đó có thể cải thiện xếp hạng của trang trên kết quả tìm kiếm.

Bên cạnh đó, việc sử dụng tính năng mở tab mới cũng giúp người quản trị website tạo ra một trải nghiệm người dùng mượt mà hơn, giảm thiểu tỷ lệ thoát trang. Tuy nhiên, để áp dụng tính năng này, bạn có thể thực hiện cài đặt thủ công bằng HTML hoặc tự động bằng JavaScript. Mỗi phương pháp đều có ưu và nhược điểm riêng, và bài viết này sẽ hướng dẫn chi tiết về cách thực hiện cả hai cách để phù hợp với nhu cầu của từng website.

Cài đặt thủ công qua HTML

Nếu bạn muốn chỉ định các liên kết cụ thể nào sẽ mở ở một tab mới, cách đơn giản nhất là thêm thuộc tính target=__blank_ vào thẻ <a> trong HTML. Thao tác này giúp bạn kiểm soát tốt hơn các liên kết nào sẽ mở ở trang mới, và dễ dàng quản lý hơn nếu số lượng liên kết không quá nhiều. Việc thêm thuộc tính target=__blank_ sẽ báo hiệu cho trình duyệt rằng khi người dùng nhấn vào liên kết, nó sẽ mở ra ở một tab mới thay vì thay thế trang hiện tại.

Ví dụ, nếu bạn có một liên kết như sau:

<a href=_https://example.com_>Trang ví dụ</a>

Để liên kết này mở ở một tab mới, bạn chỉ cần sửa lại thành:

<a href=_https://example.com_ target=__blank_>Trang ví dụ</a>

Khi đó, trình duyệt sẽ tự động hiểu rằng người dùng nhấp vào liên kết sẽ mở trang mới mà không thay thế trang hiện tại.

Phương pháp này rất hữu ích khi bạn chỉ muốn một vài liên kết mở ở trang mới, giúp giữ nguyên các liên kết khác không bị ảnh hưởng. Tuy nhiên, nếu bạn có rất nhiều liên kết trên trang và muốn tự động áp dụng cho tất cả, cách này có thể trở nên tốn thời gian. Trong trường hợp đó, bạn có thể sử dụng một đoạn mã JavaScript để cài đặt tự động.

Cài đặt tự động qua JavaScript

Trong một số trường hợp, bạn có thể muốn tất cả các liên kết ngoài website mở ở một tab mới. Để thực hiện điều này một cách nhanh chóng và đồng bộ, bạn có thể sử dụng JavaScript để tự động thêm thuộc tính target=__blank_ vào các thẻ <a> có liên kết ra ngoài trang. Việc này sẽ tiết kiệm thời gian và đảm bảo rằng bạn không bỏ sót bất kỳ liên kết nào.

Đoạn mã JavaScript dưới đây sẽ tìm tất cả các liên kết trên trang và tự động thêm target=__blank_ cho các liên kết ngoài:

document.querySelectorAll('a').forEach(link => {
    if (link.hostname !== window.location.hostname) {
        link.setAttribute('target', '_blank');
    }
});

Cách thức hoạt động của mã này là duyệt qua tất cả các thẻ <a> trên trang bằng querySelectorAll('a'). Sau đó, với mỗi liên kết, nó sẽ kiểm tra nếu hostname (tên miền) của liên kết khác với hostname của trang hiện tại (window.location.hostname). Nếu điều kiện này đúng, nghĩa là liên kết dẫn ra ngoài website, đoạn mã sẽ tự động thêm thuộc tính target=__blank_ cho liên kết đó.

Một cách khác là dùng jQuery để cài đặt tự động nếu trang của bạn đã tích hợp thư viện jQuery. Đoạn mã sau sẽ thực hiện tương tự bằng cách thêm thuộc tính target=__blank_ vào các liên kết ngoài:

$('a').each(function() {
    if (this.hostname !== window.location.hostname) {
        $(this).attr('target', '_blank');
    }
});

Sử dụng JavaScript để tự động áp dụng tính năng mở trang mới cho các liên kết ngoài không chỉ tiết kiệm thời gian mà còn đảm bảo sự đồng nhất và chính xác khi cập nhật website. Nếu trang của bạn có nhiều liên kết và bạn thường xuyên thêm các liên kết ngoài, phương pháp này sẽ rất hữu ích.

Lưu ý về bảo mật

Mặc dù target=__blank_ rất tiện lợi, nhưng nếu không cẩn thận, nó có thể tiềm ẩn rủi ro bảo mật. Khi một trang được mở bằng target=__blank_, trang mới sẽ có khả năng truy cập window.opener của trang gốc. Điều này có nghĩa là trang đích có thể thay đổi hoặc điều khiển trang gốc, tiềm ẩn nguy cơ tấn công kiểu “tab-napping”.

Để tránh tình trạng này, bạn có thể thêm thuộc tính rel=_noopener noreferrer_ vào thẻ <a>. Thuộc tính noopener ngăn trang đích truy cập window.opener của trang gốc, trong khi noreferrer sẽ ngăn việc gửi thông tin referrer đến trang đích. Thẻ <a> với các thuộc tính an toàn đầy đủ sẽ như sau:

<a href=_https://example.com_ target=__blank_ rel=_noopener noreferrer_>Trang ví dụ</a>

Khi sử dụng rel=_noopener noreferrer_, bạn có thể hoàn toàn yên tâm rằng trang đích sẽ không thể truy cập hoặc kiểm soát bất kỳ tài nguyên nào của trang gốc. Đặc biệt, trong các website có chứa thông tin nhạy cảm hoặc dữ liệu khách hàng, bạn nên áp dụng thuộc tính này để đảm bảo bảo mật.