Hướng dẫn location javascript - javascript vị trí

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 location javascript - javascript vị trí

Hướng dẫn location javascript - javascript vị trí

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

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.ố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(),

window.location.replace('https://freetuts.net');
0 và
window.location.replace('https://freetuts.net');
1.

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

Cú pháp như sau:


    
      Chào mừng bạn đến với freetuts.net
      
      
      
    

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.replace('https://freetuts.net');
3. Tuy nhiên hai cách này vẫn có sự khác biệt:

  • Đối với
    window.location.replace('https://freetuts.net');
    0 thì trình duyệt sẽ KHÔNG đưa vào lịch sử.đưa vào lịch sử.
  • Đối với
    window.location.replace('https://freetuts.net');
    5 thì trình duyệt sẽ CÓ đưa vào lịch sử

Cú pháp như sau:

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


    
      Click vào để chuyển hướng đến freetuts.net
      
      
      
      
    

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

Cú pháp như sau:

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.replace('https://freetuts.net');
3. Tuy nhiên hai cách này vẫn có sự khác biệt:


    
      Click vào để chuyển hướng đến freetuts.net
      
      
      
    

Đối với window.location.replace('https://freetuts.net');0 thì trình duyệt sẽ KHÔNG đưa vào lịch sử.

Đối với

window.location.replace('https://freetuts.net');
5 thì trình duyệt sẽ CÓ đưa vào lịch sử

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

window.location.replace('https://freetuts.net');
9 này:

  • window.location.assign('https://freetuts.net'); 
    : thiết lập hoặc lấy phần sau dấu
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    0 của URL
  • 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.: thiết lập hoặc lấy
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    1 và port
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    2 của URL
  • 3. Các thuộc tính của location trong Javascript: thiết lập hoặc lấy
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    1
  • Ngoài các phương thức trên, bạn cũng có thể sử dụng
    window.location.replace('https://freetuts.net');
    6 để xử lý các thành phần liên quan đến URL như: lấy phần
    window.location.replace('https://freetuts.net');
    7, lấy phần
    window.location.replace('https://freetuts.net');
    8.
    : thiết lập hoặc lấy URL
  • Và đây là danh sách các thuộc tính đầy đủ cho đối tượng
    window.location.replace('https://freetuts.net');
    9 này:
    : trả về
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    4,
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    1 và port
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    2 của URL
  • hash: thiết lập hoặc lấy phần sau dấu
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    0 của URL
    : thiết lập hoặc lấy
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    7 của URL
  • host: thiết lập hoặc lấy
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    1 và port
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    2 của URL
    : thiết lập hoặc lấy
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    8 của URL
  • hostname: thiết lập hoặc lấy
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    1
    : lấy phần query
    
        
          Click vào để chuyển hướng đến freetuts.net
          
          
          
          
        
    
    9 của URL

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


    
      
    

origin: trả về Click vào để chuyển hướng đến freetuts.net 4, Click vào để chuyển hướng đến freetuts.net 1 và port Click vào để chuyển hướng đến freetuts.net 2 của URL

pathname: thiết lập hoặc lấy


    
      Click vào để chuyển hướng đến freetuts.net
      
      
      
      
    
7 của URL
window.location.replace('https://freetuts.net');
8 và
window.location.assign('https://freetuts.net'); 
2, các phần còn lại rất ít khi sử dụng. Riêng đối với
window.location.replace('https://freetuts.net');
7 là thành phần nằm sau dấu

    
      Click vào để chuyển hướng đến freetuts.net
      
      
      
      
    
0 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.