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

Bạn cần chuyển hướng người dùng đến một trang khác bằng JavaScript và DOM. Chuyển hướng thậm chí có thể cần phải có điều kiện, chẳng hạn như sau khi bạn thực hiện lệnh gọi API để thêm người dùng vào danh sách gửi thư và người dùng đã được thêm thành công

    if [api.response.success] {
        // Need some way to take the user to a new page here
    } else {
        // Show API response error message
    }

Nói chung, phản hồi HTTP là tùy chọn tốt nhất để chuyển hướng, với các phần tử HTML là tùy chọn tốt thứ hai, nhưng có lẽ không có sẵn cho bạn hoặc chúng không phù hợp với trải nghiệm người dùng mà bạn đang cố tạo

Giải pháp

Điều hướng đến một trang mới có thể được thực hiện bằng cách sử dụng window.location.assign[]

    if [api.response.success] {
        // Redirect to success page
        window.location.assign["//yourdomain.com/success"];
    } else {
        // Show API response error message
    }

Bằng cách sử dụng assign[], người dùng sẽ có thể quay lại trang đích bằng nút “quay lại” vì điều này không thay đổi lịch sử của trình duyệt

Một giải pháp thay thế, sẽ thay thế trang hiện tại trong lịch sử trình duyệt giống như chuyển hướng HTTP, là sử dụng

    if [api.response.success] {
        // Redirect to success page
        window.location.assign["//yourdomain.com/success"];
    } else {
        // Show API response error message
    }

    if [api.response.success] {
        // Redirect to success page
        window.location.replace["//yourdomain.com/success"];
    } else {
        // Show API response error message
    }

Giải pháp này có thể không lý tưởng cho những thứ như trang đích danh sách gửi thư hoặc bất kỳ trang nào mà điều quan trọng là phải duy trì hoạt động của nút “quay lại” vì điều này sẽ thay thế lịch sử của người dùng. Để duy trì hành vi của nút “quay lại”, thay vào đó hãy sử dụng ________ 9

Để thông báo cho các công cụ tìm kiếm và khách truy cập trang web rằng trang web của bạn đã được chuyển vĩnh viễn đến một vị trí mới với nội dung tương đương, hãy sử dụng chuyển hướng 301. Mã “301” được hiểu là “đã di chuyển vĩnh viễn”. [Tìm hiểu thêm về Mã trạng thái HTTP]

Cách đơn giản nhất để chuyển hướng đến một URL khác là sử dụng thẻ HTML với tham số http-equiv được đặt thành “làm mới”. Thuộc tính nội dung đặt độ trễ trước khi trình duyệt chuyển hướng người dùng đến trang web mới. Để chuyển hướng ngay lập tức, hãy đặt tham số này thành “0” giây cho thuộc tính nội dung

Nếu bạn muốn chuyển hướng của mình diễn ra trong thời gian chính xác, chỉ cần chỉ định tham số ưa thích của bạn [tính bằng giây] cho nội dung. Hãy xem xét một ví dụ, trong đó chúng tôi đặt "7" giây làm thời gian chuyển hướng

Một số trình duyệt không hiển thị

Một số trình duyệt cũ không làm mới chính xác khi bạn thêm liên kết nhanh. Trong trường hợp đó, bạn có thể thêm một liên kết neo để cho phép người dùng theo dõi

Bạn có thể đã gặp phải trường hợp khi bạn nhấp vào một URL để đến trang X nhưng bên trong bạn được chuyển hướng đến một trang Y khác. Nó xảy ra do chuyển hướng trang

Khá đơn giản để thực hiện chuyển hướng trang bằng JavaScript ở phía máy khách. Để chuyển hướng khách truy cập trang web của bạn đến một trang mới, bạn chỉ cần thêm một dòng vào phần đầu của mình như sau

Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách sử dụng JavaScript để chuyển hướng trang HTML. Tại đây, chúng tôi sẽ chuyển hướng đến trang chủ

Cửa sổ. đối tượng vị trí chứa vị trí hiện tại hoặc thông tin URL. Chúng tôi có thể chuyển hướng người dùng đến một trang web khác bằng các thuộc tính của đối tượng này. cửa sổ. vị trí có thể được viết mà không có cửa sổ tiền tố

Chúng tôi sử dụng các thuộc tính sau của cửa sổ. đối tượng vị trí để chuyển hướng người dùng đến một trang web khác -

• cửa sổ. vị trí. href- nó trả về URL [href] của trang hiện tại

• cửa sổ. vị trí. replace[]- nó thay thế tài liệu hiện tại bằng tài liệu mới

• cửa sổ. vị trí. gán[] tải một tài liệu mới

Các cú pháp dưới đây được sử dụng để chuyển hướng đến một trang web khác. Chúng tôi bỏ qua tiền tố cửa sổ và chỉ sử dụng vị trí trong tất cả các ví dụ về chương trình. Bạn có thể thử chạy các chương trình bằng tên đầy đủ tôi. e. cửa sổ. vị trí

cú pháp

location.href = "url";
location.replace["url"];
location.assign["url"];

Thông số

url- đó là URL của trang web mới

Chuyển hướng sử dụng vị trí. href

Cửa sổ. vị trí. thuộc tính href có thể được sử dụng để chuyển hướng đến một trang khác. Chúng ta có thể sử dụng các cú pháp sau để chuyển hướng -

Window.location.href = "url";
Location.href = "url";
location = "url";

Các cú pháp được đề cập ở trên tương đương với nhau, bạn có thể sử dụng bất kỳ cú pháp nào cho mục đích chuyển hướng người dùng đến một trang web khác

Hãy hiểu với sự trợ giúp của một ví dụ hoàn chỉnh -

Thí dụ

Trong ví dụ bên dưới, chúng tôi chuyển hướng người dùng đến một trang web khác [https. //www. totorix. com] sử dụng vị trí. phương thức gán [url]

Làm cách nào để chuyển hướng trang HTML sang trang HTML khác bằng nút?

Làm cách nào để chuyển hướng đến một trang HTML khác trong JavaScript khi nhấp vào nút?

Làm cách nào để chuyển hướng đến trang HTML cục bộ trong JavaScript?

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