Не могу понять, почему Chrome/Safari не может получить ScrollHeight прямо здесь

Я только что задал вопрос о том, почему определенный код 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. Но именно тогда я нажимаю «назад» в браузере.

Хм, я действительно не понимаю этого, поэтому, пожалуйста, помогите мне здесь.

Спасибо


javascript google-chrome jquery safari webkit
person Community    schedule 03.10.2010    source источник
comment
Можешь показать resize_iframe?   -  person Marcel Korpel    schedule 03.10.2010
comment
Браузеры Webkit вообще забавно возятся с элементом <body>. Возможно, вы увидите, что лучше вложить <div> внутрь <body> и манипулировать им вместо этого.   -  person Pointy    schedule 03.10.2010

Ответы (1)


arrow_upward
1
arrow_downward

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/

person Didius    schedule 22.10.2010