BOM - Location điều hướng và xử lý URL trong Javascript

Tiếp tục serie tìm hiểu BOM trong Javascript thì trong bài này chúng ta sẽ tìm hiểu đối tượng location trong javascript, đây là đối tương chuyên dùng xử lý URL của trang web và và thực hiện các thao tác liên quan tới URL như reload, redirect, ...

1. Location trong Javascript

Location là một thuộc tính của đối tượng window nên khi sử dụng nó bạn phải thông qua đối tượng window và đối tượng window luôn tồn tại trong các trình duyệt hiện nay nên bạn hoàn toàn yên tâm khi sử dụng mà không cần phải khai báo.

window.location

Bây giờ chúng ta tìm hiểu các phương thức và thuộc tính của location nhé.

2. Các phương thức của Location

Có ba phương thức chính nằm trong đối tượng location đó là reload(), replace()assign().

window.location.reload(url) - tải lại trang web

Thông thường để tại lại trang web bạn sẽ nhấn phím F5 hoặc là clich chuột phải và chọn Refresh page, tuy nhiên nếu bạn refresh bằng Javascript thì vẫn được bằng cách sử dụng phương thức reload().

Ví dụ: XEM DEMO

<html>
    <body>
      Chào mừng bạn đến với freetuts.net
      <button onclick="refreshPage()">Refresh</button>
      
      <script language="javascript">
        function refreshPage()
        {
         	window.location.reload(); 
        }
      </script>
    </body>
</html>

window.location.replace(urr) - ghi đè trang web

Phương thức này ít khi sử dụng mà thay vào đó họ sử dụng cú pháp window.location.href="url". Tuy nhiên hai cách này vẫn có sự 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ụ: XEM DEMO

<html>
    <body>
      Click vào để chuyển hướng đến freetuts.net
      <button onclick="replacePage()">replace()</button>
      <button onclick="hrefPage()">location.href</button>
      
      <script language="javascript">
        function replacePage()
        {
          window.location.replace('https://freetuts.net'); 
        }
        
        function hrefPage()
        {
          window.location.href = 'https://freetuts.net';
        }
      </script>
    </body>
</html>

window.location.assign(url) - load một trang mới

Về công dụng vẫn không có gì khác với hai cách trên, tuy nhiên cách này nó có đặc điểm giống với location.href.

Vi dụ: XEM DEMO

<html>
    <body>
      Click vào để chuyển hướng đến freetuts.net
      <button onclick="assignPage()">replace()</button>
      
      <script language="javascript">
        function assignPage()
        {
          window.location.assign('https://freetuts.net'); 
        }
      </script>
    </body>
</html>

3. Các thuộc tính của Location

Ngoài các phương thức trên thì bạn có thể sử dụng Location để xử lý các thành phần liên quan đến URL như lấy phần hash, lấy phần search

Và đây là danh sách các thuộc tính đầy đủ cho đối tượng location này:

  • hash: thiết lập hoặc lấy phần sau dấu # của URL
  • host: thiết lập hoặc lấy hostname và port number của URL
  • hostname: thiết lập hoặc lấy hostname
  • href: thiết lập hoặc lấy URL
  • origin: trả về protocal, hostname và port number của URL
  • pathname: thiết lập hoặc lấy path name của URL
  • port: thiết lập hoặc lấy port của URL
  • search: lấy phần query string của URL

Lưu ý: các thuộc tính trên bạn có thể dùng đẻ lấy (get) hoặc thiết lập (get).

Ví dụ: XEM DEMO

<html>
    <body>
      <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("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>
    </body>
</html>

4. Lời kết

Các thuộc tính trên chúng ta chỉ hay sử dụng phần hash, search và href, các phần còn lại rất ít khi sử dụng. Riêng đối với hash là thành phần nằm sau dấu # nên các Framework Javascript như AngularJS hoặc các ứng dụng Ajax sử dụng để nhận diện được action hiện tại là gì.

Sắp tới ngày lễ 30/4 rồi nên có lẽ tuts mình ra sẽ không được đều nữa nên các bạn thông cảm nha, ngày đó mình sẽ về quê cùng gia đình.

Học Javascript qua các bài tập thực hành

Bạn muốn học và nắm bắt Javascript một cách nhanh nhất thì khoá học Javascript từ đầu sẽ giúp bạn, đây là khóa học được biên soạn dành cho người mới học, và mọi thứ sẽ thông qua thực hành, bạn sẽ dễ dàng nắm bắt và nhớ lâu hơn. Bạn sẽ được học xử kỹ thuật lý các hiệu ứng, thao tác với DOM, BOM và nhiều kỹ thuật khác.

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

XEM
UNICA - Học lập trình JAVASCRIPT

(Giảng viên: )

XEM