External Link hay chúng ta thường gọi là liên kết ngoại, những đường link này không thuộc tên miền của bạn. Bài viết này mình sẽ hướng dẫn cho các bạn những thủ thuật để xử lý External Link thông qua jQuery.
(function($){
// Add default class to external links
(function(){
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).addClass('external');
})();
})(jQuery);
Trong ví dụ trên, chúng ta sử dụng hàm filter của jQuery để lọc các đường link ngoại.
(function($){
// Add default class to external links
(function(){
$.expr[':'].external = function(obj) {
return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname);
};
$('a:external').addClass('external');
})();
})(jQuery);
Tương tự như vậy, trong ví dụ này chúng ta cũng sẽ kiểm tra thông tin tên miền của đường dẫn so với tên miền bạn đang dùng.
(function($){
// Add default class to external links
(function(){
$('a:not([href^="http://ten-mien.com"]):not([href^="#"]):not([href^="/"])').addClass('external');
})();
})(jQuery);
Trong ví dụ này thì bạn sẽ sử dụng một tên miền cụ thể để so sánh với tên miền chứa trong đường dẫn.
(function($){
// Add default class to external links
(function(){
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if (!a.test(this.href)) {
a.addClass('external');
}
});
})();
})(jQuery);
Kể cả 4 ví dụ bên trên, chúng ta đều có thể kiểm tra được đâu là đường liên kết ngoại, đâu là đường dẫn trên trang của bạn, nếu trong trường hợp bạn sử dụng plugin WP External Links thì nó sẽ tự động làm việc này cho bạn.
Qua bài viết này, bạn có thể áp dụng để viết các chức năng như: khi người dùng nhấn chuột vào liên kết ngoại thì mở sang tab mới, hoặc khi người dùng nhấn vào liên kết ngoại thì mở trên trang của bạn thông qua iframe,… Chúc bạn thành công.
