Hướng dẫn javascript redirect to another page without changing url - javascript chuyển hướng đến một trang khác mà không thay đổi url

Tôi đã viết mã trên trang chỉ mục của mình

          window.location.href = "https://www.example.com";
        

Nó chuyển hướng, nhưng nó cũng thay đổi URL là hiển nhiên.

Ví dụ: Khi tôi chạy

          window.location.href = "https://www.example.com";
        

Nó sẽ chạy

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

Tôi muốn làm điều này trong JQuery hoặc JavaScript.

JavaScript có một vài cách để thay đổi và chuyển hướng URL sang trang khác ở phía máy khách. Có nhiều lý do tại sao chúng tôi có thể quyết định chuyển hướng URL của chúng tôi.

Thuộc tính

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

Trong bài viết này, bạn sẽ tìm hiểu cách bạn có thể sử dụng đối tượng

          window.location.href = "https://www.example.com";
        

Dù yêu cầu của bạn là gì, bạn có thể làm điều đó bằng cách làm theo cách của chúng tôi. Chúng ta hãy đi qua từng người một.

Hầu hết thời gian chúng tôi chuyển hướng URL của chúng tôi từ máy chủ. Bởi vì khi chúng tôi sử dụng chuyển hướng phía máy chủ, chúng tôi có thể thêm mã trạng thái HTTP 3xx với chúng.HTTP 3xx status codes with them.

Bằng cách xem các mã trạng thái đó, các công cụ tìm kiếm như Google có thể hiểu lý do đằng sau các chuyển hướng đó. Đó là lý do tại sao nó tốt cho SEO (tối ưu hóa công cụ tìm kiếm).Search Engine Optimization).

Bạn sử dụng phần mềm như Nginx hoặc phía máy chủ ứng dụng của bạn. Nếu bạn đang sử dụng NodeJS để xây dựng phía máy chủ ứng dụng của mình, bạn có thể dễ dàng chuyển hướng URL từ Node.js và Express Server.

Nhưng nếu bạn không có quyền truy cập vào máy chủ hoặc bạn muốn chuyển hướng của bạn xảy ra dựa trên hành động của người dùng như nhấp chuột, v.v., bạn cần sử dụng JavaScript ở phía máy khách.

Tất cả các phương thức này sẽ thay đổi URL hiện tại trong thanh địa chỉ trình duyệt nhưng nó cũng sẽ làm mới trang. Bạn có thể thay đổi URL một cách linh hoạt mà không tải lại trang trong JavaScript.

Chuyển hướng bằng cách sử dụng thuộc tính vị trí.HREF

Thuộc tính

          window.location.href = "https://www.example.com";
        

          console.log(window.location.href);
// https://www.example.com/products
        

Chúng tôi cũng có thể sử dụng thuộc tính này để đặt URL mới. Bằng cách đặt một URL mới, chúng tôi bảo trình duyệt tải URL mới đó bằng cách thay thế trình hiện có.

Bạn có thể đặt URL mục tiêu của mình bằng cách thêm một dấu hiệu bằng nhau (=) sau thuộc tính này theo sau là URL dưới dạng chuỗi.(=) after this property followed by the URL as a string.

          window.location.href = "https://www.example.com";
        

Tài sản

          window.location.href = "https://www.example.com";
        

Lưu ý: Nếu bạn đặt một chuỗi trống, thuộc tính này sẽ tải lại trang hiện tại. If you set an empty string, this property will reload the current page.

Bạn có thể đặt cả URL tuyệt đối và tương đối bằng thuộc tính

          window.location.href = "https://www.example.com";
        

Chuyển hướng bằng phương thức vị trí.Assign ()

          window.location.href = "https://www.example.com";
        

Phương pháp này có một tham số. Bạn phải truyền URL mục tiêu của mình trong tham số này dưới dạng chuỗi. Nếu bạn gọi phương thức này mà không chuyển tham số này, nó sẽ gây ra lỗi.

Lưu ý: Nếu bạn vượt qua một Sting trống, nó sẽ tải lại trang hiện tại. If you pass an empty sting, it will reload the current page.

Đây là cú pháp của cách bạn có thể gọi phương thức này:

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

Tôi đang gọi

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

          window.location.href = "https://www.example.com";
        

Phương pháp này cũng giữ URL trước đó trong lịch sử trình duyệt. Khi bạn thay đổi URL của mình bằng phương pháp này, bạn sẽ có thể quay lại các trang trước đó.

Như bạn đã thấy, cả thuộc tính

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

Cả hai chuyển hướng đến một trang mới bằng cách giữ lịch sử trình duyệt của trang mẹ. Nhưng phương thức vị trí.Assign () được coi là an toàn hơn một chút.location.assign() method is considered to be a little safer.

Bởi vì trong khi sử dụng phương pháp này nếu URL đích bị hỏng hoặc không an toàn, nó sẽ ném lỗi DomException.DOMException error.

Cũng đọc: Cách mở URL bằng JavaScript trong cùng một tab/cửa sổ mới How to Open URL Using JavaScript in Same or New Tab/Window

Chuyển hướng bằng phương thức vị trí.replace ()

Trong đối tượng vị trí JavaScript, có một phương thức

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

Phương thức

          window.location.href = "https://www.example.com";
        

Lưu ý: Nếu bạn vượt qua một sting trống, phương thức này sẽ tải lại trang hiện tại. If you pass an empty sting, this method will reload the current page.

Đây là cú pháp bạn cần tuân theo để sử dụng phương pháp này:

          window.location.replace("https://www.example.com");
        

Như bạn thấy, bạn có thể gọi phương thức

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

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

Sự khác biệt là phương thức

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

Điều đó có nghĩa là khi bạn chuyển hướng từ trang A sang trang B bằng phương thức Vị trí.replace (), bạn không thể quay lại trang A bằng cách nhấp vào nút "Quay lại" trong trình duyệt.from page A to page B using the location.replace() method, you can't go back to page A by clicking the "Back" button in the browser.

Nhưng nếu bạn chuyển hướng từ trang A sang trang B bằng cách sử dụng thuộc tính

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

Cách chuyển hướng đến URL tương đối

Trong các ví dụ trước, chúng ta đã thấy làm thế nào chúng ta có thể sử dụng các phương pháp đó để chuyển hướng đến URL tuyệt đối. Chúng tôi thường sử dụng URL tuyệt đối để đi đến một tên miền khác với chúng tôi.

Nhưng điều gì sẽ xảy ra nếu tôi muốn chuyển hướng người dùng của mình đến một con đường khác trong trang web của tôi? Tôi có thể dễ dàng làm điều đó bằng cách sử dụng một URL tương đối.

          // Using location.href property
window.location.href = "/blog";

// Using location.assign() method
window.location.assign("/blog");

// Using location.replace() method
window.location.replace("/blog");

        

Ở đây, tôi đang chỉ cho bạn cách sử dụng một đường dẫn tương đối với cả 3 kỹ thuật. Khi bạn sử dụng bất kỳ một trong những kỹ thuật này trong mã của mình, nó sẽ đưa bạn đến trang

          window.location.replace("https://www.example.com");
        

Ví dụ: nếu bạn đang ở trên trang

          window.location.replace("https://www.example.com");
        

          window.location.replace("https://www.example.com");
        

          window.location.replace("https://www.example.com");
        

Chuyển hướng một trang trong JavaScript với các tham số

Chúng tôi thêm các tham số vào URL bằng các dấu hiệu

          window.location.replace("https://www.example.com");
        

          window.location.replace("https://www.example.com");
        

Ví dụ: nếu bạn có trang

          // Using location.href property
window.location.href = "/blog";

// Using location.assign() method
window.location.assign("/blog");

// Using location.replace() method
window.location.replace("/blog");

        

Do đó, để chuyển hướng đến các trang đó, bạn phải đính kèm các tham số với URL đích. Hãy xem làm thế nào chúng ta có thể làm điều đó.

          const url = 'https://www.example.com?username=john37';

// Using location.href property
window.location.href = url;

// Using location.assign() method
window.location.assign(url);

// Using location.replace() method
window.location.replace(url);
        

Trong ví dụ này, tôi đang thêm tham số tên người dùng với giá trị của nó vào URL đích. Sau đó, tôi có thể chuyển hướng đến trang này.

Cũng đọc: Cách kiểm tra giá trị băm (#) trong URL bằng JavaScript How to Check For Hash (#) Value in a URL Using JavaScript

Cách chuyển hướng trong JavaScript sau 5 giây

Bạn có thể chuyển hướng người dùng đến một trang mới sau khi chờ một khoảng thời gian cố định. Chúng tôi có thể sử dụng hàm

          // Using location.href property
window.location.href = "/blog";

// Using location.assign() method
window.location.assign("/blog");

// Using location.replace() method
window.location.replace("/blog");

        

Ví dụ này, tôi sẽ đợi trong 5 giây và sau đó chuyển hướng đến một URL mới. Thời gian là hoàn toàn có thể tùy chỉnh. Bạn có thể đợi bất kỳ khoảng thời gian nào.

          setTimeout(() => {
    window.location.replace("https://www.example.com");
}, 5000);
        

Hàm

          // Using location.href property
window.location.href = "/blog";

// Using location.assign() method
window.location.assign("/blog");

// Using location.replace() method
window.location.replace("/blog");

        

Bên trong hàm gọi lại, tôi đang sử dụng phương thức

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

Bởi vì nó sẽ không tạo ra một mục mới trong lịch sử phiên cho trang trước. Nếu người dùng nhấp vào nút "Quay lại" và quay lại trang trước, nó sẽ tự động chuyển hướng sau 5 giây.Back" button and goes back to the previous page, it will again redirect after 5 seconds automatically.

Đó là lý do tại sao bạn nên sử dụng phương thức

          window.location.href = "https://www.example.com";
        

Chuyển hướng đến một trang trong JavaScript trên nút Nhấp vào

Hầu hết thời gian chúng tôi sử dụng JavaScript chuyển hướng ở phía máy khách dựa trên các hành động của người dùng. Ví dụ: nếu người dùng nhấp vào nút, bạn sẽ thực hiện một số chức năng và sau đó chuyển hướng đến một trang mới.

Bạn có thể làm điều này bằng cách nghe sự kiện nhấp chuột. Bên trong chức năng gọi lại, bạn có thể thực hiện bất kỳ hành động nào bạn muốn thực hiện và cuối cùng, bạn sẽ chuyển hướng.

          const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    // Perform other functions here...

    // Using location.href property
    window.location.href = "https://www.example.com/dashboard";

    // Using location.assign() method
    window.location.assign("https://www.example.com/dashboard");

    // Using location.replace() method
    window.location.replace("https://www.example.com/dashboard");
});

        

Tôi đang nhận nút HTML bằng phương pháp

          // Using location.href property
window.location.href = "/blog";

// Using location.assign() method
window.location.assign("/blog");

// Using location.replace() method
window.location.replace("/blog");

        

Cách chuyển hướng trong JavaScript trên tải trang

Nếu bạn không muốn hiển thị nội dung của một trang cụ thể, bạn sẽ chuyển hướng người dùng của mình ngay sau khi tải trang. Đối với điều đó, bạn không cần phải làm bất cứ điều gì thêm.

Trong tình huống này, bạn nên sử dụng phương thức

          window.location.href = "https://www.example.com";
        

          // Using location.href property
window.location.href = "/blog";

// Using location.assign() method
window.location.assign("/blog");

// Using location.replace() method
window.location.replace("/blog");

        

          // Using location.href property
window.location.href = "/blog";

// Using location.assign() method
window.location.assign("/blog");

// Using location.replace() method
window.location.replace("/blog");

        

Nếu bạn không muốn sử dụng tệp JavaScript riêng cho việc này, bạn có thể viết mã sau bên trong thẻ

          const url = 'https://www.example.com?username=john37';

// Using location.href property
window.location.href = url;

// Using location.assign() method
window.location.assign(url);

// Using location.replace() method
window.location.replace(url);
        

          // Using location.href property
window.location.href = "/blog";

// Using location.assign() method
window.location.assign("/blog");

// Using location.replace() method
window.location.replace("/blog");

        

          <script>
    window.location.replace("https://www.example.com/blog");
</script>
        

Tôi đang sử dụng phương thức Vị trí.replace () vì tôi không muốn người dùng của mình đến trang này một lần nữa bằng cách nhấp vào nút "Quay lại" trong trình duyệt.

Nếu họ quay lại trang đó, nó sẽ lại chuyển hướng. Nó sẽ là một trải nghiệm người dùng tồi.

Cũng đọc: Tự gọi các chức năng trong JavaScript - Tại sao bạn nên sử dụng? Self Invoking Functions in JavaScript - Why Should You Use?

Chuyển hướng trên tải trang trong HTML

Khi bạn muốn chuyển hướng một trang trên tải trang, bạn có thể thực hiện việc này bằng HTML. Khi chúng tôi sử dụng thẻ

          const url = 'https://www.example.com?username=john37';

// Using location.href property
window.location.href = url;

// Using location.assign() method
window.location.assign(url);

// Using location.replace() method
window.location.replace(url);
        

          const url = 'https://www.example.com?username=john37';

// Using location.href property
window.location.href = url;

// Using location.assign() method
window.location.assign(url);

// Using location.replace() method
window.location.replace(url);
        

Thẻ meta này cũng không giữ lịch sử phiên cho trang trước trong trình duyệt. Người dùng không thể quay lại trang trước bằng cách nhấp vào nút "Quay lại"."Back" button.

Chúng tôi có thể chỉ định URL mục tiêu của chúng tôi trong thuộc tính nội dung. Đây là mã sau bạn phải thêm bên trong phần tử

          // Using location.href property
window.location.href = "/blog";

// Using location.assign() method
window.location.assign("/blog");

// Using location.replace() method
window.location.replace("/blog");

        

          <meta http-equiv="refresh" content="0; URL=https://www.example.com">
        

Có 2 thuộc tính trong thẻ

          const url = 'https://www.example.com?username=john37';

// Using location.href property
window.location.href = url;

// Using location.assign() method
window.location.assign(url);

// Using location.replace() method
window.location.replace(url);
        

          const url = 'https://www.example.com?username=john37';

// Using location.href property
window.location.href = url;

// Using location.assign() method
window.location.assign(url);

// Using location.replace() method
window.location.replace(url);
        

          const url = 'https://www.example.com?username=john37';

// Using location.href property
window.location.href = url;

// Using location.assign() method
window.location.assign(url);

// Using location.replace() method
window.location.replace(url);
        

          const url = 'https://www.example.com?username=john37';

// Using location.href property
window.location.href = url;

// Using location.assign() method
window.location.assign(url);

// Using location.replace() method
window.location.replace(url);
        

Phần đầu tiên chứa độ trễ thời gian. Tôi đang thiết lập 0 cho thời gian trễ. Bởi vì tôi muốn chuyển hướng mà không phải chờ đợi.

Nếu bạn muốn đợi trong vài giây, bạn có thể chỉ định thời gian đó ở đây. Ví dụ, để chờ 5 giây, bạn sẽ đặt nó thành 5.

Phần thứ hai chứa URL mục tiêu nơi tôi muốn chuyển hướng. Khi các trình duyệt tìm thấy thẻ meta này, chúng sẽ tự động chuyển hướng đến trang được chỉ định.

Bạn nên sử dụng phương pháp nào?

Các kỹ thuật mà chúng ta đã thấy trong bài viết này trông rất giống nhau. Nhưng có một chút khác biệt giữa họ. Do đó, trước khi chọn một trong số họ, bạn nên giữ sự khác biệt này trong tâm trí.

Giữa phương thức

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

Nếu bạn muốn quay lại trang trước sau khi chuyển hướng, bạn có thể sử dụng bất kỳ một trong số đó. Nhưng nếu bạn không muốn thêm một mục vào lịch sử phiên trong trình duyệt, bạn phải sử dụng phương thức

          window.location.href = "https://www.example.com";
        

Đặc biệt nếu bạn chuyển hướng đến URL mới ngay khi tải trang, bạn nên sử dụng phương thức

          window.location.href = "https://www.example.com";
        

Nhưng khi họ quay lại trang cũ, nó sẽ lại chuyển hướng đến trang mới. Vì lý do này, người dùng sẽ không thể sử dụng nút "Quay lại" của trình duyệt. Nó cũng là một trải nghiệm người dùng rất tệ.Back" button. It is also a very bad user experience.

Sự kết luận

Bạn đã tìm hiểu về thuộc tính

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

          window.location.href = "https://www.example.com";
        

Mặc dù các chức năng của chúng là như nhau, nhưng chúng cũng có một số khác biệt. Đó là lý do tại sao chúng phù hợp với các tình huống khác nhau. Tôi đã chỉ cho bạn nơi bạn nên sử dụng phương pháp nào.

Tôi hy vọng bài viết này là hữu ích cho bạn và bạn đã hiểu chủ đề này. Bất cứ khi nào bạn cần chuyển hướng URL sang trang khác bằng JavaScript, bạn có thể sử dụng các kỹ thuật này.redirect an URL to another page using JavaScript, you can use these techniques.

Làm cách nào để chuyển hướng đến một trang khác mà không thay đổi URL?

Bạn có thể chuyển hướng một trang sang trang khác bằng cách sử dụng JavaScript làm thế nào không?

Làm cách nào để sử dụng JavaScript để sửa đổi URL mà không cần tải lại trang?

Làm thế nào để bạn chuyển hướng trang hiện tại đến một URL mới trong JavaScript?