[jQuery] Lấy đường dẫn URL và Title trang hiện tại

Trong bài viết trước, tôi đã hướng dẫn các bạn cách lấy đường dẫn url của trang hiện tại bằng PHP và hôm nay tôi sẽ dùng jQuery để thực hiện tương tự. Đối với nhiều lập trình viên thì jQuery khá hữu ích và tiện ích trong nhiều trường hợp nhưng trong trường hợp này chúng ta vẫn có thể dùng JavaScript. Bạn có thể dùng cách nào cũng được, miễn sao có được điều chúng ta cần :).

Sở dĩ chúng ta có thể dùng JavaScript vì nó hỗ trợ khá tốt trong việc lấy toàn bộ thông tin về đường dẫn (url) trang web hiện tại thông qua đối tượng window.location và tiêu đề trang qua window.document .

1, JavaScript

Giả sử tôi có đường dẫn http://[www.google.com]:80/search?q=devmo#test

Kiss Cat. Смотрите информацию granite slabs у нас.

Để hiểu hơn về đối tượng location, các bạn hãy xem bảng sau:

Thuộc tính	Mô tả	Kết quả
hash	Lấy chuỗi đường dẫn sau kí tự # (bao gồm luôn kí tự #)	#test
host	Lấy hostname và số cổng	[www.google.com]:80
hostname	Lấy host name	www.google.com
href	Lấy toàn bộ đường dẫn url	http://[www.google.com]:80/search?q=devmo#test
pathname	Lấy đường dẫn	/search
port	Lấy số cổng	80
protocol	Lấy giao thức của url (http:, https:, ftp:….)	http:
search	Lấy chuỗi đường dẫn sau kí tự ? (bao gồm luôn kí tự ?)	?q=devmo

Còn việc lấy tiêu đề (title) trang thì dùng thuộc tính title của đối tượng window.document. Các bạn có thể kiểm tra bằng cách tạo 1 file html và chèn đoạn code dưới đây

<script>
alert("URL : " + window.location.href); // Hiển thị đường dẫn url
alert("Title : " + window.document.title); // Hiển thị tiêu đề trang
</script>

2, jQuery

Với jQuery thì biến $(location) và $(document) có giá trị tương tự như window.location và window.document . Đoạn code xử lý như sau

$(document).ready(function () {
alert($(location).attr('href'));
alert($(document).attr('title'));
});

3, Demo

Tôi sẽ viết một trang html sử dụng jQuery để minh họa cho bài viết này

//Trong file HTML
URL trang hiện tại : <span id="this_url"></span>.
Title trang hiện tại : <span id="this_title"></span>.
// Trong file JavaScript
$(document).ready(function () {
var url = $(location).attr('href');
var title = $(document).attr('title');
$('#this_title').html('<strong>' + title + '</strong>');
$('#this_url').html('<strong>' + url + '</strong>');
});

4, Tổng kết

Tôi sử dụng jQuery trong hầu hết các dự án của mình, tuy nhiên đối với những trường hợp thế này dùng JavaScript cũng khá tốt, nhất là không cần phải load thư viện jQuery. Mỗi ngôn ngữ đều có thế mạnh riêng, khi đọc bài viết lấy đường dẫn url của trang hiện tại bằng PHP bạn sẽ thấy dùng PHP phức tạp hơn khi mà với JavaScript hay jQuery chỉ cần 2 câu lệnh.