Hướng dẫn dùng this.location.href JavaScript

Định nghĩa và cách sử dụng

Thuộc tính href của đối tượng Location được dùng để lấy địa chỉ trang web (URL) mà bạn đang truy cập.

Hoặc thiết lập giá trị của URL hiện tại thành một giá trị khác (với công dụng là reload trang web bạn đang truy cập bởi một địa chỉ khác).

Cú pháp

Lấy địa chỉ trang web (URL) mà bạn đang truy cập


var x = location.href;

Xem ví dụ

Thiết lập giá trị của URL hiện tại thành một giá trị khác

Trong đó: “https://boxhoidap.com/URL mới” có thể xác định theo kiểu đường dẫn tương đối, đường dẫn tuyệt đối hoặc liên kết trong.


location.href = "https://boxhoidap.com/URL mới";

Ví dụ, bạn đang truy cập một trang web ở địa chỉ http://webcoban.vn/javascript/baiviet1.php

  • Nếu dùng đường dẫn tương đối location.href=”https://boxhoidap.com/css/baiviet5.php” thì trang web mà bạn đang truy cập sẽ load thành
    http://webcoban.vn/css/baiviet5.php
  • Nếu dùng đường dẫn tuyết đối location.href=”http://webcoban.vn/html/baiviet3.php” thì trang web mà bạn đang truy cập sẽ load thành http://webcoban.vn/html/baiviet3.php
  • Nếu dùng liên kết trong location.href=”#tieude” thì trang web mà bạn đang truy cập sẽ load thành http://webcoban.vn/javascript/baiviet1.php#tieude

Bạn có thể sao chép đoạn mã bên dưới về
máy tính để kiểm tra.

<!DOCTYPE html>
<html>
<body>
    <button onclick="tuongdoi()">Đường dẫn tương đối</button>
    <button onclick="tuyetdoi()">Đường dẫn tuyệt đối</button>
    <button onclick="lienkettrong()">Liên kết trong</button>
    <script>
        function tuongdoi(){
            location.href = "https://boxhoidap.com/heading1/heading2/heading3";
        }
        function tuyetdoi(){
            location.href = "http://webcoban.vn/javascript/default.html";
        }
        function lienkettrong(){
            location.href = "#tieudebaiviet";
        }
    </script>
</body>
</html>

Định nghĩa và cách sử dụng

Thuộc tính href của đối tượng Location được dùng để lấy địa chỉ trang web (URL) mà bạn đang truy cập.

Xem thêm:  Mẫu đề thi toeic 2022

Hoặc thiết lập giá trị của URL hiện tại thành một giá trị khác (với công dụng là reload trang web bạn đang truy cập bởi một địa chỉ khác).

Cú pháp

Lấy địa chỉ trang web (URL) mà bạn đang truy cập


var x = location.href;

Xem ví dụ

Thiết lập giá trị của URL hiện tại thành một giá trị khác

Trong
đó: “https://boxhoidap.com/URL mới” có thể xác định theo kiểu đường dẫn tương đối, đường dẫn tuyệt đối hoặc liên kết trong.


location.href = "https://boxhoidap.com/URL mới";

Ví dụ, bạn đang truy cập một trang web ở địa chỉ http://webcoban.vn/javascript/baiviet1.php

  • Nếu dùng đường dẫn tương đối location.href=”https://boxhoidap.com/css/baiviet5.php” thì trang web mà bạn đang truy cập sẽ load thành http://webcoban.vn/css/baiviet5.php
  • Nếu dùng đường dẫn tuyết đối
    location.href=”http://webcoban.vn/html/baiviet3.php” thì trang web mà bạn đang truy cập sẽ load thành http://webcoban.vn/html/baiviet3.php
  • Nếu dùng liên kết trong location.href=”#tieude” thì trang web mà bạn đang truy cập sẽ load thành http://webcoban.vn/javascript/baiviet1.php#tieude

Bạn có thể sao chép đoạn mã bên dưới về máy tính để kiểm tra.

<!DOCTYPE html>
<html>
<body>
    <button onclick="tuongdoi()">Đường dẫn tương đối</button>
    <button onclick="tuyetdoi()">Đường dẫn tuyệt đối</button>
    <button onclick="lienkettrong()">Liên kết trong</button>
    <script>
        function tuongdoi(){
            location.href = "https://boxhoidap.com/heading1/heading2/heading3";
        }
        function tuyetdoi(){
            location.href = "http://webcoban.vn/javascript/default.html";
        }
        function lienkettrong(){
            location.href = "#tieudebaiviet";
        }
    </script>
</body>
</html>

Trong bài này chúng ta sẽ tìm hiểu đối tượng location trong Javascript, đây là đối tượng dùng để xử lý chuyển hướng trang, hoặc xử lý các thành phần của URL trên trang web.

Hướng dẫn dùng this.location.href JavaScript

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Xem thêm:  Bố họ Nguyễn đặt tên con trai là gì

Thao
tác sử dụng nhiều nhất trên location đó là chuyển hướng redirect, thông qua thuộc tính window.location.href, ta có thể tự chuyển hướng đến một URL mà không cần người dùng phải thao tác. Ngoài ra, với location, chúng ta có thể lấy được tất cả những thông tin trên URL như tên miền, query string, hash..

1. 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.

Location là một thuộc tính đối tượng nằm trong đố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 là một biến toàn cục 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.

Bài viết này được đăng tại [free tuts .net]

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 trong javascript

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 thì bạn sẽ nhấn phím F5 hoặc là clich chuột phải và chọn Refresh page. Tuy nhiên, bạn vẫn có thể reload trang bằng javascript rất dễ dàng thông qua phương thức window.location.reload().

Cú pháp như sau:

<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(url) – 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="https://boxhoidap.com/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ử
Xem thêm:  Kể về ngày đầu tiên bước vào trường THCS

Cú pháp như sau:

window.location.replace('https://freetuts.net');
<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

Cú pháp như sau:

window.location.assign('https://freetuts.net'); 

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 có đặc điểm giống với location.href.

<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 trong Javascript

Ngoài các phương thức trên, bạn cũng 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).

<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, searchhref, 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.

Thuộc website harveymomstudy.com

Related Posts