JavaScript - BOM Location trong Javascript

28/03/2019, 8:45 AM | 28/03/2019, 8:45 AM | 930 | 029

Location là một thuộc tính của đối tượng window dùng để sử lý, điều hướng các url của trang web. Được viết với cú pháp :

window.location

Ta cùng tìm hiểu một số thuộc tính và phương thức của location
1. Các thuộc tính của location

Thuộc tính	Chức năng
hash	Gán hoặc lấy phần sau của dấu # trong url
host	Gán hoặc lấy hostname và port number trong url
hostname	Gán hoặc lấy hostname
href	Gán hoặc lấy url
protocol	Trả về giao thức web sử dụng ( http: hoặc https: )
origin	Trả về protocol, hostname và port của url
pathname	Gán hoặc lấy pathname của url
port	Gán hoặc lấy port của url
search	Lấy query string của url

Ví dụ :Các bạn xem ví dụ sau sẽ thấy rõ hơn

Xem DEMO

	<script language="javascript">
        document.write("hash: " +window.location.hash + "<br />");
        document.write("host: " +window.location.host + "<br />");
        document.write("hostname: " +window.location.hostname + "<br />");
        document.write("href: " +window.location.href + "<br />");
        document.write("protocol: " +window.location.protocol + "<br />");
        document.write("origin: " +window.location.origin + "<br />");
        document.write("pathname: " +window.location.pathname + "<br />");
        document.write("port: " +window.location.port + "<br />");
        document.write("search :" +window.location.search + "<br />");
      </script>

2. Một số phương thức trong location
Phương thức reload()
Phương thức này giúp tải lại trang web. Cú pháp như sau :

window.location.reload();

Ví dụ :

Xem DEMO

<html>
    <head>
        
        <script type="text/javascript">
            function Refresh(){
                window.location.reload();
            }
        </script>
    </head>
    <body>
         <input type="button" value="Click Refresh" onclick="Refresh()" /> 
    </body>
</html>

Phương thức replace() , assign()
Phương thức này giúp điều hướng url giống với thuộc tính href ở trên. Tuy nhiên với replace() thì trình duyệt sẽ không lưu vào lịch sử.
Ví dụ :

Xem DEMO

<html>
    <head>
        
    </head>
    <body>
        <input type="button" value="replace Url" onclick="replace()" />
        <input type="button" value="assign Url" onclick="assign()" />
        <input type="button" value="href Url" onclick="href()" />
        <script language="javascript">
            function replace(){
                window.location.replace('http://vnfree.net');
            }
            function assign(){
                window.location.assign('http://vnfree.net');
            }
            function href(){
                window.location.href = 'http://vnfree.net';
            }
          </script>
    </body>
</html>