Sự khác nhau giữa document.location.href và document.location là gì?

Question

Sự khác nhau giữa document.location.href và document.location là gì?

Có giống nhau trên các trình duyệt không?

Answer 1

document.location là một từ đồng nghĩa với window.location đã không được chấp nhận trong gần như miễn là JavaScript đã tồn tại. Không sử dụng nó.

location là đối tượng có cấu trúc, với các thuộc tính tương ứng với các phần của URL. location.href là toàn bộ URL trong một chuỗi. Việc gán một chuỗi cho một trong hai được xác định để gây ra cùng một loại điều hướng, do đó hãy chọn lựa của bạn.

(tôi xem xét bằng văn bản cho location.href= something là nhỉnh hơn như nó hơi rõ ràng hơn về những gì nó làm. Bạn thường muốn tránh chỉ location= something như có vẻ sai lạc như một nhiệm vụ khác nhau. window.location= something là tốt mặc dù.)

Answer 2

document.location không được hỗ trợ cho window.location, có thể được truy cập bởi chỉ vị trí, vì nó là đối tượng chung.

Đối tượng vị trí có nhiều thuộc tính và phương pháp. Nếu bạn cố gắng sử dụng nó như một chuỗi thì nó hoạt động như location.href.

Answer 3

document.location là một đối tượng, trong khi document.location.href là một chuỗi. Nhưng trước đây có một phương pháp toString, vì vậy bạn có thể đọc từ nó như thể nó là một chuỗi và nhận được cùng một giá trị như document.location.href.

Trong một số trình duyệt - những trình duyệt hiện đại nhất, tôi nghĩ - bạn cũng có thể gán cho document.location như thể đó là một chuỗi. Tuy nhiên, theo số Mozilla documentation, tốt hơn nên sử dụng window.location cho mục đích này vì document.location ban đầu chỉ đọc và do đó có thể không được hỗ trợ rộng rãi.

Answer 4

document.location là đối tượng chứa thuộc tính cho vị trí hiện tại.

Thuộc tính href là một trong các thuộc tính này, chứa URL đầy đủ, tức là tất cả các thuộc tính khác được đặt cùng nhau.

Một số trình duyệt cho phép bạn gán URL cho đối tượng location và hoạt động như thể bạn đã gán cho thuộc tính href. Một số trình duyệt khác khó tính hơn và yêu cầu bạn sử dụng thuộc tính href. Do đó, để làm cho mã hoạt động trong tất cả các trình duyệt, bạn phải sử dụng thuộc tính href.

Cả hai đối tượng window và document đều có đối tượng location. Bạn có thể đặt URL bằng cách sử dụng window.location.href hoặc document.location.href. Tuy nhiên, một cách hợp lý đối tượng document.location phải là chỉ đọc (vì bạn không thể thay đổi URL của tài liệu; thay đổi URL tải tài liệu mới), vì vậy để an toàn, bạn nên sử dụng window.location.href khi bạn muốn đặt URL.

Answer 5

typeof document.location; // 'object' 
typeof document.location.href; // 'string' 

Thuộc tính href là một chuỗi, trong khi document.location chính nó là một đối tượng.

Answer 6

Tính đến 14 Tháng Sáu 2013 (HTML5), có một sự khác biệt đáng kể

Browser : Chrome 27.X.X

Tài liệu tham khảo: document.location, window.location (MDN)

---

document.loca tion

type: Object

Đối tượng khi được gọi bởi chính nó document.location trở origin + pathname thuộc tính của nó nối vào nhau.

Để chỉ lấy URL làm chuỗi, thuộc tính chỉ đọc document.URL có thể được sử dụng.

ancestorOrigins: DOMStringList 
assign: function() { [native code] } 
hash: "" 
host: "stackoverflow.com" 
hostname: "stackoverflow.com" 
href: "http://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location?rq=1" 
origin: "http://stackoverflow.com" 
pathname: "https://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location" 
port: "" 
protocol: "http:" 
reload: function() { [native code] } 
replace: function() { [native code] } 
search: "?rq=1" 
toString: function toString() { [native code] } 
valueOf: function valueOf() { [native code] } 

---

document.location.href

type: string

http://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location?rq=1 

Answer 7

Dưới đây là một ví dụ về ý nghĩa thực tiễn của sự khác biệt và làm thế nào nó có thể cắn bạn nếu bạn không nhận ra nó (document.location là một đối tượng và document.location.href là một chuỗi):

Chúng tôi sử dụng MonoX Social CMS (http://mono-software.com) phiên bản miễn phí tại http://social.ClipFlair.net và chúng tôi muốn thêm thanh ngôn ngữ WebPart tại một số trang để bản địa hóa chúng, nhưng tại một số trang khác (ví dụ: tại các cuộc thảo luận), chúng tôi không muốn sử dụng nội địa hóa. Vì vậy, chúng tôi đã tạo hai trang chính để sử dụng tại tất cả các trang .aspx (ASP.net) của chúng tôi, trong trang đầu tiên chúng tôi có thanh ngôn ngữ WebPart và một trang khác có đoạn mã sau để xóa/lng/el-GR, v.v. URL và hiển thị mặc định (tiếng Anh trong trường hợp của chúng tôi) ngôn ngữ thay vì đối với những trang

<script> 
    var curAddr = document.location; //MISTAKE 
    var newAddr = curAddr.replace(new RegExp("/lng/[a-z]{2}-[A-Z]{2}", "gi"), ""); 
    if (curAddr != newAddr) 
    document.location = newAddr; 
</script> 

Nhưng mã này không hoạt động, thay thế chức năng chỉ trả Undefined (không phải ngoại lệ ném) nên nó sẽ cố gắng để di chuyển đến nói x/lng/el-GR/undefined thay vì truy cập url x. Kiểm tra nó với trình gỡ rối của Mozilla Firefox (phím F12) và di chuyển con trỏ qua biến curAddr nó đã hiển thị nhiều thông tin thay vì một số giá trị chuỗi đơn giản cho URL. Chọn Xem từ cửa sổ bật lên mà bạn có thể thấy trong ngăn xem, nó đang viết "Vị trí -> ..." thay vì "..." cho url. Điều đó khiến tôi nhận ra đó là một đối tượng

Người ta có thể dự kiến ​​thay thế ném một ngoại lệ hoặc một cái gì đó, nhưng bây giờ tôi nghĩ vấn đề là nó đang cố gắng gọi một số phương pháp "thay thế" không tồn tại trên Đối tượng URL dường như chỉ trả lại "không xác định" trong Javascript.

Mã đúng trong trường hợp đó là:

<script> 
    var curAddr = document.location.href; //CORRECT 
    var newAddr = curAddr.replace(new RegExp("/lng/[a-z]{2}-[A-Z]{2}", "gi"), ""); 
    if (curAddr != newAddr) 
    document.location = newAddr; 
</script>