getBoundingClientRect для обнаружения видимости
Предыстория: в настоящее время я работаю над проектом, в котором мое приложение JS встроено в несколько других (родительских) приложений JS. Некоторые родительские приложения могут показать / скрыть мое приложение, установив display:block/none для некоторого элемента, который содержит мое приложение. Другие родительские приложения временно удаляют мое приложение из DOM и подключают его позже. Немногие родительские приложения используют shadow dom, поэтому у меня нет доступа к элементам в родительском приложении.
Мне нужен способ проверить, является ли мое приложение видимым (внутри DOM и отображено; не заботится о видимости: скрыто и не обязательно должно быть внутри области просмотра), не изменяя родительские приложения, поэтому я посмотрел на getBoundingClientRect.
Вопрос: По крайней мере в chrome, getBoundingClientRect возвращает (w:0,h:0,l:0,t:0), если элемент или его предок имеет display:none или если он удален из DOM. Я не смог найти никакой документации по гарантии такого поведения, и мне интересно, безопасно ли (в смысле логика не изменится) использовать getBoundingClientRect для проверки видимости элемента.
Также мне нужно знать, является ли это поведение совместимым во всех основных браузерах, включая FF, IE8+ и Safari. Это где-нибудь задокументировано?
Наконец, почему (0,0,0,0)? Я чувствую, что getBoundingClientRect должен возвращать ноль в таких случаях, так как (0,0,0,0) на самом деле означает что-то другое. Есть ли для этого веская причина?
Отредактированный / Дополнительный Вопрос: Спасибо istos за то, что указали, что возвращающий нуль может сломать некоторый ничего не подозревающий код, такой как:
console.log(clientRectObject.height);
// TypeError: Cannot read property 'height' of null
Не для того, чтобы жаловаться на текущее поведение, а как на вопрос разработки: может ли вместо нуля возвращение некоторых недопустимых значений Rect (таких как отрицательная ширина и высота) быть более полезной альтернативой?
1 ответ
Сначала я хотел бы посмотреть, как популярные библиотеки, такие как jQuery, решают подобную проблему. Вот несколько ссылок на источник 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
Более того, я бы искал в Интернете любые подсказки, включая 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
К сожалению, лучший способ проверить, если поведение getBoundingClientRect То же самое в большинстве браузеров на самом деле тестировать внутри этих браузеров. Если вы сделаете это, вернитесь в MDN и добавьте свои выводы.
Я чувствую, что getBoundingClientRect должен возвращать ноль в таких случаях
Хотя возвращение нулевого значения может показаться логичным в таких случаях, на самом деле оно не является идеальным, поскольку обычно оно возвращает объект ClientRect со свойствами top, right, bottom, left, width и height, а код, подобный этому, ломается:
console.log(clientRectObject.height);
// TypeError: Cannot read property 'height' of null
Другими словами, API не будет таким образом согласованным.