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 đi đến trang

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 đến trang

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 đi đến trang

ASYNC JavaScript trong 30 phút (CALLBACK, PROMISES, ASYNC AWAIT)

alt

  • Tác giả: HoleTex
  • Ngày đăng: 2021-11-28
  • Đánh giá: 4 ⭐ ( 9566 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Học ASYNC JavaScript trong 30 phút (CALLBACK, PROMISES, ASYNC AWAIT)

    Xử lý bất đồng bộ trong JS là một công việc chúng ta sẽ phải đối mặt rất thường xuyên. Và hôm nay chúng ta sẽ cùng nhau tìm hiểu về các cách khác nhau để xử lý bất đồng bộ trong JS, cũng như là tìm hiểu về các vấn đề khi xử lý bất đồng bộ với Callback như là Callback Hell
    – Callback
    – Promises
    – Async/Await

    📢 Liên hệ với mình tại:
    Facebook: https://www.facebook.com/holetex/​
    Instagram: https://www.instagram.com/holetex/
    Github: https://github.com/holetexvn
    Facebook cá nhân: https://www.facebook.com/minhtung09/
    Email: holetex@outlook.com

    async js holetex callback asyncawait promises

Javascript là gì? Kiến thức tổng quan về Javascript từ A – Z

  • Tác giả: fptcloud.com
  • Đánh giá: 3 ⭐ ( 9345 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đang tò mò về Javascript? Bạn không biết đây là chương trình gì? Những thông tin ngay sau đây sẽ giúp cho bạn hiểu thêm về ngôn ngữ lập trình thông dụng hiện nay.

Nên đặt File Javascript Ở Đâu Trong Trang HTML?

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 3 ⭐ ( 3744 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu nên đặt vị trí file javascript ở đâu tối ưu nhất và các thuộc tính async, defer cho trang web nha.

Cách chuyển trang trong JavaScript dân lập trình phải biết

  • Tác giả: vn.got-it.ai
  • Đánh giá: 3 ⭐ ( 2819 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn chưa biết cách chuyển trang trong JavaScript? Hãy cùng Got It tham khảo bài viết sau đây để không phải gặp khó khăn khi thực hiện điều này bạn nhé!

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

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

Cách tạo một nút chuyển hướng đến một trang khác bằng jQuery hoặc chỉ Javascript

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 2756 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Không có tập lệnh:

    Tốt hơn nữa, vì bạn chỉ đang đi đâu…

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

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 2202 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.

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  DROP TABLE (Transact-SQL) - Máy chủ SQL - thả tạo bảng sql