Надежно получить высоту скрытого элемента

Question

Контекст проблемы

Мне нужно разрешить height содержимого для iframe после загрузки (чтобы адаптировать высоту самого элемента iframe). Проблема в том, что iframe может находиться в скрытом состоянии (один из его контейнеров / родительских элементов установлен на display:none), когда загрузка завершена.

Я не могу найти способ получить правильную высоту содержания iframe, пока я его не отображаю. Использование jQuery.height() возвращает 0 в Firefox.

---

Пример демо здесь:

https://codepen.io/anon/pen/gKBQeP?editors=1111

(вы заметите, как высота сообщается по-разному, если вы сразу нажмете на Tab3 , где находится iframe, сделаете это видимым, или если вы подождете пару секунд после загрузки а затем нажмите на Tab3 )

---

Невозможно написать height на элементе сразу после его отображения.

Более того, после повторного отображения я все еще не могу получить высоту содержимого; он по-прежнему возвращает 0, как будто он скрыт. Я предполагаю, потому что iframe-контент все еще находится в процессе рендеринга, даже если дерево DOM iframe уже было показано. Если я setTimeout через несколько миллисекунд после того, как сделаю его видимым, тогда я могу получить правильное значение height (для меня это не имеет большого смысла .... ?).

Мне действительно не нравится устанавливать тайм-аут для считывания высоты содержимого.

Что представляет собой надежный кросс-браузерный способ получения высоты скрытого элемента, даже если он скрыт (или находится в процессе становления видимым)?

Мое решение

На данный момент я:

• запускает чтение / запись height сразу после того, как я знаю, что элемент снова виден.
• используйте setTimeout(), чтобы подождать полсекунды (чувствует себя вялым ?) перед чтением / записью height элемента.

Примечание (актуальный вопрос)

Я пытаюсь найти меньше hacky в качестве возможных решений; поэтому я хочу избежать:

• быстрое отображение (или клонирование) элемента (заботясь о сохранении + восстановление свойств CSS, делая их постоянными и встроенными или избегая мерцания на странице), чтобы прочитать размеры и быстро вернуть их в скрытое состояние (? ).
• , используя setTimeout, чтобы дождаться восстановления размеров элемента (и правильного чтения / записи), чтобы работать с ними сразу после показа самого элемента.

Answer 1

Это немного хакерски, но вместо того, чтобы показывать: ни одного (я полагаю, это то, что скрывается), вы можете установить что-то вроде:

top: -10000px;
left: -10000px;
position: absolute;

Он «скрыт», так как он не будет виден, но вы все равно сможете получить его высоту. Затем, после того как вы получите высоту, вы можете удалить эти стили, чтобы сделать ее видимой.