Điện thoại/ Zalo
0389934723
Bài 18: Đối tượng location trong javascript
Bài trước chúng ta đã được tìm hiểu về đối tượng window trong javascript rồi, và trong đối tượng window này cũng bao gồm rất nhiều các đối tượng con đi kèm theo nó như document, location,… Và bài hôm nay chúng ta sẽ tim hiểu về đối tượng location trong javascript.
1, Đối tượng location trong javascript.
– Đối tượng location là con của đối tượng window và đối tượng location này chuyên dùng để xử lý, điều hướng url của trang web.
Cú pháp:
window.location;
-Trong đối tượng location cũng bao gồm rất nhiều các thuộc tính, phương thức con khác. Các bạn có thể console.log(window.location)
để xem chi tiết.
2, Các thuộc tính trong location.
Dưới đây mình sẽ liệt kê ra các thuộc tính và chức năng của nó trong đối tượng location:
- hash: gán hoặc lấy phần sau dấu
#
của URL. - host: gán hoặc lấy
hostname
và portnumber
của URL. - hostname: gán hoặc lấy
hostname.
- href: gán hoặc lấy URL.
- origin: trả về đường dẫn đầy đủ của trang hiện tại.
- pathname: gán hoặc lấy
path name
của URL. - port: gán hoặc lấy
port
của URL. - search: lấy phần query
string
của URL.
VD: hiển thị tất cả các thông tin của trình duyệt.
Toidicode.com demo location
p{
border:1px solid #dddddd;
background: #e1e1e1;
padding: 10px;
}
Click vào button để xem kết quả
function getInfo() {
var info = 'hash: ' + window.location.hash + '
';
info += 'host: ' + window.location.host + '
';
info += 'hostname: ' + window.location.hostname + '
';
info += 'href: ' + window.location.href + '
';
info += 'origin: ' + window.location.origin + '
';
info += 'pathname: ' + window.location.pathname + '
';
info += 'port: ' + window.location.port + '
';
info += 'search: ' + window.location.search + '
';
document.getElementById('results').innerHTML = info;
}
VD: Redirect trang web bằng javascript.
Toidicode.com demo location
click vào button để xem kết quả
function redirect(){
window.location.href = "http://toidicode.com";
}
3, Các Phương thức trong location.
Phương thức reload()
-Phương thức reload()
có tác dụng tải lại trang web, giống như khi bạn ấn F5
trên bàn phím.
Cú pháp:
window.location.reload();
VD: Reload trang web bằng các nhấn vào button.
Toidicode.com demo location
click vào button để xem kết quả
function reload(){
window.location.reload();
}
Phương thức replace()
-Phương thức này cũng có tác dụng redirect url như thuộc tính href, nhưng khi sử dụng replace()
thì trình duyệt sẽ không lưu vào lịch sử, còn href
thì có lưu.
Cú Pháp:
window.location.replace(url);
Trong đó: url là địa chỉ mà các bạn muốn redirect.
VD:
Toidicode.com demo location
click vào button để xem kết quả
function replace(){
window.location.replace('http://toidicode.com');
}
Phương thức assign()
-Phương thức này thì lại không khác gì thuộc tính href.
Cú Pháp:
window.location.assign(url);
Trong đó: url là địa chỉ mà các bạn muốn redirect.
VD:
Toidicode.com demo location
click vào button để xem kết quả
function assign(){
window.location.assign('http://toidicode.com');
}
3, Lời kết.
-Bài này mình chỉ trình bài cơ bản về phần thuộc tính của đối tượng location thôi còn các bạn muốn tìm hiểu sau hơn về thuộc từng thuộc tính thì có thể nghiên cứu thêm nhé!.