Hướng dẫn get url javascript

Question

Thuộc tính href của đối tượng Location

- Thuộc tính href của đối tượng location chứa URL hiện tại (URL của trang web mà bạn đang truy cập)

- Với việc truy cập vào thuộc tính href của đối tượng location, ta có thể lấy được URL hiện tại hoặc thiết lập URL hiện tại thành một URL mới.

Nội dung chính Show

Thuộc tính href của đối tượng Location
1) Cú pháp
2) Một số ví dụ
Window location là gì
Lấy URL của trang web hiện tại bằng JavaScript
Tổng kết

1) Cú pháp

- Lấy URL hiện tại

location.href

- Thiết lập URL hiện tại thành một URL mới

location.href = URL mới

- Lưu ý: URL mới có thể là

Một đường dẫn tuyệt đối, ví dụ như:
http://webcoban.vn/css/default.html
Một đường dẫn tương đối, ví dụ như:
../css/default.html

2) Một số ví dụ

Lấy URL hiện tại

Xem ví dụ

Thiết lập lại URL hiện tại thành http://webcoban.vn

Xem ví dụ

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ính	Công dụng
location.href	Lấy toàn bộ URL (đường dẫn trang web)
location.protocol	Lấy protocol
location.host	Lấy máy chủ
location.hostname	Lấy tên máy chủ
location.port	Lấy cổng port
location.pathname	Lấy tên cổng port
location.search	Lấy chuỗi truy vấn
location.hash	Lấ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:

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:

html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sampletitle>
head>
<body>

<h2>Sampleh2>

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

<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:

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.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a> và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js">

Bài viết liên quan

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>> học javascript - lập trình javascript cơ bản>>16. javascript và broswer