Làm cách nào chúng tôi có thể lấy URL của trang hiện tại bằng JavaScript?

Để lấy URL trang web hiện tại của trình duyệt, bạn cần lấy thuộc tính

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

2

Nhập mã sau vào bảng điều khiển trình duyệt của bạn và nhấn enter

var currentURL = window.location.href;

currentURL[];

Nếu bạn đang sử dụng trình soạn thảo trực tuyến như CodePen, bạn cần sử dụng

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

3 để trả về kết quả

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

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

2

// 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

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

5, nhưng cũng có một số thuộc tính hữu ích khác, chẳng hạn như

cửa sổ. địa điểm. thuộc tính href trả về href [URL] của trang hiện tại. Chúng tôi cũng có thể sử dụng cửa sổ. vị trí hoặc vị trí thay cho cửa sổ. địa điểm. href

Chúng tôi cũng có thể sử dụng tài liệu. tài liệuURI và tài liệu. thuộc tính URL

• tài liệu. documentURI trả về vị trí của tài liệu dưới dạng chuỗi

• tài liệu. URL trả về URL của tài liệu dưới dạng chuỗi

Hãy hiểu cách lấy URL hiện tại bằng JavaScript bằng cách sử dụng các thuộc tính trên với sự trợ giúp của các ví dụ về chương trình

Ví dụ 1 - Sử dụng cửa sổ. địa điểm. thuộc tính href

Trong ví dụ này, chúng tôi sử dụng cửa sổ. địa điểm. href để lấy URL hiện tại. Trong ví dụ dưới đây, bạn có thể thử sử dụng cửa sổ. vị trí hoặc vị trí thay cho cửa sổ. địa điểm. href

đầu ra

Chúng tôi thực thi mã trực tuyến. Khi bạn chạy đoạn mã trên, một thông báo cảnh báo hiển thị URL hiện tại của trang được hiển thị. Ngoài ra, trình duyệt sẽ hiển thị URL hiện tại của trang

URL is //tpcg1.tutorialspoint.com/root/84804/index.htm?v=1

URL trên là địa chỉ vị trí của hello. tệp html. Tùy thuộc vào nơi bạn đã lưu lời chào của mình. html, bạn có thể nhận được một URL khác. Bạn cũng có thể nhận được một loại URL khác khi chạy chương trình cục bộ

Khi bạn chạy chương trình cục bộ, bạn có thể nhận được URL hiện tại tương tự như bên dưới -

URL is file:///D:/JavaScript/index.html

Tôi đã lưu chỉ mục. html trong thư mục D. /Javascript

Ví dụ 2 – Sử dụng tài liệu. tài liệuURI

Trong ví dụ này, chúng tôi sử dụng tài liệu. documentURI để lấy URL hiện tại của tài liệu

đầu ra

Chúng tôi thực thi mã trực tuyến. Khi bạn thực thi đoạn mã trên, một thông báo cảnh báo hiển thị URL hiện tại của tài liệu. Và trình duyệt cũng sẽ hiển thị URL hiện tại

Để 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

________số 8

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ó

________số 8

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 để lấy URL trang hiện tại bằng JavaScript?

Làm cách nào để nhận các tham số URL hiện tại trong JavaScript?

Phương thức nào trả về URL của trang hiện tại?