JavaScript: почему не срабатывает строчка?

Question

[Shimpanze]

Здравствуйте!

Нашел в учебнике learn.javascript.ru сниппет, который растягивает контейнер на всю высоту содержимого:

<div id="scrollOpen" style="width: 300px; height: 100px; overflow-y: scroll;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, magnam, cupiditate, iste blanditiis repellendus quaerat nisi laudantium ipsam culpa quae beatae ratione minus animi reiciendis laboriosam tenetur consectetur alias minima veniam eum aperiam nam repellat officiis quia itaque suscipit corporis nesciunt mollitia est. Nihil, mollitia, quidem, impedit, et facilis cumque corrupti tempora accusantium molestiae voluptate vero totam voluptatem. Ab cupiditate repellat ea error dicta quia nobis vitae ducimus! Ipsam laborum adipisci rem possimus quam. Consectetur, id, vitae obcaecati veniam at in dicta earum dolores doloremque fugiat laboriosam ipsum facilis officia ullam mollitia voluptatem iste molestias non labore assumenda quasi ex.</div><br>
<br>
<button onclick="document.getElementById('scrollOpen').style.height = document.getElementById('scrollOpen').scrollHeight + 'px'">Развернуть на высоту содержимого</button>

Работает прекрасно.

Пример на jsfiddle

Применяю этот же сниппет для растягивания iFrame:

<iframe id="iFrameOpen" style="width: 100%; height: 100px;" src="https://www.w3.org/TR/css-color-4/"></iframe>
<button onclick="document.getElementById('iFrameOpen').style.height = document.getElementById('iFrameOpen').scrollHeight + 'px'">Развернуть на высоту содержимого</button>

Не срабатывает (в стили iframe не добавляется высота).

Пример на jsfiddle

Почему? Ведь все правильно написано.

Спасибо!

Answer 1

[RaulDuke]

Посмотрите на измененный сниппет, должно быть так, но оно по-прежнему не работает :)) (загляните в консоль). Если не разберетесь -- пишите.

https://jsfiddle.net/olegcvetkov76/1LwweL35/

Comments

[Shimpanze]

Не разобрался...

[RaulDuke]

Ок. Вы попытались использовать свойство scrollHeight, но, как Вам писали выше, фрейм ничего не знает о своей высоте. Для того чтобы узнать высоту айфрейма Вам надо воспользоваться frame.contentWindow.document.body.scrollHeight но и это не заработало по причине Same-origin policy (загляните в консоль после нажатия кнопки).

Same-origin policy

Answer 2

[Роман Ямчук]

потому что iframe не знает высоту содержимого и не может растянуться автоматически по контенту

Comments

[Shimpanze]

Зато он знает высоту собственной прокрутки

Answer 3

[Александр Моргунов]

Очевидно же, что scrollHeight у iframe равен 100px
Надо использовать это

document.getElementById('demo_frame').contentWindow.document.body.scrollHeight

а не это
document.getElementById('iFrameOpen').scrollHeight