4 cách JavaScript có thể chuyển hướng hoặc điều hướng đến một url hoặc làm mới trang 🔀 – javascript chuyển hướng url mới

Window.location có nhiều phương thức để giúp bạn làm mới, tải lại và thay đổi trang hiện tại. Bạn có thể sử dụng kỹ thuật này từ JavaScript của mình để kích hoạt cập nhật trang.

Bạn đang xem : javascript chuyển hướng url mới

JavaScript Chuyển hướng đến URL
JavaScript Chuyển hướng đến URL

Nhiều URL được chuyển hướng đến các vị trí mới, thường sử dụng cấu hình máy chủ và thuộc tính tiêu đề HTTP. Tuy nhiên, có nhiều trường hợp bạn có thể cần sử dụng JavaScript để chuyển hướng hoặc điều hướng đến một URL khác.

Có nhiều lý do khiến bạn có thể muốn chuyển hướng đến một trang hoặc URL mới.

  1. Bạn đã thay đổi tên miền hoặc cấu trúc URL của mình
  2. Bạn muốn chuyển hướng dựa trên ngôn ngữ, vị trí hoặc chế độ xem
  3. Người dùng đã gửi biểu mẫu và bạn muốn hướng họ đến trang tiếp theo theo trình tự
  4. Trang có thể yêu cầu ủy quyền
  5. Chuyển hướng từ HTTP sang HTTPS
  6. Bạn cần kích hoạt một trang mới trong một ứng dụng trang duy nhất

Đối tượng window.location quản lý địa chỉ được tải bởi trình duyệt. Thao tác với đối tượng vị trí là cách bạn quản lý chuyển hướng trang bằng JavaScript. Đối tượng vị trí có các thuộc tính và phương pháp để kích hoạt chuyển hướng trang JavaScript.

Các thuộc tính của đối tượng vị trí mà bạn cần tự làm quen là:

  1. băm : được sử dụng cho các ứng dụng một trang và các trang web một trang
  2. máy chủ lưu trữ : tên miền của URL
  3. tên máy chủ : tương tự như máy chủ lưu trữ
  4. href: URL đầy đủ
  5. origin : giao thức và miền của URL
  6. tên đường dẫn : slug URL hoặc trang sau nguồn gốc
  7. cổng : nếu một cổng được bao gồm trong giao thức
  8. URL: http, https, ftp, ftps, v.v.

Mỗi thuộc tính trong số này là các chuỗi và hỗ trợ tất cả các phương thức chuỗi tiêu chuẩn như thay thế, mà chúng tôi sẽ sử dụng trong hướng dẫn này.

Các phương thức của đối tượng vị trí là:

  1. gán: đặt đối tượng vị trí thành URL mới
  2. tải lại : buộc trang tải lại bằng cùng một URL
  3. < li> Replace: kích hoạt chuyển hướng mà chúng ta sẽ khám phá sâu hơn

  4. tìm kiếm : cho phép bạn thẩm vấn Chuỗi truy vấn
  5. Gán và thay thế trông giống nhau, nhưng có các ràng buộc khác. Phương thức gán tải tài nguyên tại URL mới và lưu mục nhập trước đó trong lịch sử điều hướng của trình duyệt.

    Điều này có nghĩa là người dùng có thể nhấn nút quay lại và chuyển đến trang gốc.

    Phương thức thay thế thực hiện điều tương tự, ngoại trừ tài nguyên gốc hoặc tài nguyên ‘hiện tại’ không được lưu lại trong lịch sử của trình duyệt.

    Điều này có nghĩa là người dùng không thể nhấn nút quay lại để chuyển đến trang gốc.

    Cả hai đều có thể không thành công nếu có các hạn chế về bảo mật. Ví dụ: tập lệnh của bên thứ ba không thể kích hoạt chuyển hướng. Đây là một điều tốt vì rất nhiều trang web sử dụng tập lệnh của bên thứ ba mà không xác minh mã của họ.

    Chuyển hướng đến một địa chỉ mới

    Khi bạn đã thay đổi địa chỉ, chẳng hạn như tên miền mới, bạn nên thực hiện chuyển hướng 301. Đây là nơi máy chủ gửi mã trạng thái HTTP là 301, với địa chỉ mới.

    Mã trạng thái 301 cho tác nhân người dùng biết: tức là trình duyệt hoặc trình thu thập thông tin tìm kiếm, có một địa chỉ mới. Điều này giống như khi bạn chuyển nhà và gửi thay đổi địa chỉ đến bưu điện. Thư của bạn đã được chuyển tiếp.

    Chuyển hướng 301 cho phép bạn duy trì lưu lượng truy cập và hy vọng xếp hạng công cụ tìm kiếm của bạn.

    Thông thường, bạn sẽ thực hiện việc này từ máy chủ. Đôi khi điều này là không thể và bạn cần phải sử dụng JavaScript chuyển hướng đến một URL.

    Điều này khá đơn giản, chỉ cần bao gồm một trong các đoạn mã sau:

      window.location.assign ("URL mục tiêu mới");
    //hoặc
    window.location.replace ("URL mục tiêu mới");  

    Tôi khuyên bạn nên sử dụng thay thế vì URL ban đầu không hợp lệ. Vì vậy, việc lưu lại nó trong lịch sử phiên của họ có thể khiến họ bối rối và vẫn kích hoạt chuyển hướng tự động.

    location.replace hữu ích cho bất kỳ trường hợp chuyển hướng 301 nào, kể cả khi bạn cần chuyển hướng từ HTTP sang HTTPS. Nhưng một cách ngắn gọn hơn để chuyển hướng từ HTTP sang HTTPS bằng JavaScript là đoạn mã sau:

      if (location.protocol! == "https:") {
     location.replace (window.location.href.replace ("http:", "https:"));
    }  

    Tôi khuyên bạn nên định cấu hình máy chủ của mình để gửi các tiêu đề chuyển hướng HTTP thích hợp vì chúng hiệu quả hơn nhiều. Điều này áp dụng cho cả địa chỉ mới và HTTP tới HTTPS.

    Sử dụng JavaScript để làm mới trang

    Đôi khi bạn muốn làm mới hoặc tải lại một trang theo chương trình bằng JavaScript. Thông thường, bạn sẽ đặt một nút hoặc phần tử hành động trên trang để người dùng bắt đầu làm mới. Tự động làm mới trang có thể là một trải nghiệm khó hiểu và chói tai cho người dùng của bạn, vì vậy hãy hạn chế tối đa chiến thuật đó.

    Phương thức location.reload tải lại tài liệu hiện tại, giống như người dùng nhấn F5 hoặc nút tải lại của trình duyệt.

    Cài đặt mặc định tải lại trang từ bộ nhớ cache của trình duyệt, nếu nó có sẵn. Bạn có thể buộc phương thức bỏ qua bộ nhớ cache cục bộ và truy xuất tài liệu từ mạng bằng cách chuyển true cho phương thức.

      location.reload ();
    // làm mới từ bộ nhớ cache
    //hoặc
    location.reload (true);
    // để buộc một yêu cầu mạng
     

    Tôi nghĩ quy tắc tốt nhất là sử dụng JavaScript để làm mới trang theo hành động của người dùng. Điều này thường phản ứng với trình xử lý sự kiện nhấp hoặc chạm. Tôi cũng nghĩ rằng trong trường hợp này, bạn cũng đang có ý định truy xuất từ ​​mạng, vì vậy bạn cũng sẽ muốn thực hiện hành động này.

    Đây là một ví dụ đơn giản hơn:

      var btn = document.querySelector (". btn-reload");
    
    btn.addEventListener ("click", function (e) {
     e.preventDefault ();
     location.reload (true);
    });  

    Bạn nên biết rằng, nếu người dùng đã cuộn trang, trình duyệt có thể không giữ lại vị trí cuộn hiện tại của họ. Hầu hết các trình duyệt hiện đại dường như xử lý tốt vấn đề này, nhưng điều này không phải lúc nào cũng đúng.

    Bạn đang làm mới một trang và nội dung và cấu trúc tài liệu rất có thể đã thay đổi so với những gì chúng được hiển thị ban đầu. Trong những trường hợp này, trình duyệt có thể không xác định được nơi đặt vị trí cuộn một cách đáng tin cậy. Trong những trường hợp này, trình duyệt không cuộn trang và vị trí là trên cùng.

    Ngoài ra, cuộc gọi này cũng có một biện pháp kiểm tra bảo mật để ngăn các tập lệnh bên ngoài sử dụng phương pháp này một cách độc hại. Điều này liên quan đến Chính sách xuất xứ giống nhau. Nếu điều này xảy ra, một DOMException được đưa ra với SECURITY_ERROR.

    Chuyển hướng khi gửi biểu mẫu

    Một thời điểm khác mà việc sử dụng phương thức location.replace hữu ích là gửi biểu mẫu.

    Đây không phải là lựa chọn đúng 100%, nhưng nên được cân nhắc. Một ví dụ điển hình là đăng xuất khỏi giỏ hàng.

    Khi người dùng nhấp vào nút để gửi thanh toán, họ thường không quay lại giỏ hàng. Điều này có thể gây ra nhiều loại nhầm lẫn và có thể xảy ra các đơn đặt hàng trùng lặp.

    Để phản hồi lại giỏ hàng hoặc bất kỳ biểu mẫu nào đang được gửi, bạn cần thêm trình xử lý sự kiện nhấp chuột hoặc con trỏ để chặn hành động. Trong phương thức xử lý, bạn nên bao gồm trả về false để ngăn biểu mẫu được gửi đến máy chủ.

      submitBtn.addEventListener ("click", function (evt) {
     evt.preventDefault ();
     window.location.replace ("URL mục tiêu mới");
     trả về sai;
    });
     

    Bạn sẽ làm điều này bình thường khi tạo trình xử lý biểu mẫu phía máy khách, vì vậy đừng quên điều này khi bạn thêm mã JavaScript để chuyển hướng đến một trang mới khác.

    Chỉ là một lưu ý hữu ích cho quá trình này: Bạn có thể muốn bao gồm tham số queryString trong URL của mình để chuyển cùng tham chiếu đến trạng thái của người dùng. Điều này có thể giúp bạn hiển thị hoặc hiển thị URL mục tiêu mới.

    JavaScript Redirect trong một ứng dụng trang (SPA)

    Nguyên tắc cốt lõi của Ứng dụng web một trang (SPA) là những thứ đã từng tồn tại trên máy chủ giờ đã tồn tại trong trình duyệt. Một trong những trách nhiệm đó là quản lý chuyển hướng. Ví dụ: khi bạn thực hiện cuộc gọi AJAX tới một dịch vụ an toàn và không có mã thông báo ủy quyền hợp lệ. Dịch vụ sẽ trả về mã trạng thái 401. Khi nhận được mã trạng thái 401, ứng dụng sẽ chuyển hướng người dùng đến địa chỉ đăng nhập.

    Trong phát triển web cổ điển, yêu cầu AJAX sẽ là một yêu cầu trang hoặc đăng lại. Máy chủ nhận ra trạng thái trái phép và thực hiện chuyển hướng thích hợp phía máy chủ. Trong ASP.NET, chúng tôi thực hiện việc này với hàm response.redirect.

    Trong một SPA, mã của ứng dụng khách cần để quản lý chuyển hướng. Tôi đã gặp phải hai tình huống phổ biến; chuyển hướng đến một bên bên ngoài hoặc (máy chủ mã thông báo an toàn) STS hoặc đến chế độ xem đăng nhập của ứng dụng. Việc chuyển hướng nội bộ khá dễ dàng, hãy thay đổi tuyến đường của đoạn mã băm thành chế độ xem đăng nhập.

      window.location.hash = "#! login"; 

    Nếu bạn đã quen với các ứng dụng một trang, bạn sẽ nhận ra đây là cách sử dụng JavaScript để chuyển hướng đến một trang khác.

    Hãy nhớ rằng khi chuyển hướng đến một trang mới do mã xác thực cũ hoặc bị thiếu, rất có thể bạn đang sử dụng xác thực đang hoạt động và cần duy trì mã xác thực ở đâu đó, chẳng hạn như IndexedDB.

    Nếu bạn đang sử dụng xác thực thụ động, trang sẽ đăng trở lại máy chủ xác thực và mã thông báo được trả lại, thường là trong tiêu đề.

    Chuyển hướng đến một STS thường liên quan đến việc thay đổi địa chỉ của trình duyệt từ URL SPA sang URL xác thực. URL STS rất có thể nằm trên một miền, máy chủ, v.v. hoàn toàn khác

    Dù trường hợp có thể là vị trí phải thay đổi. Tôi bao gồm hầu hết các nhà phát triển, phản ứng đầu tiên là tìm kiếm phương pháp location.redirect.

    Nó không tồn tại.

    Để thay đổi địa chỉ của trình duyệt, bạn nên sử dụng thuộc tính location.href. Việc thay đổi giá trị này sẽ kích hoạt trình duyệt tải URL mới.

      window.location.href = myLoginUrl;  

    Bây giờ trình duyệt tải mục tiêu mới. Trong trường hợp này, người dùng đăng nhập bằng STS và quay lại ứng dụng đã được xác thực.

    Xác thực là một tình huống mà bạn có thể thấy mình cần phải chuyển hướng người dùng theo chương trình. Tất nhiên, có nhiều trường hợp khác mà bạn có thể cần phải chuyển hướng người dùng bên trong hoặc bên ngoài trong quá trình sử dụng ứng dụng bình thường.

    Tóm tắt

    Có những lý do khác nhau khiến bạn có thể cần chuyển hướng từ trang này sang trang khác. Cố gắng cấu hình những thứ này trên máy chủ càng nhiều càng tốt. Nhưng có nhiều trường hợp phổ biến mà bạn cần sử dụng JavaScript để thực hiện chuyển hướng trang.

    Đối tượng window.location có các thuộc tính và phương thức mà bạn có thể thao tác bằng JavaScript để chuyển hướng đến các URL khác nhau. Location.replace và location.assign có thể rất hữu ích. Phương thức thay thế giữ lịch sử phiên sạch sẽ và phương thức gán cho phép người dùng theo dõi lại lịch sử URL.


Xem thêm những thông tin liên quan đến chủ đề javascript chuyển hướng url mới

Hash Change Event in Javascript (onhashchange)

alt

  • Tác giả: dcode
  • Ngày đăng: 2018-01-24
  • Đánh giá: 4 ⭐ ( 6947 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: By using the ‘onhashchange’ event in Javascript, you will be able to take action whenever the value of the hash ” in the URL changes – this makes it quite easy to implement single page websites or applications.

    In this video we explore how to use this event, as well as getting the value of the hash from the URL.

    For your reference:
    https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange

    If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!

Thay đổi URL và chuyển hướng bằng jQuery

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 6918 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Như đã đề cập trong các câu trả lời khác, bạn không cần jQuery để làm…

Điều hướng trang (Redirect) trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 9356 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Điều hướng trang (Redirect) trong JavaScript – Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Google Chrome chặn chuyển hướng JavaScript với các đường dẫn

  • Tác giả: thanhnien.vn
  • Đánh giá: 3 ⭐ ( 4850 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Google Chrome đã có một tính năng mới giúp tăng tính bảo mật khi nhấp vào các liên kết trang web để mở trong cửa sổ hoặc tab mới.

Điều hướng trang (Redirect) trong JavaScript

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 3842 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có thể gặp tình huống khi bạn click vào một URL để tới trang X nhưng bạn được điều hướng tới trang Y. Nó xảy ra là do Page Redirection – Điều hướng lại trang. Khái niệm này khác với: JavaScript – Refresh trang.

JavaScript: Chuyển hướng

  • Tác giả: v1study.com
  • Đánh giá: 3 ⭐ ( 2237 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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 tra

Cách chuyển hướng đến một trang web khác bằng JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 5 ⭐ ( 2040 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách tạo Menu thả xuống HTML [+ Ví dụ] - html ngày thả xuống