Hiển thị document.URL của trang web bằng JavaScript

JavaScript Examples | 12/06/2025 by Học Javascript

Khi phát triển web, việc truy xuất địa chỉ (URL) hiện tại của trang web là một nhu cầu rất phổ biến. URL không chỉ định danh tài nguyên trên Internet mà còn thường được dùng để điều hướng, thay đổi nội dung, hoặc thu thập dữ liệu người dùng. JavaScript cung cấp nhiều công cụ hỗ trợ làm việc với URL, trong đó document.URL là một cách đơn giản và trực tiếp để lấy ra đường dẫn hiện tại của trang.

Trong bài này, mình sẽ tìm hiểu cách sử dụng document.URL để hiển thị và thao tác với URL trong các ứng dụng web.

Giới thiệu `document.URL` bằng JavaScript

Khái niệm document.URL: document.URL là một thuộc tính trong JavaScript được sử dụng để lấy chuỗi URL đầy đủ của tài liệu hiện tại trong trình duyệt. Khi truy cập vào document.URL, trình duyệt trả về địa chỉ URL của trang web mà người dùng đang xem. Thuộc tính này rất hữu ích trong các tình huống mà bạn cần kiểm tra hoặc thao tác với đường dẫn trang web mà không cần phải sử dụng các công cụ khác.

Cú pháp cơ bản:

console.log(document.URL);

Kết quả trả về là một chuỗi string chứa địa chỉ đầy đủ của trang web hiện tại, ví dụ:

https://www.example.com/page1?search=JavaScript#section1

So sánh với các thuộc tính tương tự: Mặc dù document.URL là một công cụ hữu ích để truy xuất URL, nhưng trong JavaScript còn một số thuộc tính khác có thể cung cấp thông tin tương tự về URL của trang. Dưới đây là một số so sánh giữa document.URL và các thuộc tính khác:

location.href:

Khác biệt: location.href cũng trả về chuỗi URL đầy đủ giống như document.URL. Tuy nhiên, điểm khác biệt là location.href có thể được sử dụng để thay đổi URL của trang web và điều hướng tới một trang khác. Ví dụ:

location.href = "https://www.example.com";

Điều này sẽ làm trình duyệt chuyển hướng đến trang mới.

Ví dụ sử dụng:

console.log(location.href);  // Trả về URL đầy đủ

document.location:

Khác biệt: document.location là một đối tượng tương tự như location nhưng thường ít được sử dụng trong thực tế. document.location có thể dùng để truy xuất các phần của URL như protocol, hostname, pathname, v.v.

console.log(document.location.href);  // Trả về URL đầy đủ

window.location:

Khác biệt: window.location là đối tượng toàn cầu, cung cấp thông tin về URL của trang hiện tại. window.location có thể thay đổi URL, điều hướng đến trang mới và cung cấp các phương thức như assign() hoặc replace() để thay đổi URL mà không tạo thêm lịch sử duyệt web.

Ví dụ sử dụng:

console.log(window.location.href);  // Trả về URL đầy đủ

Tóm lại:

document.URL chủ yếu được dùng để lấy URL đầy đủ của tài liệu hiện tại mà không có khả năng thay đổi.
Các thuộc tính như location.href, window.location hoặc document.location không chỉ giúp lấy URL mà còn hỗ trợ các thao tác thay đổi URL, điều hướng hoặc truy xuất các phần của URL.

Ưu điểm khi sử dụng document.URL:

Đơn giản và trực tiếp.
Dễ dàng để kiểm tra và sử dụng trong các ứng dụng web mà không cần thao tác với đối tượng window.location hay document.location.

Vậy là chúng ta đã hiểu rõ hơn về document.URL và sự khác biệt của nó với các thuộc tính tương tự.

Cách lấy URL hiện tại bằng JavaScript

Để lấy URL hiện tại của trang web trong JavaScript, bạn có thể sử dụng thuộc tính document.URL. Đây là một cú pháp rất đơn giản và dễ hiểu. Khi gọi document.URL, trình duyệt sẽ trả về chuỗi URL đầy đủ của trang web đang được hiển thị.

Cú pháp cơ bản:

console.log(document.URL);

Đoạn mã trên sẽ in ra URL đầy đủ của trang web hiện tại vào bảng điều khiển (console). Ví dụ nếu trang web có URL https://www.example.com/products?id=123#section, kết quả trong console sẽ là:

https://www.example.com/products?id=123#section

Ví dụ 1: Hiển thị URL trong console

Đoạn mã JavaScript dưới đây sẽ lấy URL hiện tại của trang và in nó ra console khi trang web được tải:

console.log(document.URL);

Kết quả trong console:

https://www.example.com/page1?search=JavaScript#section1

Ví dụ 2: Hiển thị URL trên giao diện người dùng (HTML)

Để hiển thị URL hiện tại trực tiếp trên giao diện người dùng, bạn có thể sử dụng document.URL và cập nhật nó vào một phần tử HTML. Dưới đây là một ví dụ cơ bản sử dụng JavaScript để hiển thị URL trong một thẻ HTML.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Current URL</title>
</head>
<body>
    <h1>URL hiện tại của trang:</h1>
    <p id="current-url"></p>

    <script>
        // Lấy URL hiện tại và hiển thị trong thẻ p
        document.getElementById('current-url').textContent = document.URL;
    </script>
</body>
</html>

Giải thích:

Đoạn mã trên sẽ lấy URL của trang web hiện tại bằng document.URL và gán nó vào phần tử có id="current-url".
Kết quả là người dùng sẽ thấy URL của trang web được hiển thị trực tiếp trên giao diện người dùng dưới thẻ <p>.

Kết quả trên giao diện người dùng:

URL hiện tại của trang:
https://www.example.com/page1?search=JavaScript#section1

Việc lấy và hiển thị URL hiện tại có thể rất hữu ích trong các tình huống sau:

Hiển thị địa chỉ URL trong các ứng dụng web để người dùng dễ dàng sao chép và chia sẻ.
Phân tích dữ liệu trang web, ví dụ như trong các ứng dụng theo dõi hoặc các hệ thống phân tích.
Điều hướng động trong các trang có nhiều nội dung động (ví dụ, trang sản phẩm hoặc blog).

Ứng dụng thực tế `document.URL` bằng JavaScript

Trong JavaScript, việc sử dụng document.URL để truy xuất và thao tác với URL hiện tại của trang có thể được áp dụng trong nhiều tình huống thực tế trong phát triển ứng dụng web. Dưới đây là một số ứng dụng phổ biến mà bạn có thể sử dụng document.URL để kiểm tra, thay đổi nội dung hoặc thực hiện các thao tác tùy thuộc vào URL.

Kiểm tra URL để thay đổi nội dung trang

Một trong những ứng dụng phổ biến của việc lấy URL hiện tại là thay đổi nội dung của trang web dựa trên các tham số trong URL. Ví dụ, bạn có thể thay đổi nội dung hiển thị cho người dùng tùy thuộc vào URL của họ, hoặc điều chỉnh bố cục của trang để phản ánh các tham số URL.

Ví dụ: Thay đổi nội dung trang dựa trên tham số trong URL

Giả sử bạn có một trang web bán sản phẩm và muốn thay đổi nội dung hiển thị tùy theo loại sản phẩm được yêu cầu trong URL. Ví dụ, nếu URL có tham số product=shoes, trang sẽ hiển thị sản phẩm giày.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thay đổi nội dung trang</title>
</head>
<body>
    <h1>Chào mừng bạn đến cửa hàng</h1>
    <div id="product-details"></div>

    <script>
        // Lấy URL và tham số 'product' từ URL
        const urlParams = new URLSearchParams(window.location.search);
        const product = urlParams.get('product');

        // Thay đổi nội dung dựa trên giá trị của tham số 'product'
        const productDetails = document.getElementById('product-details');
        if (product === 'shoes') {
            productDetails.innerHTML = '<h2>Sản phẩm: Giày</h2><p>Chúng tôi cung cấp nhiều loại giày thể thao chất lượng cao.</p>';
        } else if (product === 'bags') {
            productDetails.innerHTML = '<h2>Sản phẩm: Túi xách</h2><p>Khám phá bộ sưu tập túi xách mới nhất của chúng tôi.</p>';
        } else {
            productDetails.innerHTML = '<h2>Sản phẩm không xác định</h2><p>Vui lòng chọn sản phẩm từ menu.</p>';
        }
    </script>
</body>
</html>

Giải thích:

Sử dụng window.location.search để lấy phần query string của URL và URLSearchParams để truy xuất các tham số trong URL.
Thay đổi nội dung trang dựa trên tham số product. Nếu tham số này là "shoes", sẽ hiển thị thông tin sản phẩm giày; nếu là "bags", sẽ hiển thị thông tin túi xách.

Ứng dụng thực tế: Điều này rất hữu ích khi bạn có các trang sản phẩm khác nhau, và nội dung trang cần được thay đổi động dựa trên URL người dùng nhập vào.

Điều hướng hoặc thực hiện các thao tác tùy thuộc vào URL

Thông qua việc kiểm tra URL, bạn có thể điều hướng trang web hoặc thực hiện các thao tác dựa trên các điều kiện URL cụ thể. Chẳng hạn, nếu URL chứa một tham số nhất định, bạn có thể tự động chuyển hướng người dùng đến một trang khác, hoặc chạy một số mã JavaScript tùy chỉnh.

Ví dụ: Chuyển hướng người dùng dựa trên tham số URL

if (window.location.href.includes("redirect=true")) {
    // Chuyển hướng người dùng đến trang khác nếu tham số 'redirect' là true
    window.location.href = "https://www.example.com/special-offer";
}

Giải thích:

Ở đây, chúng ta kiểm tra URL để xem nếu nó chứa tham số redirect=true. Nếu có, người dùng sẽ được chuyển hướng đến một trang khác.

Ứng dụng thực tế: Điều này có thể được sử dụng trong các tình huống như:

Chuyển hướng người dùng đến trang đăng nhập nếu họ chưa đăng nhập và URL chứa tham số redirect.
Cập nhật giao diện hoặc chức năng của trang dựa trên các tham số trong URL (ví dụ: các URL đặc biệt cho các chương trình khuyến mãi).

Lưu log URL truy cập cho phân tích

Việc lưu lại URL truy cập có thể giúp bạn theo dõi người dùng và phân tích hành vi của họ trên trang web. Ví dụ, bạn có thể ghi lại URL của các trang người dùng truy cập và gửi thông tin này đến một hệ thống phân tích hoặc cơ sở dữ liệu để phân tích sau này.

Ví dụ: Ghi log URL vào hệ thống phân tích

const currentURL = document.URL;

// Gửi URL đến API hoặc ghi log vào cơ sở dữ liệu
fetch('https://your-analytics-api.com/log', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({ url: currentURL, timestamp: new Date().toISOString() })
})
.then(response => response.json())
.then(data => console.log('Log đã được gửi:', data))
.catch(error => console.error('Lỗi khi ghi log:', error));

Giải thích:

Đoạn mã trên lấy URL hiện tại của trang và gửi nó đến một API phân tích dưới dạng một yêu cầu POST. Bạn có thể sử dụng điều này để lưu trữ các URL mà người dùng truy cập vào cơ sở dữ liệu hoặc hệ thống phân tích.

Ứng dụng thực tế: Đây là một phương pháp phổ biến để thu thập dữ liệu phân tích, như:

Theo dõi các trang sản phẩm phổ biến.
Phân tích thói quen truy cập trang của người dùng và tối ưu hóa trang web dựa trên dữ liệu thu được.

Một số lưu ý khi sử dụng bằng JavaScript

Khi làm việc với document.URL, có một số lưu ý quan trọng mà bạn cần nhớ để tránh gặp phải vấn đề hoặc sử dụng sai cách. Dưới đây là những lưu ý chính khi làm việc với document.URL:

`document.URL` là chỉ đọc

document.URL chỉ có thể được sử dụng để lấy URL hiện tại của trang, và bạn không thể thay đổi giá trị của nó trực tiếp. Điều này có nghĩa là bạn không thể thay đổi URL bằng cách gán một giá trị mới cho document.URL. Cố gắng làm như vậy sẽ không có tác dụng và sẽ gây lỗi trong mã của bạn.

Ví dụ sai:

document.URL = "https://www.new-url.com"; // Lỗi, không thể thay đổi document.URL

Để thay đổi URL, sử dụng `location.href` hoặc `history.pushState()`

Nếu bạn muốn thay đổi URL của trang hoặc điều hướng người dùng đến một trang khác, bạn cần sử dụng các phương thức khác, chẳng hạn như location.href để thay đổi URL của trang hoặc history.pushState() để thay đổi URL mà không tải lại trang (thường được sử dụng trong các ứng dụng SPA).

Ví dụ thay đổi URL bằng `location.href`:

location.href = "https://www.new-url.com"; // Chuyển hướng người dùng đến URL mới

Ví dụ thay đổi URL bằng history.pushState():

history.pushState({}, "", "/new-url"); // Thay đổi URL mà không làm mới trang

`document.URL` không bao gồm các thuộc tính như hash (`#`) hoặc query string nếu chúng thay đổi sau khi tải trang

Khi bạn thay đổi URL của trang (ví dụ, thêm hoặc thay đổi phần hash #), document.URL có thể không phản ánh ngay lập tức những thay đổi này trong một số trường hợp. Để xử lý tình huống này, bạn nên sử dụng window.location.href hoặc window.location.hash.

Ví dụ thực hành `document.URL` bằng JavaScript

Dưới đây là hai ví dụ thực hành để minh họa cách sử dụng document.URL trong JavaScript:

Ví dụ 1: Hiển thị URL trong thẻ <p> trên trang web

Giả sử bạn muốn hiển thị URL hiện tại của trang web trong một phần tử <p> trên trang web để người dùng có thể thấy được URL mà họ đang truy cập.'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hiển thị URL</title>
</head>
<body>
    <h1>Trang web của tôi</h1>
    <p id="current-url">URL hiện tại của bạn là: </p>

    <script>
        // Lấy URL hiện tại và hiển thị trong thẻ <p>
        document.getElementById("current-url").innerText = "URL hiện tại của bạn là: " + document.URL;
    </script>
</body>
</html>

Giải thích:

Đoạn mã trên sẽ lấy giá trị của document.URL và hiển thị nó trong phần tử <p> với id current-url.
Mỗi khi người dùng tải trang, URL sẽ được hiển thị ngay lập tức.

Ví dụ 2: Kiểm tra URL và thay đổi tiêu đề trang tùy thuộc vào từng đường dẫn

Giả sử bạn muốn thay đổi tiêu đề trang dựa trên URL của trang. Ví dụ, nếu người dùng truy cập vào một trang cụ thể trong ứng dụng của bạn, bạn muốn cập nhật tiêu đề trang tương ứng.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thay đổi Tiêu đề Trang</title>
</head>
<body>
    <h1>Chào mừng đến trang web của chúng tôi!</h1>

    <script>
        // Kiểm tra URL hiện tại và thay đổi tiêu đề trang
        if (document.URL.includes("home")) {
            document.title = "Trang chủ";
        } else if (document.URL.includes("about")) {
            document.title = "Giới thiệu";
        } else if (document.URL.includes("contact")) {
            document.title = "Liên hệ";
        } else {
            document.title = "Trang không xác định";
        }
    </script>
</body>
</html>

Giải thích:

Đoạn mã này kiểm tra phần URL của trang bằng document.URL để xác định trang người dùng đang truy cập.
Dựa trên URL, tiêu đề của trang sẽ thay đổi. Nếu URL chứa từ "home", tiêu đề sẽ là "Trang chủ", nếu chứa "about", tiêu đề sẽ là "Giới thiệu", và nếu chứa "contact", tiêu đề sẽ là "Liên hệ".
Điều này giúp người dùng nhận biết rõ họ đang ở đâu trong ứng dụng web của bạn thông qua việc thay đổi tiêu đề trang.

Kết bài

Truy xuất và hiển thị URL hiện tại của trang web bằng JavaScript là một kỹ thuật cơ bản nhưng rất hữu ích trong phát triển web. Với thuộc tính document.URL, bạn có thể dễ dàng lấy được URL của trang web và thực hiện các thao tác như hiển thị thông tin URL cho người dùng, thay đổi tiêu đề trang, hoặc thực hiện các điều hướng và phân tích dựa trên URL.

Tuy nhiên, cũng cần lưu ý rằng document.URL chỉ là thuộc tính chỉ đọc và không thể thay đổi trực tiếp URL của trang. Nếu cần thay đổi URL, các phương thức như location.href hoặc history.pushState() sẽ là sự lựa chọn thay thế hiệu quả. Với sự kết hợp của các phương thức và kỹ thuật JavaScript này, bạn có thể xây dựng các ứng dụng web linh hoạt và dễ dàng quản lý hành vi trang web dựa trên các URL động.

Hiểu và sử dụng thành thạo document.URL cùng các phương thức liên quan sẽ giúp bạn tối ưu hóa trải nghiệm người dùng và cải thiện khả năng điều hướng trong các ứng dụng web phức tạp.

Hiển thị document.URL của trang web bằng JavaScript

Giới thiệu `document.URL` bằng JavaScript

Cách lấy URL hiện tại bằng JavaScript

Ví dụ 1: Hiển thị URL trong console

Ví dụ 2: Hiển thị URL trên giao diện người dùng (HTML)

HTML:

Ứng dụng thực tế `document.URL` bằng JavaScript

Kiểm tra URL để thay đổi nội dung trang

Ví dụ: Thay đổi nội dung trang dựa trên tham số trong URL

Điều hướng hoặc thực hiện các thao tác tùy thuộc vào URL

Ví dụ: Chuyển hướng người dùng dựa trên tham số URL

Lưu log URL truy cập cho phân tích

Ví dụ: Ghi log URL vào hệ thống phân tích

Một số lưu ý khi sử dụng bằng JavaScript

`document.URL` là chỉ đọc

Ví dụ sai:

Để thay đổi URL, sử dụng `location.href` hoặc `history.pushState()`

Ví dụ thay đổi URL bằng `location.href`:

`document.URL` không bao gồm các thuộc tính như hash (`#`) hoặc query string nếu chúng thay đổi sau khi tải trang

Ví dụ thực hành `document.URL` bằng JavaScript

Ví dụ 1: Hiển thị URL trong thẻ <p> trên trang web

Ví dụ 2: Kiểm tra URL và thay đổi tiêu đề trang tùy thuộc vào từng đường dẫn

Kết bài

Bài viết liên quan

Hiển thị ngày và giờ hiện tại trong thẻ H1 bằng JavaScript DOM

Đếm số ký tự trong tiêu đề trang web bằng JavaScript

Thay đổi màu nền trang web bằng JavaScript

Truy xuất document.title trang web với JavaScript

Hiển thị document.URL của trang web bằng JavaScript

Giới thiệu document.URL bằng JavaScript

Cách lấy URL hiện tại bằng JavaScript

Ví dụ 1: Hiển thị URL trong console

Ví dụ 2: Hiển thị URL trên giao diện người dùng (HTML)

HTML:

Ứng dụng thực tế document.URL bằng JavaScript

Kiểm tra URL để thay đổi nội dung trang

Ví dụ: Thay đổi nội dung trang dựa trên tham số trong URL

Điều hướng hoặc thực hiện các thao tác tùy thuộc vào URL

Ví dụ: Chuyển hướng người dùng dựa trên tham số URL

Lưu log URL truy cập cho phân tích

Ví dụ: Ghi log URL vào hệ thống phân tích

Một số lưu ý khi sử dụng bằng JavaScript

document.URL là chỉ đọc

Ví dụ sai:

Để thay đổi URL, sử dụng location.href hoặc history.pushState()

Ví dụ thay đổi URL bằng location.href:

document.URL không bao gồm các thuộc tính như hash (#) hoặc query string nếu chúng thay đổi sau khi tải trang

Ví dụ thực hành document.URL bằng JavaScript

Ví dụ 1: Hiển thị URL trong thẻ <p> trên trang web

Ví dụ 2: Kiểm tra URL và thay đổi tiêu đề trang tùy thuộc vào từng đường dẫn

Kết bài

Bài viết liên quan

Hiển thị ngày và giờ hiện tại trong thẻ H1 bằng JavaScript DOM

Đếm số ký tự trong tiêu đề trang web bằng JavaScript

Thay đổi màu nền trang web bằng JavaScript

Truy xuất document.title trang web với JavaScript

Giới thiệu `document.URL` bằng JavaScript

Ứng dụng thực tế `document.URL` bằng JavaScript

`document.URL` là chỉ đọc

Để thay đổi URL, sử dụng `location.href` hoặc `history.pushState()`

Ví dụ thay đổi URL bằng `location.href`:

`document.URL` không bao gồm các thuộc tính như hash (`#`) hoặc query string nếu chúng thay đổi sau khi tải trang

Ví dụ thực hành `document.URL` bằng JavaScript