JavaScript: Chuyển hướng

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Chuyển hướng là một cách để gửi cả người dùng và công cụ tìm kiếm đến một URL khác với URL hiện tại. Chuyển hướng trang web là tự động chuyển hướng một trang web đến một trang web khác. Trang được chuyển hướng thường trên cùng một trang web hoặc có thể trên một trang web khác hoặc máy chủ web.

Chuyển hướng trang với JavaScript

location và location.href

Trong JavaScript, bạn có thể sử dụng nhiều phương pháp để chuyển hướng một trang web sang một trang khác. Hầu hết các phương thức này đều liên quan đến đối tượng window.location, đây là một thuộc tính của đối tượng Window. location có thể được sử dụng để lấy địa chỉ URL hiện tại (địa chỉ web) và để chuyển hướng trình duyệt đến một trang mới. Cả hai cách sử dụng đều giống nhau về hành vi. window.location trả về một đối tượng. Nếu .href không được đặt thì mặc định window.location sẽ thay đổi tham số .href.

Ví dụ

<!DOCTYPE html> 
<html> 
   <head> 
      <script> 
         function newLocation() { 
            window.location = "http://demo.v1study.com"; 
         } 
      </script> 
   </head> 

   <body> 
      <input type="button" value="Chuyển sang demo.v1study" onclick="newLocation()"> 
   </body> 
</html>

location.replace()

Phương thức replace() cũng là phương thức thường hay được sử dụng của đối tượng window.location, nó sẽ thay thế trang web hiện thời bằng một trang web mới.

Ví dụ:

window.location.replace("https://v1study.com")

location.assign()

Phương thức location.assign() sẽ tải một trang web mới trong cửa sổ trình duyệt.

Cách dùng:

window.location.assign("https://v1study.com");

So sánh assign() và replace()

Sự khác biệt giữa phương thức assign() và replace() là phương thức location.replace() xóa URL hiện tại khỏi lịch sử trang web, do đó không thể điều hướng trở lại trang web gốc. Ta không thể sử dụng nút "Back" của trình duyệt trong trường hợp này. Nếu muốn tránh tình huống này thì ta nên sử dụng phương thức location.assign(), vì nó sẽ tải trang web mới trong trình duyệt.

location.reload()

Phương thức location.reload() sẽ tải lại trang web hiện tại trong cửa sổ trình duyệt.

Cách dùng:

window.location.reload("https://v1study.com");

window.navigate()

Phương thức window.navigate() tương tự như việc gán một giá trị mới cho thuộc tính window.location.href. Tuy nhiên, vì phương thức này chỉ có sẵn trong MS Internet Explorer, vì vậy bạn nên tránh sử dụng khi phát triển trình duyệt chéo.

Cách dùng:

window.navigate("https://v1study.com");

Chuyển hướng và tối ưu hóa công cụ tìm kiếm

Nếu ta muốn thông báo cho các công cụ tìm kiếm (SEO) về việc chuyển tiếp URL thì ta nên thêm thẻ <meta rel="canonical"> vào phần đầu trang web của mình vì các công cụ tìm kiếm không phân tích JavaScript để kiểm tra chuyển hướng.

Cách dùng:

<link rel="canonical" href="https://v1study.com/css.css">
» Tiếp: alert, confirm, prompt
« Trước: Cookie
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!