Hướng dẫn này giải thích cách lấy URL hiện tại trong javascript. Ngoài ra, nó giải thích cách lấy các phần khác nhau của URL một cách riêng biệt.

Bạn đang xem : javascript lấy url hiện tại

URL là bộ định vị tài nguyên thống nhất và URL hiện tại hiển thị địa chỉ của trang web.

Bạn có thể lấy URL hiện tại trong javascript bằng câu lệnh window.location.href .

Trong hướng dẫn này, bạn sẽ tìm hiểu các phương pháp khác nhau có sẵn để lấy URL hiện tại bằng Javascript.

Nếu bạn đang gấp…

Bạn có thể sử dụng đoạn mã dưới đây để lấy URL hiện tại trong javascript và đăng nhập nó vào bảng điều khiển.

  console.log (window.location.href);  

Khi kiểm tra bảng điều khiển, bạn sẽ thấy URL hiện tại của trang được in như hình bên dưới.

Đầu ra

  https://www.jsowl.com/how-to-get-current-url-in-javascript  

Nếu bạn muốn hiểu chi tiết, hãy đọc tiếp…

Một URL chứa các phần khác nhau trong đó. Chẳng hạn như miền, cổng, đường dẫn và các tham số. Hãy xem chi tiết về cấu trúc URL với một URL mẫu.

Để sử dụng JQuery để lấy URL hiện tại, hãy đọc Cách lấy URL hiện tại trong JQuery?

URl Strucuture và URL mẫu

Cú pháp bên dưới hiển thị cấu trúc của URL.

Cú pháp

  & lt; protocol & gt; // & lt; domain & gt;: & lt; port & gt; / & lt; path & gt; / & lt; query & gt; & lt; hash & gt;  
  • giao thức - http hoặc https - Biểu thị giao thức mạng
  • domain - Biểu thị tên trang web của bạn. Ở đây, nó là jsowl.com
  • port - Số cổng mà giao tiếp diễn ra với máy chủ web. Giá trị phổ biến nhất là 8080 cho kết nối http 443 cho kết nối https . 443 là cổng mặc định của lược đồ.
  • path - Biểu thị đường dẫn của trang hiện tại trong trang web. Đường dẫn là how-to-get-current-url-in-javascript / cho trang này.
  • truy vấn - Tham số bổ sung để chuyển các giá trị trong khi giao tiếp vào trang web. Ví dụ: bạn có thể sử dụng điều này để chuyển tên người dùng nếu bạn muốn cung cấp nội dung khác nhau cho mỗi người dùng
  • băm - Biểu thị ký tự liên kết của trang. Thông thường, điều này chứa bất kỳ tiêu đề phụ nào của trang. Khi bạn sử dụng phần này, trang sẽ được tự động cuộn đến phần này. URL hiện tại
  https://www.jsowl.com/how-to-get-current-url-in-javascript/  

Sử dụng window.location.href

Thuộc tính href của giao diện vị trí sẽ xâu chuỗi toàn bộ URL của trang hiện tại và trả về cho người gọi.

  window.location.href  

Bạn có thể tạo một phương thức javascript để trả về URL hiện tại và sử dụng lại phương thức này bất cứ khi nào bạn muốn biết URL hiện tại.

Tạo phương thức JS để trả về một URL

  hàm getURL () {
  trả về window.location.href;
}  

Phương thức này trả về URL hiện tại cho người gọi.

Nhận tên miền từ URL

Khi làm việc với các miền khác nhau, bạn có thể cần biết miền của URL hiện tại.

Thuộc tính tên máy chủ của giao diện vị trí trả về tên miền của URL hiện tại.

Sử dụng câu lệnh dưới đây để đăng nhập tên miền trong bảng điều khiển.

  console.log (window.location.hostname)  

Đầu ra

  jsowl.com  

Lấy đường dẫn URL hiện tại

Khi làm việc với các ứng dụng web có các trang khác nhau, bạn cần lấy đường dẫn URL hiện tại để tùy chỉnh một số tùy chọn dựa trên trang.

Thuộc tính tên đường dẫn của giao diện vị trí trả về tên đường dẫn của trang web hiện tại.

Sử dụng câu lệnh dưới đây để ghi đường dẫn trang web hiện tại trong bảng điều khiển.

  console.log (window.location.pathname)  

Đầu ra

  how-to-get-current-url-in-javascript /  

Đây là cách bạn có thể lấy đường dẫn của URL hiện tại trong JavaScript.

Nhận Tham số URL

Khi làm việc với các ứng dụng hỗ trợ tùy chỉnh hoặc bộ nhớ đệm, bạn cần chuyển các tùy chọn bằng cách sử dụng các thông số để tùy chỉnh nó.

Ví dụ: trang web này sử dụng plugin wp-rocket để lưu vào bộ nhớ đệm. Khi bạn muốn xem bất kỳ phiên bản chưa được lưu trữ nào của trang trên trang web này, thì bạn cần chuyển tham số npwprocket với giá trị 1 như hình dưới đây.

URL có tham số

  https://www.jsowl.com/how-to-get-current-url-in-javascript/?nowprocket=1  

Bây giờ để nhận các tham số URL trong Javascript, hãy sử dụng thuộc tính search trong giao diện vị trí.

Nó sẽ liệt kê tất cả các tham số được truyền vào URL bao gồm cả ? ở đầu.

  console.log (window.location.search)  

Đầu ra

 ? nowprocket = 1  

Nhận URL không có Tham số

Nếu bạn muốn nhận URL đầy đủ (Bao gồm tên miền và đường dẫn) mà không có tham số, thì không có thuộc tính rõ ràng nào.

Bạn cần lấy tên máy chủ và tên đường dẫn và nối nó.

Ví dụ: URL bên dưới bao gồm tên miền, đường dẫn và thông số.

URL mẫu

  https://www.jsowl.com/how-to-get-current-url-in-javascript/?nowprocket=1  

Để chỉ nhận URL có đường dẫn, hãy sử dụng mã sau.

  console.log (location.host + location.pathname)  

Bạn sẽ thấy kết quả bên dưới.

Đầu ra

  https://www.jsowl.com/how-to-get-current-url-in-javascript/  

Đây là cách bạn có thể lấy URL ngoại trừ các tham số trong JavaScript.

Nhận Cổng URL

Bạn cần lấy thông tin chi tiết về cổng từ một URL cho bất kỳ mục đích phát triển hoặc cấu hình nào.

Thuộc tính port của giao diện vị trí trả về Cổng của URL.

  console.log (window.location.port)  

Cổng mặc định của URL https 443 . Do đó, bạn sẽ thấy đầu ra là 443 . Tuy nhiên, nếu bạn đang sử dụng bất kỳ ứng dụng nào khác được lưu trữ trong các cấu hình máy chủ khác nhau, bạn sẽ thấy cổng thích hợp.

Đầu ra

  443  

Đây là cách bạn có thể lấy số cổng của URL hiện tại trong JavaScript.

Lấy Phần cuối của URL

Nếu bạn muốn lấy phần cuối cùng của URL cho bất kỳ mục đích lập trình nào, bạn có thể lấy phần đó bằng cách sử dụng phương thức chuỗi con.

Tìm chỉ mục cuối cùng của / và lấy phần bên phải của chuỗi con đã tách để lấy phần cuối cùng của URL.

  var url = window.location.href;

console.log (url.substring (url.lastIndexOf ('/') + 1));  

Đầu ra

  how-to-get-current-url-in-javascript /  

JSfiddle

Hướng dẫn này có sẵn trong này JSFiddle.

Kết luận

URL đóng một vai trò thiết yếu đối với bất kỳ trang web nào. Điều quan trọng là phải tìm URL hiện tại trong javascript để thao tác các trang web hiện tại.

Trong hướng dẫn này, bạn đã học cách lấy URL hiện tại trong Javascript. Bạn cũng đã học cách lấy các phần khác nhau của URL, chẳng hạn như tên miền, đường dẫn, số cổng và các tham số.

Các trình duyệt web hiện đại hỗ trợ cách duyệt theo thẻ. Bạn có thể làm theo các bước tương tự để lấy URL tab hiện tại bằng javascript.

Nếu bạn có bất kỳ câu hỏi nào, vui lòng bình luận bên dưới.

Bạn cũng có thể thích


Xem thêm những thông tin liên quan đến chủ đề javascript lấy url hiện tại

How To Get URL Parameters With JavaScript

  • Tác giả: codebubb
  • Ngày đăng: 2019-09-04
  • Đánh giá: 4 ⭐ ( 4250 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial, you'll learn how to get URL parameters with JavaScript. Get my free 32 page eBook of JavaScript HowTos 👉https://bit.ly/2ThXPL3

    Sometimes your website might contain a URL that has parameters in, especially if you have a form that users fill in that sends a GET request.

    You might, therefore, have a need to access these URL parameters (otherwise known as query strings) and it can be a bit tricky to parse the string by splitting it and location each individual parameter.

    In the video you'll see that is possible to construct an object that makes it easy to extract the URL parameters using JavaScript.

Lấy URL hiện tại bằng JavaScript?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 7783 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Sử dụng: window.location.href Như đã lưu ý trong các bình luận, dòng bên dưới hoạt động,…

Cách lấy URL hiện tại trong JavaScript

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

Lấy tham số đường dẫn hiện tại (current url) bằng javascript

  • Tác giả: web888.vn
  • Đánh giá: 4 ⭐ ( 2997 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

URL trong Laravel 8

  • Tác giả: toidicode.com
  • Đánh giá: 5 ⭐ ( 8807 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Laravel cung cấp cho chúng ta một helper function url, hàm này cho phép chúng ta tạo ra các links trên ứng dụng một cách đơn giản và linh hoạt.

Lấy URL hiện tại trong trang PHP

  • Tác giả: www.hoangweb.com
  • Đánh giá: 4 ⭐ ( 9869 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Đối tượng Location

  • Tác giả: www.hiepsiit.com
  • Đánh giá: 5 ⭐ ( 5131 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  Di chuyển trang web và thay đổi URL - cách thay đổi url của một trang web trong html

By ads_php