Làm thế nào để bạn có được url hiện tại với javascript?

Trong Javascript, đôi khi cần lấy URL của trang web hiện tại mà bạn đang truy cập. Có một số cách để làm điều này

Cách lấy URL hiện tại bằng Javascript

Nếu chúng tôi muốn lấy URL đầy đủ của trang web hiện tại, chúng tôi chỉ cần sử dụng window.location.href

// Shows us the current URL
let currentUrl = window.location.href;

Cách lấy URL tên miền hiện tại bằng Javascript

Nếu bạn chỉ muốn lấy tên miền hiện tại, không bao gồm bất kỳ trang nào, bạn có thể chạy phần sau trong Javascript

let currentDomain = window.location.origin;

Chẳng hạn, nếu bạn đang sử dụng https. //Google. com/page/search/go/, ở trên sẽ chỉ trả về https. //Google. com

Cách lấy đường dẫn sau tên miền bằng Javascript

Nếu bạn chỉ muốn lấy đường dẫn sau tên miền, hãy chạy như sau

let currentPath = window.location.pathname;

Mặc dù đây là những cách sử dụng phổ biến nhất cho window.location, nhưng cũng có một số thuộc tính hữu ích khác, chẳng hạn như

Để lấy URL hiện tại của trang bạn đang truy cập bằng JavaScript, hãy truy cập cửa sổ. địa điểm. thuộc tính href

window.location.href

Ngoài ra, bạn có thể truy cập URL hiện tại qua tài liệu. thuộc tính URL. Tuy nhiên, nó có một số thiếu sót mà tôi sẽ giải thích một chút

document.URL

Hãy nhìn kỹ hơn vào cửa sổ. đối tượng vị trí. Nó có các thuộc tính hữu ích khác với href trả về URL

cửa sổ. địa điểm

Như bạn đã biết trong phần giới thiệu, cửa sổ. đối tượng vị trí hữu ích vì bạn có thể truy xuất URL của trang hiện tại với nó

window.location.href

Nhân tiện, có thể thay đổi cửa sổ. thuộc tính đối tượng vị trí, chẳng hạn như URL

Cửa sổ. đối tượng vị trí cũng có các thuộc tính hữu ích khác. Trước khi truy cập các thuộc tính, hãy xem nhanh các phần URL

Cấu trúc URL

Hãy xem nhanh cấu trúc URL cơ bản để phân biệt các phần trong đó

• giao thức. Giao thức là “phần đầu tiên” của một URL. Nó chỉ định giao thức nào sẽ sử dụng để truy cập tài nguyên trên internet. Các giao thức bao gồm HTTP, HTTPS hoặc FTP
• tên miền phụ. Một tên miền có thể được chia thành các phần hợp lý, được gọi là tên miền phụ. Ví dụ phổ biến nhất là www, có nghĩa là tên miền (tự động) là một phần của tên miền phụ trên toàn thế giới. Các ví dụ tốt hơn về tên miền phụ là cửa hàng, blog hoặc ứng dụng. Ví dụ, ứng dụng. ví dụ. com, hoặc blog. ví dụ. com
• Tên miền. Tên miền là địa chỉ thực tế của trang web của bạn. Đó là máy chủ sở hữu tài nguyên của trang web của bạn. Ví dụ, ví dụ. com là một tên miền
• Hải cảng. Cổng là một phần tùy chọn của URL vì nó được đặt tự động. Đó là một số xác định “cổng” mà bạn muốn truy xuất tài nguyên qua đó
• Đường dẫn tập tin. Đường dẫn tệp giống như đường dẫn tệp trên máy tính của bạn. Trên một trang web, các trang web là các tệp trên máy chủ. Để truy cập một trang web cụ thể, bạn cần chỉ định đường dẫn đến trang đó trên máy chủ. Ví dụ: https. //www. ví dụ. com/máy tính. html
• Tham số truy vấn. Các tham số truy vấn có thể được chèn vào một URL để thực hiện một hành động như tìm kiếm trên máy chủ
• Miếng. Đoạn, hàm băm hoặc neo được sử dụng để chỉ định một phần của trang sẽ được truy cập. Ví dụ, ví dụ. com/blog/what-is-url#chapter1

Bây giờ bạn đã hiểu những gì tạo nên một URL

Trong JavaScript, bạn có thể sử dụng cửa sổ. đối tượng vị trí để truy cập các phần URL này. Hãy nhìn vào cửa sổ. thuộc tính vị trí gần hơn một chút

Nếu bạn không quen với URL, hãy nhớ đọc hướng dẫn toàn diện, URL là gì?

Truy cập các phần URL có cửa sổ. thuộc tính vị trí

Cửa sổ. đối tượng vị trí có các thuộc tính sau trong JavaScript

• href. Toàn bộ URL của trang hiện tại của bạn
• giao thức. Giao thức mà URL sử dụng
• chủ nhà. Tên máy chủ và cổng của một URL
• tên máy chủ. Tên máy chủ của một URL
• Hải cảng. Cổng của URL
• tên đường dẫn. Đường dẫn tệp trong URL
• Tìm kiếm. Các tham số truy vấn của URL
• băm. Đoạn hoặc neo của URL
• nguồn gốc. Sự kết hợp giữa giao thức và máy chủ của URL

Dưới đây là ví dụ về cách truy cập các thuộc tính này khi URL là https. //www. mã hóa. com/best-pixel-art-software/#photoshop

Để dễ nhìn hơn, đây là hình ảnh phóng to khi truy cập các thuộc tính URL

Bên cạnh việc lấy URL hiện tại của một trang, bạn có thể dễ dàng truy cập các phần của URL. Thay vì sử dụng biểu thức chính quy hoặc phương pháp phỏng đoán khác để phân tách chuỗi URL, bạn có thể sử dụng cửa sổ. thuộc tính vị trí để lợi thế của bạn. Đây là cách chính để hoạt động với các URL sử dụng JavaScript

Trước khi bạn tiếp tục, hãy nói về một tài liệu thay thế thường thấy. URL

Nhận URL hiện tại bằng tài liệu. URL

Một cách phổ biến khác để lấy URL hiện tại của một trang là truy cập thuộc tính URL của tài liệu

document.URL

không giống như cửa sổ. địa điểm. href, tài liệu. URL cung cấp cho bạn một chuỗi chỉ đọc đại diện cho URL của trang hiện tại. Vì vậy, nếu bạn không muốn thực hiện các thay đổi đối với chuỗi URL, thì việc sử dụng tài liệu có thể hợp lý hơn. URL trên cửa sổ. địa điểm. href

Nhưng vấn đề với tài liệu. Cách tiếp cận URL là nó có một số lỗi trong Firefox

Ví dụ: trong Firefox 12, tài liệu. URL không thay đổi khi thêm một liên kết vào cuối URL

Vì vậy, nếu bạn muốn chắc chắn 100% nhận được URL và tất cả các phần của nó, hãy sử dụng cửa sổ. địa điểm. href

Gói (lại

Cảm ơn vì đã đọc

Hôm nay bạn đã học cách lấy URL của trang hiện tại bằng JavaScript

Nói ngắn gọn, hãy sử dụng cửa sổ. địa điểm. href để truy cập URL của trang. Hãy nhớ rằng bạn cũng có thể trực tiếp sửa đổi thuộc tính này

Để có được chuỗi URL chỉ đọc, bạn có thể cân nhắc sử dụng tài liệu. URL. Nhưng hãy nhớ rằng nó có một số lỗi với Firefox

Làm cách nào để nhận URL hiện tại bằng chuỗi truy vấn trong JavaScript?

Bạn sẽ sử dụng lệnh nào để lấy URL hiện tại?