Я только что задал вопрос о том, почему определенный код js не будет работать в Chrome и Safari на 100%, но после дальнейшего устранения неполадок я думаю, что обнаружил, что это вопрос, который я должен опубликовать.
У меня есть страница, на которой есть форма. Целью этой формы является iframe на той же странице. iframe является динамическим и основан на php.
Это нижняя часть моего содержимого php iframe:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
<?php echo $display_table; ?>
Как видите, я вызываю функцию для изменения высоты iframe на главной странице (родительской странице).
Это отлично работает, и на самом деле он изменяется, НО в Chrome и Safari изменение размера устанавливает высоту "выше", чем должна быть. Поэтому, если высота составляет 500 пикселей, Chrome и Safari устанавливают ее примерно на 2000 пикселей, что является максимальной высотой документа iframe.
Почему это? Одна мысль может заключаться в том, что тело не полностью загружено до того, как scrollHeight будет отправлен в функцию изменения размера, возможно?
Есть ли способ заставить его ждать, пока документ полностью не загрузится?
Одна вещь, которая меня смущает, это то, что когда я нажимаю ссылку на главной странице, а затем возвращаюсь, изменение размера страницы работает хорошо и установлено на 500 пикселей, как и должно быть даже в Chrome/Safari. Но именно тогда я нажимаю "назад" в браузере.
Хм, я действительно не понимаю этого, поэтому, пожалуйста, помогите мне здесь.
Спасибо
Ответ 1 · рейтинг 1 · Didius
document.body.scrollHeight всегда будет возвращать одно из двух значений в chrome:
если содержимое документа длиннее, чем высота окна, то возвращается высота содержимого
если документ короче высоты окна, то возвращается высота окна.
Похоже, у вас есть высота, установленная в iframe. Когда содержимое в iframe загружается, оно будет обрабатывать iframe как окно. Итак, если высота iframe установлена на 2000, а высота вашего контента составляет всего 500, хром вернет offsetheight 2000.
Если это так, самое простое, что можно сделать, - установить высоту iframe на 1 пиксель. (или авто)
Другой вариант (как указывает остроумный гм..) заключается в том, что вы можете создать div-оболочку сразу после тела, которое содержит весь ваш контент. Затем вы можете просто получить высоту этого div и вернуть ее своей родительской функции.
Относительно этого вопроса:
Ответ - да, и вы уже делаете это. Поскольку вы вызываете parent.resize_iframe при загрузке, функция не будет вызываться до тех пор, пока все HTML, JS, CSS и изображения не будут загружены на экран. Однако следует отметить, что есть несколько недостатков использования функции загрузки тегов тела. Во-первых, он должен загрузить все изображения перед вызовом onload. Во-вторых, если кто-то перепривязывается к window.onload, ваша функция никогда не будет вызвана. Если вы хотите узнать больше о загрузке и способах борьбы с ней, перейдите по этой ссылке http://www.webreference.com/programming/javascript/onloads/