1. BOM Location trong JavaScript là gì?

BOM Location là một đối tượng được dùng để xử lý các vấn đề liên quan đến URL của trang web trên trình duyệt. Nó được sử dụng rất nhiều trong lập trình web.

Với đối tượng window thì location là một thuộc tính nên khi sử dụng nó ta phải thông qua đối tượng window . Vì window luôn là một biến toàn cục nên khi sử dụng ta cũng không cần phải khai báo

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. Ta có thể console.log(window.location) để xem chi tiết. Một số thuộc tính của location như:

  • 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 chuỗi truy vấn của url

Ví dụ:

<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. Nhận đường dẫn URL với Javascript

Để có được URL hiện tại của trang web, hãy sử dụng thuộc tính href của đối tượng location . Sử dụng thuộc tính này với một đối tượng document .

Ví dụ:

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"URL đầy đủ của trang này là:<br>" + window.location.href;
</script>

3. Lấy tên máy chủ từ URL với JavaScript

Có 2 thuộc tính trả về tên máy chủ của URL, một là thuộc tính host và một thuộc tính khác là thuộc tính hostname . Cả hai đều trả về tên của máy chủ lưu trữ nhưng thuộc tính host cũng trả về số cổng với tên máy chủ.

Ví dụ:

<h2>Sử dụng thuộc tính máy chủ và tên máy chủ.</h2>
<p id="output"></p>
<button onclick="getHost()">Click</button>

<script>
  function getHost() {
    var host = location.host;
    var hostName = location.hostname;
    document.getElementById("output").innerHTML = "Host - " + host + "<br> HostName - " + hostName;
  }
</script>

4. Lấy tên đường dẫn và nhận giao thức từ URL với JavaScript

Sử dụng thuộc tính protocol trên location để nhận giao thức của URL.

<h2>Sử dụng thuộc tính giao thức trên đối tượng location.</h2>
<p id="output"></p>
<button onclick="getProtocol()">Click</button>

<script>
  function getProtocol() {
    var Protocol = location.protocol;
    document.getElementById("output").innerHTML = "Giao thức - " + Protocol;
  }
</script>

Thuộc tính pathname của đối tượng location trả về tên đường dẫn của trang hiện tại.

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Đường dẫn trang là: " + window.location.pathname;
</script>

5. Lấy Port của URL với JavaScript

Thuộc tính port của đối tượng location trả về số cổng máy chủ internet (của trang hiện tại).

<p id="demo"></p>

<p>Lưu ý: Nếu số cổng là mặc định (80 cho http và 443 cho https), hầu hết các trình duyệt sẽ hiển thị 0 hoặc không có gì.</p>

<script>
document.getElementById("demo").innerHTML = 
"Số cổng URL của trang hiện tại là: " + window.location.port;
</script>

Nếu số cổng là mặc định (80 cho http và 443 cho https), hầu hết các trình duyệt sẽ hiển thị 0 hoặc không có gì.

6. Nhận chuỗi truy vấn bằng JavaScript

Chúng ta có thể lấy một chuỗi truy vấn từ thuộc tính search của đối tượng location . Nó sẽ trả lại mọi thứ sau dấu ? (bao gồm cả dấu hỏi chấm)

<h2>Sử dụng thuộc tính search trên đối tượng location</h2>
<p id="output"></p>
<button onclick="getQueryString()">click</button>

<script>
  function getQueryString() {
    var queryString = location.search;
    document.getElementById("output").innerHTML = "chuỗi truy vấn - " + queryString;
  }
</script>

7. Các phương thức của Location trong JavaScript

7.1. Phương thức reload()

Phương thức này giúp tải lại trang web. Nó giống như khi ta F5 vậy.

Ví dụ:

<p>click vào button để xem kết quả</p>
<button onclick="reload()" >Tải lại trang</button>
<script>
    function reload(){
        window.location.reload();
    }
</script>

7.2. Phương thức replace() và assign()

Với phương thức replace() thì ta ít khi sử dụng mà thay vào đó họ sử dụng href và 2 cách này có đôi chút khác biệt:

  • Đối với replace() thì trình duyệt sẽ không đưa vào lịch sử.
  • Đối với location.href thì trình duyệt sẽ có đưa vào lịch sử

Ví dụ:

<p>click vào button để xem kết quả</p>
<button onclick="replace()" >Di chuyển trang</button>
<script>
    function replace(){
        window.location.replace('https://laptrinhtudau.com');
    }
</script>

Với phương thức assign() thì phương thức này thì lại không khác gì thuộc tính href .

<p>click vào button để xem kết quả</p>
<button onclick="assign()" >Di chuyển trang</button>
<script>
    function assign(){
        window.location.assign('https://laptrinhtudau.com');
    }
</script>