Làm cách nào để chuyển hướng đến một trang khác trong JavaScript khi tải?

Với một vài dòng mã JavaScript, bạn có thể chuyển hướng khách truy cập đến một URL khác. Hàm được đề xuất là window.location.replace()

Một chút thông tin cơ bản. chuyển hướng JavaScript là chuyển hướng phía máy khách hướng dẫn trình duyệt tải một URL khác

Triển khai chuyển hướng JavaScript

Một ví dụ về giao diện chuyển hướng JavaScript đến trang chủ của chúng tôi

Mã này sẽ đưa khách truy cập đến _______________ khi tải trang

Lợi ích của việc sử dụng hàm window.location.replace là URL hiện tại không được thêm vào lịch sử điều hướng của khách truy cập, trong khi chuyển hướng JavaScript phổ biến window.location.href sẽ. Điều đó có thể khiến khách truy cập bị mắc kẹt trong các vòng lặp nút quay lại. Do đó, không sử dụng nó khi chuyển hướng khách truy cập ngay lập tức đến một URL khác

Các chuyển hướng JavaScript có ảnh hưởng đến hiệu suất SEO của bạn không?

Kiểm tra trang web của bạn để biết các chuyển hướng quá mức và cấu hình không chính xác ngay bây giờ

Đã xảy ra một số lỗi không mong muốn. Xin vui lòng liên hệ với chúng tôi. Đã xảy ra lỗi. Vui lòng thử lại sau.

Miền (bắt buộc) Vui lòng nhập một tên miền hợp lệ (www. thí dụ. com). Tên miền này đã được giám sát bởi ContentKing. Vui lòng liên hệ với chúng tôi nếu bạn là chủ sở hữu hợp pháp của tên miền này. Trang web này chuyển hướng đến. Thay vào đó, bạn có muốn thêm trang web này không?Miền này đã bị loại khỏi quá trình giám sát. Nếu bạn sở hữu nó, xin vui lòng liên hệ với chúng tôi. Chúng tôi không thể tìm thấy tên miền này. Bạn có chắc là đúng không?Rất tiếc, chúng tôi không thể truy cập trang web này (bị chặn bởi tường lửa ứng dụng web). Hãy liên hệ với chúng tôi để được giúp đỡ.

Trong hướng dẫn này, chúng ta học cách sử dụng JavaScript để chuyển hướng trang web sau 5 giây. Để chuyển hướng trang web sau 5 giây, hãy sử dụng phương thức setInterval() để đặt khoảng thời gian. Thêm trang web vào cửa sổ. vị trí. đối tượng href

Như chúng ta đã biết, bất cứ khi nào chúng ta cần gọi một hàm hoặc một số khối mã sau một khoảng thời gian cụ thể, chúng ta sử dụng các phương thức setTimeout() và setInterval() của JavaScript. Hãy xem xét việc sử dụng các phương pháp này để chuyển hướng một trang web trong 5 giây

Để chuyển hướng một trang, chúng tôi sẽ sử dụng tài liệu. vị trí. href hoặc cửa sổ. vị trí. href của JavaScript như hình dưới đây -

document.location.href="";
   OR
window.location.href="";

Hãy cho chúng tôi hiểu việc sử dụng các phương thức setTimeout() và setInterval() với tài liệu. vị trí. href từng đối tượng một để trì hoãn chuyển hướng trang web trong 5 giây

Sử dụng Phương thức setTimeout()

Chúng ta sẽ sử dụng phương thức setTimeout() như bình thường bằng cách cung cấp cho nó một hàm gọi lại và bằng cách chỉ định một giới hạn thời gian cụ thể mà sau đó nó sẽ gọi hàm gọi lại sẽ chuyển hướng trang web

cú pháp

Cú pháp sau đây sẽ được sử dụng để triển khai phương thức setTimeout() với tài liệu. vị trí. đối tượng href -

setTimeout(callBack_func, timeInterval);
function callBack_func() {
   document.location.href = "";
}

Hãy cho chúng tôi hiểu cách triển khai mã của phương thức setTimeout() để chuyển hướng trang sau 5 giây

thuật toán

• Bước 1 - Trong bước đầu tiên, chúng tôi sẽ xác định chức năng gọi lại cho sự kiện onclick được liên kết với thẻ nút trong tài liệu HTML

• Bước 2 - Trong bước này, chúng ta sẽ gọi phương thức setTimeout() với hàm gọi lại và khoảng thời gian bên trong hàm đã khai báo ở bước trước

• Bước 3 - Trong bước cuối cùng, chúng ta sẽ xác định chức năng gọi lại của phương thức setTimeout() sử dụng tài liệu. vị trí. đối tượng href để chuyển hướng trang sau một khoảng thời gian nhất định

Thí dụ

Ví dụ mã bên dưới sẽ giải thích việc sử dụng phương thức setTimeout() để trì hoãn việc chuyển hướng trang web trong 5 giây -

   
Using JavaScript to resirect a webpage after 5 seconds 
   
   Click to Redirect to Tutorials Point
   

Ví dụ trên sẽ chuyển hướng trang web đến trang chính thức của tutorialspoint. com sau 5 giây nhấp vào nút và nó đang xảy ra do phương thức setTimeout() được sử dụng với tài liệu. vị trí. đối tượng href trong đoạn mã trên

Sử dụng Phương thức setInterval()

Chúng ta cũng có thể sử dụng phương thức setInterval() để trì hoãn việc chuyển hướng trang web theo một khoảng thời gian cụ thể. Tuy nhiên, trong khi sử dụng phương thức setInterval() cho mục đích này, chúng ta cần cẩn thận vì nó sẽ liên tục gọi hàm được truyền bên trong nó dưới dạng hàm gọi lại. Chúng ta có thể sử dụng phương thức clearInterval() để ngăn nó gọi hàm nhiều lần

cú pháp

Cú pháp sau đây sẽ giúp bạn hiểu cách bạn có thể sử dụng phương thức setInterval() với phương thức clearInterval() cũng như với tài liệu. vị trí. đối tượng href -

var interval_name = setInterval(call_back, time_interval);
function call_back() {
   document.location.href = "";
   clearInterval(interval_name);
}

Hãy để chúng tôi hiểu nó một cách thực tế với sự trợ giúp của một ví dụ mã về cách chúng tôi có thể sử dụng phương thức setInterval() để chuyển hướng một trang sau 5 giây

thuật toán

Thuật toán của ví dụ trên và ví dụ này gần như giống nhau, bạn chỉ cần thay thế phương thức setTimeout() trong ví dụ trước bằng phương thức setInterval() và lưu nó vào một biến, sau đó bạn phải sử dụng phương thức clearInterval() bên trong lệnh gọi

Thí dụ

Ví dụ dưới đây sẽ minh họa việc sử dụng phương thức setInterval() cũng như những thay đổi bạn cần thực hiện trong thuật toán của ví dụ trước –

   
Using JavaScript to redirect a webpage after 5 seconds
   
   Click to Redirect to Tutorials Point
   

Trong ví dụ trên, chúng tôi đã sử dụng phương thức setInterval() bên trong hàm redirect(), hàm này sẽ được kích hoạt khi người dùng nhấp vào nút, trong đó setInterval() sẽ gọi hàm gọi lại của nó sau 5 giây và chuyển hướng trang đến . vị trí. href và sau đó nó sẽ xóa khoảng thời gian để nó không gọi lại chức năng và chuyển hướng đến cùng một trang nhiều lần

Trong hướng dẫn này, chúng ta đã thấy việc sử dụng các phương thức setTimeout() và setInterval() với tài liệu. vị trí. đối tượng href để chuyển hướng trang web sau 5 giây. Chúng tôi đã thảo luận về cả hai phương pháp này bằng cách triển khai thực tế chúng với sự trợ giúp của ví dụ về mã để hiểu chúng hoạt động theo cách tốt hơn

Làm cách nào để chuyển hướng từ trang này sang trang khác trong JavaScript?

Làm cách nào để chuyển hướng đến một trang khác sau một thời gian trong JavaScript?

Làm sao để 1 trang hiện lên 5 giây rồi mở trang khác?