Computer >> Máy Tính >  >> Lập trình >> Javascript

JavaScript:Đi tới URL:Hướng dẫn đầy đủ

Giá trị window.location đại diện cho URL hiện tại mà bạn đang xem trong trình duyệt của mình. Bạn có thể thay thế giá trị này để chuyển đến một URL khác Trong JavaScript. Điều này rất hữu ích nếu bạn muốn chuyển hướng người dùng đến một trang khác. Bạn cũng có thể sử dụng phương thức gán () hoặc thay thế ().

Có một số lý do mà bạn có thể muốn chuyển hướng người dùng đến một trang web khác hoặc tên đường dẫn được cập nhật. Trong hầu hết các trường hợp, bạn có thể muốn chuyển hướng tùy thuộc vào ủy quyền của người dùng - liệu khách hàng có đăng nhập vào một trang web hay không. Trong bài viết này, chúng tôi xem xét cách thực hiện điều đó trong một trang web sử dụng JavaScript.

JavaScript Đi tới URL

API lịch sử trình duyệt JavaScript cho phép bạn truy cập một URL mới. Bạn có thể sử dụng các phương pháp sau để điều hướng đến một URL mới:

  • Gán một giá trị mới cho window.location.
  • Sử dụng phương thức window.assign ().
  • Sử dụng phương thức window.replace ().

Tất cả ba phương pháp này đều hoàn thành mục tiêu điều hướng đến một URL khác như nhau. Hãy xem xét từng phương pháp này.

Giá trị JavaScript window.location

Để điều hướng đến một URL mới, hãy sử dụng đối tượng vị trí từ API lịch sử của trình duyệt. Lịch sử phiên cho phép bạn gán lại đối tượng vị trí cho một URL mới hoặc sử dụng thuộc tính href trên cùng đối tượng đó.

Cú pháp cho cách tiếp cận này là:

window.location = "url";

“Url” đại diện cho URL bạn muốn người dùng truy cập. Khi dòng mã này chạy, một chuyển hướng JavaScript sẽ bắt đầu. Điều này thay đổi trang mà người dùng xem trong trình duyệt web của họ.

Hãy xem phương pháp này dưới dạng một ví dụ:

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ. 

const handleClick = (e) => {
      console.log("click")
      window.location = ('https://careerkarma.com') 
      // window.location.href = ('https://careerkarma.com')
      console.log(window.location)
    }

Khi hàm handleClick () chạy, mã của chúng tôi sẽ ghi một câu lệnh vào bảng điều khiển JavaScript. Sau đó, mã của chúng tôi sẽ chuyển hướng chúng tôi đến một URL mới.

JavaScript window.location.assign ()

Đối tượng vị trí có một phương thức chuyển hướng được gọi là giao (). Phương pháp này chỉ định URL hiện tại với URL được chỉ định và thêm nó vào ngăn xếp lịch sử.

Ngăn xếp lịch sử đại diện cho các trang bạn đã xem (hãy nghĩ về “mũi tên quay lại” cho phép bạn quay lại một trang).

Hãy xem xét cú pháp sau:

window.location.assign("url");

Không giống như ví dụ trước, chúng ta không cần gán bất kỳ giá trị nào cho một biến JavaScript (window.location). Thay vào đó, chúng tôi sử dụng một phương pháp để thay đổi trang web mà người dùng xem.

Ngăn xếp lịch sử là cách trình duyệt ghi nhớ vị trí nút quay lại hoặc nút chuyển tiếp sẽ đi đến.

Hãy xem một ví dụ đầy đủ về phương pháp này:

const handleClick = (e) => {
      console.log("click")
      window.location.assign('https://careerkarma.com');      
}

Nếu bạn muốn chuyển hướng đến một trang khác trên cùng một trang web, hãy sử dụng thuộc tính tên đường dẫn trên đối tượng vị trí:

const handleClick = (e) => {
      console.log("click")
      window.location.pathname = ('/newpage.html')
      console.log(window.location)
}

JavaScript window.location.replace ()

Bạn có thể kiểm soát xem người dùng có thể sử dụng nút quay lại để quay lại trang web trước đó hay không.

Sử dụng phương thức Replace (), bạn có thể điều hướng người dùng đến một trang web và ngăn họ quay lại trang trước. Mặt khác, phương thức gán () lưu trang bạn đã xem trước đó trong lịch sử trình duyệt của mình. Vì vậy, với gán (), bạn có thể xem trang cuối cùng mà bạn đã xem.

Hãy xem qua phương thức Replace ():

window.location.replace("url");

Giống như gán (), thay thế () là một phương thức. Phương thức này chấp nhận một đối số:A là URL mà bạn muốn trỏ người dùng đến.

Chúng ta có thể sử dụng phương thức Replace () với một hàm tùy chỉnh để thay đổi URL mà người dùng xem khi phương thức này được chạy:

const handleClick = (e) => {
      console.log("click")
      window.location.replace('https://careerkarma.com'); 
}

Sử dụng Repl.it này để chơi với các phương pháp khác nhau để chuyển hướng đến một URL bạn chọn. Bạn có thể sử dụng nút Chạy để đặt lại mã về mặc định.

Kết luận

Có ba cách để truy cập URL trong JavaScript:sử dụng phương thức window.location, window.location.assign () hoặc phương thức window.location.replace ().

Bạn có muốn tìm hiểu thêm về JavaScript? Hãy xem hướng dẫn Cách học JavaScript của chúng tôi. Hướng dẫn này chứa các mẹo hàng đầu về cách học JavaScript và danh sách các tài nguyên học tập toàn diện cho người mới bắt đầu và nhà phát triển trung cấp.