Computer >> Máy Tính >  >> Lập trình >> Javascript

Cách thực hiện chuyển hướng JavaScript

Có một số cách để chuyển hướng một trang web:phía máy khách sử dụng thẻ meta trong HTML và phía máy chủ sử dụng các phương pháp chuyển hướng HTTP để đặt tên cho một số trang. Trong bài viết này, chúng tôi xem xét cách chuyển hướng một trang web bằng JavaScript.

Hai phương pháp

Có hai cách có thể sử dụng mã JavaScript để chuyển hướng trang. Cả hai đều liên quan đến đối tượng vị trí cửa sổ.

href

Cách đầu tiên liên quan đến thuộc tính href trên đối tượng vị trí (đến lượt nó, là một phần của đối tượng cửa sổ). Điều duy nhất bạn phải làm là xử lý chuyển hướng bằng cách gán URL mà bạn muốn chuyển hướng đến là location.href. Bạn thực hiện điều này trong một hàm JavaScript sẽ thực thi khi trang tải:

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   p {
     margin: 0;
     padding: 0;
   }
 </style>
 
</head>
 <body onload=handleRedirect("https://www.careerkarma.com/blog/html")>
     You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">https://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
 </body>
 <script>
   const handleRedirect = (url) => {
     location.href = url;
   }
 </script>
</html>

Tôi đã thêm một thẻ script vào cuối tài liệu, ngay trước thẻ body. Đây là nơi mà JavaScript của chúng tôi đi. Một hàm, được gọi là handleRedirect, có một tham số là url. Chúng tôi gán location.href cho giá trị của url đó.

Ở đầu phần nội dung của tài liệu, chúng tôi có một sự kiện onload. Sự kiện onload này thực thi chức năng JavaScript mà chúng tôi gán cho nó. Ở đây, chúng tôi đã chuyển URL mà chúng tôi muốn nó truy cập. Việc chuyển hướng diễn ra ngay lập tức và chuyển đến phần HTML trong các bài đăng trên blog của Career Karma.

Nếu bạn muốn thêm một chút tạm dừng trước khi trang chuyển hướng, bạn có thể làm điều đó bằng cách sử dụng setTimeout chức năng. Đây là cách thực hiện:

const handleRedirect = (url) => {
     setTimeout(() => {
       location.href = url;
     }, 2000);
   }

Mọi thứ khác vẫn giữ nguyên.

Phương pháp này thêm trang gốc vào ngăn xếp lịch sử. Nó có thể truy cập được bằng nút quay lại của trình duyệt. Có một phương pháp khác để thay thế URL nếu bạn muốn làm điều đó thay thế - chúng ta xem xét phương pháp đó tiếp theo!

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

thay thế

Không giống như phương pháp chúng tôi đã tạo ở trên chỉ định một URL mới cho một thuộc tính trên đối tượng vị trí, location.replace() là một phương thức chỉ định và thay thế URL ban đầu bằng URL bạn chỉ định.

Phương pháp này không đặt URL ban đầu trên ngăn xếp của trình duyệt, nó thay thế đích bằng URL được chuyển hướng. Đây là cách thực hiện:

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   p {
     margin: 0;
     padding: 0;
   }
 </style>
 
</head>
 <body onload=location.replace("https://www.careerkarma.com/blog/html")>
     You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">https://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
 </body>
</html>

Như bạn có thể thấy, chúng tôi hoàn toàn không cần thẻ script cho một lớp lót này. Khi tải tài liệu, nó sẽ chạy phương thức location.replace, phương thức này hướng chúng ta đến trang web trong dấu ngoặc đơn.

Đó là nó! Giờ đây, bạn có thể chuyển hướng đến một trang web mới bằng JavaScript.