Đố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à port number 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.

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Toidicode.com demo location</title>
</head>
<style type="text/css" media="screen">
	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}
</style>
<body>
	<div>Click vào button để xem kết quả</div>
	<button type="button" onclick="getInfo()">Click để hiển thị thông tin trang</button>
	<p id="results"></p>
	<script type="text/javascript">
		function getInfo() {
			var info = 'hash: ' + window.location.hash + '<br>';
			info += 'host: ' + window.location.host + '<br>';
			info += 'hostname: ' + window.location.hostname + '<br>';
			info += 'href: ' + window.location.href + '<br>';
			info += 'origin: ' + window.location.origin + '<br>';
			info += 'pathname: ' + window.location.pathname + '<br>';
			info += 'port: ' + window.location.port + '<br>';
			info += 'search: ' + window.location.search + '<br>';
			document.getElementById('results').innerHTML = info;
		}
	</script>
</body>

</html>

Xem Kết Quả

VD: Redirect trang web bằng javascript.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com  demo location</title>
</head>
<body>
    <p>click vào button để xem kết quả</p>
    <button onclick="redirect()" >Di chuyển trang</button>
    <script>
        function redirect(){
            window.location.href = "http://toidicode.com";
        }
    </script>
</body>
</html>

Xem Kết Quả

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.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com  demo location</title>
</head>
<body>
    <p>click vào button để xem kết quả</p>
    <button onclick="reload()" >Load lại trang</button>
    <script>
        function reload(){
            window.location.reload();
        }
    </script>
</body>
</html>

Xem Kết Quả

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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com  demo location</title>
</head>
<body>
    <p>click vào button để xem kết quả</p>
    <button onclick="replace()" >Di chuyển trang</button>
    <script>
        function replace(){
            window.location.replace('http://toidicode.com');
        }
    </script>
</body>
</html>

Xem Kết Quả

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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com  demo location</title>
</head>
<body>
    <p>click vào button để xem kết quả</p>
    <button onclick="assign()" >Di chuyển trang</button>
    <script>
        function assign(){
            window.location.assign('http://toidicode.com');
        }
    </script>
</body>
</html>

Xem Kết Quả

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é!.