[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

Để 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)$(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.

Tấn Việt

Tôi lập trang web này để thỏa mãn sở thích viết cái gì đó vui vui khi rãnh rỗi và đồng thời cũng chia sẻ những gì tôi biết hoặc đọc đâu đó trên mạng về Lập trình web. Tôi hi vọng những bài viết này sẽ giúp ích cho các bạn. Thân ái!

You may also like…

6 Responses

  1. Thành says:

    bài viết rất hay,thanks

  2. JimmyLin says:

    hay… những ng` trẻ thương có những bài viết thiết thực…
    mình sẽ đọc từ từ các bài viết ở đây
    Tks

  3. Quốc Cường says:

    Chào các bạn, mình có 1 vấn đề nhưng không biết giải quyết thế nào. ví dụ mình có 1 trang tìm kiếm, khi click tìm thì nó ra kết quả mà trong các thông tin show ra phần name mình bỏ trong tag a href. mình muốn khi click vào name thì nó show ra cái hình tương ứng với id mà mình lấy trong database ra và truyền vào thẻ a href.
    Nhưng nó chạy jquery mà không chạy được url nên không thể nào lấy được id.
    Các bạn nào pro js chỉ mình với, xin cảm ơn các bạn

  4. Quốc Cường says:

    cụ thể:
    $arr[title]

    còn phần này lấy ra các image trong database (nghĩa là khi click vào đường link trên thì sẽ lấy giá trị của phần này ):
    <?php
    $id = $_GET['cid'];
    $sql = "SELECT * FROM product WHERE id = '$id' ";
    $query = mysql_query($sql);
    while($array = mysql_fetch_assoc($query)){
    echo "

  5. Huy Tưởng says:

    Thanks ad

  6. nicksin says:

    bài viết rất hay, cảm ơn web