Lấy URL của trang web hiện tại bằng JavaScript (location.href) | Laptrinhcanban.com

Lấy URL của trang web hiện tại bằng JavaScript (location.href)

Hướng dẫn cách lấy URL của trang web hiện tại bằng JavaScript. Bạn sẽ biết cách sử dụng các thuộc tính của Window location, trong đó có location.href để lấy các thông tin về URL của trang web hiện tại, ví dụ như tham số đường dẫn trang web, hoặc tên máy chủ của nó bằng JavaScript sau bài học này.

Window location là gì

Window location là một Object trong JavaScript, có tác dụng lấy các thông tin về trang web hiện đang truy cập thông qua các thuộc tính của nó.

Có 8 loại thuộc tính trong Window location giúp chúng ta lấy thông tin về trang web hiện đang truy cập như sau:

Thuộc tínhCông dụng
location.hrefLấy toàn bộ URL (đường dẫn trang web)
location.protocolLấy protocol
location.hostLấy máy chủ
location.hostnameLấy tên máy chủ
location.portLấy cổng port
location.pathnameLấy tên cổng port
location.searchLấy chuỗi truy vấn
location.hashLấy giá trị cố định

Bằng cách sử dụng Window location href, chúng ta có thể lấy toàn bộ đường dẫn trang web, tuy nhiên chúng ta cũng có thể dùng các thuộc tính khác ở bảng trên để lấy từng thông tin cụ thể hơn có trong URL này.

Lại nữa, đối với thuộc tính location.port, nếu đường dẫn sử dụng không ghi port cụ thể (có nghĩa là dùng các cổng port mặc định như 80 hay 443) thì kết quả trả về sẽ là một chuỗi trống mà thôi.

Ví dụ, chúng ta có thể dùng các thuộc tính của Window location để lấy thông tin URL như sau:

Window location là gì

Lấy URL của trang web hiện tại bằng JavaScript

Sau đây hãy cùng xem demo cách Lấy URL của trang web hiện tại bằng JavaScript bằng thuộc tính location.href với mã sau đây:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h1>Sample</h1>

<p>Lấy URL hiện tại</p>

<input type="button" value="check" id="btnCheck">

<script>
let btnCheck = document.getElementById('btnCheck');

btnCheck.addEventListener('click', function(){
console.log('href:' + location.href);
console.log('protocol:' + location.protocol);
console.log('host:' + location.host);
console.log('hostname:' + location.hostname);
console.log('port:' + location.port);
console.log('pathname:' + location.pathname);
console.log('search:' + location.search);
console.log('hash:' + location.hash);
});
</script>

</body>
</html>

Với mã HTML trên, sau khi click vào nút check thì toàn bộ các thông tin về URL của trang web hiện tại, ví dụ như tham số đường dẫn trang web, hoặc tên máy chủ của sẽ được lấy và in ra màn hình console như sau:

location.href trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách lấy URL của trang web hiện tại bằng JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.