Thuộc tính location trong window

Thuộc tính location của một cửa sổ (tức là window.location) là một tham chiếu đến một đối tượng Location. Nó đại diện cho URL hiện tại của tài liệu đang được hiển thị trong cửa sổ đó.

Thuộc tính Location trong Window

Vì đối tượng window nằm trên cùng trong phạm vi, vì vậy các thuộc tính của đối tượng window.location có thể được truy cập mà không cần thêm tiền tố window.

Ví dụ window.location.href có thể được viết dưới dạng location.href.

Phần bên dưới đây sẽ hướng dẫn bạn cách lấy URL của trang cũng như tên máy chủ (hostname), giao thức (protocol), v.v. bằng cách sử dụng thuộc tính đối tượng location của đối tượng window.

Đọc thêm: Thao tác với window trong JavaScript

Đây là thuộc tính rất hữu ích trong lập trình web, bạn hãy ghi nhớ kỹ nhé.

1. Lấy URL trang hiện tại thông qua location

Bạn có thể sử dụng thuộc tính window.location.href để lấy toàn bộ URL của trang hiện tại.

Ví dụ sau sẽ hiển thị URL đầy đủ của trang khi click vào nút:

<script>
function getURL() {
    alert("Lấy URL trang hiện tại: " + window.location.href);
}
</script>
 
<button type="button" onclick="getURL();">Lấy URL trang</button>

2. Lấy các thành phần khác nhau của URL thông qua location

Tương tự, bạn có thể sử dụng các thuộc tính khác của đối tượng location như giao thức (protocol), tên máy chủ (hostname), cổng (port), tên đường dẫn (partname), tìm kiếm (search), v.v. để lấy phần khác nhau của một URL.

Hãy thử ví dụ sau để biết cách sử dụng thuộc tính location của đối tượng window.

// Thông báo ra URL trang web
alert(window.location.href);
  
// Thông báo ra giao thức http: hoặc https:
alert(window.location.protocol); 
 
// Thông báo ra tên máy chủ với cổng như localhost hoặc localhost:3000
alert(window.location.host);
  
// Thông báo ra tên máy chủ như localhost hoặc niithanoi.edu.vn
alert(window.location.hostname);
 
// Thông báo ra cổng (port) như là 3000
alert(window.location.port);
  
// Thông báo ra đường dẫn ví dụ /hoc-lap-trinh.html
alert(window.location.pathname); 
 
// Thông báo ra chuỗi truy vấn như ?q=php
alert(window.location.search);
 
// Thông báo nhận dạng phân đoạn như #featured
alert(window.location.hash);

Lưu ý: Khi bạn truy cập một trang web, bạn luôn kết nối với một cổng cụ thể (ví dụ: http://localhost:3000). Tuy nhiên, hầu hết các trình duyệt sẽ không hiển thị số cổng mặc định, ví dụ: 80 cho HTTP và 443 cho HTTPS.

3. Tải lại tài liệu mới thông qua location

Bạn có thể sử dụng phương thức assign() của đối tượng location, tức là window.location.assign() để tải một tài nguyên khác từ URL được cung cấp dưới dạng tham số, ví dụ:

<script>
function loadHomePage() {
    window.location.assign("https://niithanoi.edu.vn");
}
</script>
 
<button type="button" onclick="loadHomePage();">Trang chủ NIIT - ICT Hà Nội</button>

Bạn cũng có thể sử dụng phương thức replace() để tải tài liệu mới, phương thức này gần giống như phương thức assign().

Sự khác biệt giữa replace() và assign() của loaction là nó không tạo lối vào trong lịch sử của trình duyệt, có nghĩa là người dùng sẽ không thể sử dụng nút back để quay lại trang trước.

Đây là một ví dụ:

<script>
function loadHomePage(){
    window.location.replace("https://niithanoi.edu.vn");
}
</script>
 
<button type="button" onclick="loadHomePage();">Trang chủ NIIT - ICT Hà Nội</button>

Ngoài ra, bạn có thể sử dụng thuộc tính window.location.href để tải tài liệu mới trong cửa sổ.

Nó tạo ra hiệu ứng tương tự như sử dụng phương thức assign(). Đây là một ví dụ:

<script>
function loadHomePage() {
    window.location.href = "https://niithanoi.edu.vn";
}
</script>
 
<button type="button" onclick="loadHomePage();">Trang chủ NIIT - ICT Hà Nội</button>

4. Tự động tải lại trang với phương thức reload() hoặc replace() của location

Phương thức reload() có thể được sử dụng để tải động lại trang hiện tại.

Bạn có thể tùy ý chỉ định tham số Boolean true hoặc false:

    + Nếu tham số là true, phương thức này sẽ buộc trình duyệt tải lại trang từ máy chủ.

    + Nếu nó false hoặc không được chỉ định, trình duyệt có thể tải lại trang từ bộ nhớ đệm của nó.

Đây là một ví dụ:

<script>
function forceReload() {
    window.location.reload(true);
}
</script>
 
<button type="button" onclick="forceReload();">Tải lại trang</button>

Lưu ý: Kết quả của việc gọi phương thức reload() khác với việc nhấp vào nút Tải lại / Refresh của trình duyệt. Phương thức reload() xóa các giá trị biểu mẫu, trong khi Tải lại / Refresh của trình duyệt có thể được giữ lại chúng.

Như vậy, qua bài hướng dẫn này, bạn đã biết sử dụng thuộc tính location trong window để lấy một số thông tin cần thiết cũng như thực hiện thao tác tải lại trang.

Các thao tác này rất hữu ích khi bạn lập trình web, tương tác, hành xử với hành vi của người dùng thật. Do đó, hãy ghi nhớ hoặc bookmark lại bài viết này để sử dụng khi cần bạn nhé.

Chúc bạn học lập trình web tốt.

Đừng quên, nếu muốn HỌC LẬP TRÌNH WEB FULL STACK thì NIIT - ICT Hà Nội luôn là lựa chọn phù hợp nhất cho các bạn yêu thích lập trình web, mới tốt nghiệp THPT, hoặc muốn chuyển ngành nghề.

Đọc thêm: Thao tác với screen trong window