Измените размер высоты iframe в соответствии с изменяемым размером содержимого

#javascript #jquery #iframe

#javascript #jquery ( jquery ) #iframe — фрейм

Вопрос:

У меня есть iframe, и я хочу изменить размер высоты в соответствии с содержимым, которое может измениться, если пользователь совершит определенные действия.

Мне не нужна полоса прокрутки, чтобы она отображалась как обычная страница

Ответ №1:

Используйте div вместо iFrame. Попробуйте опубликовать несколько примеров кода, чтобы мы могли помочь вам больше. Как правило, вы не можете изменять размер iframe на основе его содержимого.

1. Я не могу использовать div, я использую jsf 2.1, у меня есть компонент загружаемого файла, который не может получить его значение без отправки всей формы, а моя главная страница, с другой стороны, не может отправлять все с помощью ajax, поэтому я помещаю компонент загружаемого файла в ифрам

Ответ №2:

scrollHeight является основным свойством для получения высоты содержимого IFRAME следующим образом:

 contentWindow.document.body.scrollHeight

После загрузки IFRAME вы можете изменить высоту, выполнив следующие действия:

 <script type="text/javascript">
  function resizeIframe() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
           var cont =  iFrameID.contentWindow.document.body || frame.contentDocument.body
            // here you can make the height            
            iFrameID.height = cont.scrollHeight   "px";
      }   
  }
</script>

При событии загрузки IFRAME вы можете вызвать эту функцию:

Но конечно .. iframe не должен загружаться с другого веб-сайта

1. Это не сработало, я создал таблицу в iframe, где высота iframe должна составлять 230 пикселей высота этой таблицы, мой вопрос в том, что загрузка происходит после загрузки iframe, поэтому после загрузки таблицы, почему я всегда получаю высоту таблицы «null»??

2. function resizeIframe() { alert("in resize"); var iFrameID = document.getElementById('frame_name_here'); var myheight = $('#records-view-table').height(); if (iFrameID) { iFrameID.height = 300 myheight "px"; alert(myheight "fff"); } }