getBoundingClientRect để phát hiện khả năng hiển thị

Question

Bối cảnh: Tôi hiện đang làm việc trên một dự án mà ứng dụng JS của tôi được nhúng vào nhiều ứng dụng JS (cha mẹ) khác. Một số ứng dụng mẹ có thể hiển thị/ẩn ứng dụng của tôi bằng cách đặt hiển thị: chặn/không cho một số yếu tố chứa ứng dụng của tôi. Các ứng dụng mẹ khác tạm thời xóa ứng dụng của tôi khỏi DOM và kết nối lại sau. Rất ít ứng dụng mẹ sử dụng shadow dom, vì vậy tôi không có quyền truy cập vào các phần tử trong ứng dụng mẹ.

Tôi cần cách kiểm tra xem ứng dụng của tôi có hiển thị hay không vào getBoundingClientRect.

Câu hỏi: Ít nhất trên chrome, getBoundingClientRect lợi nhuận (w: 0, h: 0, l: 0, t: 0) nếu một yếu tố hoặc tổ tiên của nó có display: none hoặc nếu nó được lấy ra từ DOM. Tôi không thể tìm thấy bất kỳ tài liệu nào về bảo đảm hành vi này, và tôi tự hỏi, nếu nó an toàn (theo nghĩa logic này sẽ không thay đổi) để sử dụng getBoundingClientRect để kiểm tra khả năng hiển thị của một phần tử.

Ngoài ra tôi cần biết hành vi này có nhất quán trên tất cả các trình duyệt chính, bao gồm FF, IE8 + và Safari không. Tài liệu này có ở bất kỳ đâu không?

Cuối cùng, tại sao (0,0,0,0)? Tôi cảm thấy như getBoundingClientRect phải trả về null trong các trường hợp như vậy (0,0,0,0) thực sự có nghĩa là một cái gì đó khác nhau. Có lý do chính đáng cho điều đó không?

---

Edited/Câu hỏi bổ sung: Cảm ơn istos đã chỉ ra rằng trở rỗng có thể phá vỡ một số mã không nghi ngờ, chẳng hạn như:

console.log(clientRectObject.height); 
// TypeError: Cannot read property 'height' of null 

Không để khiếu nại về việc vi hiện tại, mà là một câu hỏi thiết kế: thay vì null, có thể trả về một số giá trị Rect bất hợp pháp (chẳng hạn như chiều rộng và chiều cao tiêu cực) là một lựa chọn hữu ích hơn?

Answer 1

Trước tiên, tôi sẽ xem xét cách các thư viện phổ biến như jQuery giải quyết một vấn đề tương tự. Dưới đây là một số liên kết đến các nguồn jQuery:

• https://github.com/jquery/jquery/blob/master/src/css/var/isHidden.js
• https://github.com/jquery/jquery/blob/master/external/sizzle/dist/sizzle.js#L715
• https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

Hơn nữa tôi sẽ tìm kiếm trực tuyến với bất kỳ manh mối trong đó có MDN:

• https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
• http://www.nczonline.net/blog/2008/02/04/getting-element-dimensions-a-follow-up
• http://ejohn.org/blog/getboundingclientrect-is-awesome
• http://www.quirksmode.org/blog/archives/2008/02/the_cssom_view.html#link5

Thật không may là cách tốt nhất để kiểm tra xem hành vi của getBoundingClientRect là như nhau ở hầu hết các trình duyệt là để thực sự kiểm tra bên trong những trình duyệt. Nếu bạn làm điều này, vui lòng quay lại MDN và thêm các phát hiện của bạn.

---

tôi cảm thấy như getBoundingClientRect nên trả lại null trong trường hợp này

Mặc dù trở về null sẽ có vẻ hợp lý trong những trường hợp như vậy, nó không phải là thực sự lý tưởng vì thông thường nó sẽ trả về một ClientRect đối tượng có các thuộc tính trên cùng, bên phải, dưới cùng, bên trái, chiều rộng và chiều cao và mã như sau sẽ bị hỏng:

console.log(clientRectObject.height); 
// TypeError: Cannot read property 'height' of null 

Nói cách khác, API sẽ không nhất quán theo cách đó.