Из-за того, как настроены наши микросайты, у меня есть родительская страница, которая отображает дочернюю страницу через iframe. родительская страница является прославленной главной страницей верхнего и нижнего колонтитула, а дочерняя страница имеет фактическое содержимое (это вне моего контроля). К сожалению, высота дочерней страницы не является статичной. Это калькулятор с некоторыми элементами, которые появляются и исчезают. Я попытался сделать iframe родительской страницы максимально адаптивным, используя следующий код:
<!-- iFrame Resizer -->
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
$(window).resize(function(){
var obj = document.getElementById("ifmContent");
resizeIframe(obj);
});
</script>
<!-- /iFrame Resizer -->
<div style="overflow: auto">
<iframe src="index-iframe.html" frameborder="0" scrolling="no" onload="resizeIframe(this)" id="ifmContent"></iframe>
</div>
Но поскольку дочерняя страница адаптивна и отзывчива, я поместил этот фрагмент кода на дочернюю страницу:
var y = $("#divResults").innerHeight() + 200 + "px";
$(parent.document).find('#ifmContent').css("height",y);
Этот код срабатывает после нажатия кнопки «Вычислить» и отображения результата.
Это все отлично работает. Однако проблема, которую я предпочитаю, заключается в изменении размера браузера. Функция изменения размера срабатывает, но по какой-то причине значение высоты, которое я получаю с дочерней страницы, является значением до изменения размера.
Например, я добавил оповещения на обеих страницах, чтобы видеть, какие значения высоты я получаю.
Для родительской стороны у меня есть это:
<!-- iFrame Resizer -->
<script>
function resizeIframe(obj) {
alert(obj.contentWindow.document.body.scrollHeight);
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
$(window).resize(function(){
var obj = document.getElementById("ifmContent");
resizeIframe(obj);
});
</script>
<!-- /iFrame Resizer -->
И на дочерней странице я добавил это:
$(window).resize(function(){
var x = $(document).height();
alert(x);
});
Итак, при загрузке и когда я выполняю обычные функции, все работает хорошо. Но когда я минимизирую окно, я получаю значение высоты документа до изменения размера:
И затем содержимое обрезается, потому что размер iframe слишком мал:
Затем, когда я максимизирую его, я получаю высоту от того, когда браузер был свернут:
Можно ли получить значения высоты после изменения размера браузера?