Заставить адаптироваться iframe в зависимости от изменений

[Zacker2]

<iframe width="100%" height="100%" frameborder="0" src="/index.php" name="fff" align="left" border="0"></iframe>

Этот html код выводит инфрейм с прокруткой, убрав прокрутку при переходе по страницам содержимое в фрэме будет отображена на половину (соответственно если новая страница будет выше установленных ограничений в height), а предугадать точный размер ифрэма невозможно...
Нужно решение для вывода ифрэйма на страницу с автоматическим изменим height в зависимости от содержимого ифрэйма.
Где-то читал что это делается с JS...

 

[chirs]

возможно, этот скрипт подходит:
Для просмотра ссылки Войди или Зарегистрируйся
или хотя бы натолкнет в нужном направлении ))

 

[Zacker2]

<SCRIPT LANGUAGE=JavaScript>
$(function(){
   var iFrames = $('iframe');
   function iResize() {
      for (var i = 0, j = iFrames.length; i < j; i++) {
         iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
      }
      if ($.browser.safari || $.browser.opera) {
         iFrames.load(function(){
            setTimeout(iResize, 0);
         });
         for (var i = 0, j = iFrames.length; i < j; i++) {
            var iSource = iFrames[i].src;
            iFrames[i].src = '';
            iFrames[i].src = iSource;
         }
      } else {
         iFrames.load(function() {
            this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
         });
      }
   }
});
</SCRIPT>
<iframe src="content.html" class="iframe" scrolling="no" frameborder="0">index.php</iframe>

Результат - маленький квадрат, нужно в пределах одного домена:

а так, в квадрате выводиться только название страницы донора:

<iframe src="index.php" class="iframe" scrolling="no" frameborder="0"></iframe>

вывод ифрэйма на страницу с автоматическим изменим height в зависимости от содержимого ифрэйма.

 

[Absolute]

В пределах текущего домена можно так:

<script>
$(document).ready(function(){
 $('iframe').load(function(){
   $(this).height(this.contentDocument.body.scrollHeight);
  });
});
</script>

 

[Zacker2]

<script>
$(document).ready(function(){
$('iframe').load(function(){
   $(this).height(this.contentDocument.body.scrollHeight);
  });
});
</script>
<iframe src="URL ДО СТРАНИЦЫ" class="iframe" width="100%" scrolling="no" frameborder="0"></iframe>

Такой код действительно вывел страницу с правильной высотой, но в моем случаи страница которая внутри ифрема меняется без перезагрузки, т.е. с помощью js. Или допустим если основная страница была загружена во весь экран, а потом уменьшить окно, то содержимое ифрейма уходит под ифрейм, как в таком случаи заставить выровнять высоту (уже у загруженной страницы)?

 

[chirs]

$(window).resize(function(){
  alert('Размеры окна браузера изменены.');
});

 

[Zacker2]

$(window).resize(function(){
  alert('Размеры окна браузера изменены.');
});

Спасибо Вам конечно большое за ваши старания, но с таким скриптом при изменении размера страницы выскакивает только сообщение Размеры окна браузера изменены. А мне совсем другое нужно...

 

[chirs]

Это просто было предложено направление, в котором "копать" ))
я думаю, можно попробовать так сделать:

<script>
$(document).ready(function(){
  $('iframe').load(function(){
    $(this).height(this.contentDocument.body.scrollHeight);
  });
});
$(window).resize(function(){
  $('iframe').each(function(){
    $(this).height(this.contentDocument.body.scrollHeight);
  });
});
</script>
<iframe src="URL ДО СТРАНИЦЫ" class="iframe" width="100%" scrolling="no" frameborder="0"></iframe>

Получится, что при изменении окна браузера iframe будет снова "перепроверять" свой размер в зависимости от контента в нем.
То же самое можно добавить и в JS, который меняет содержимое iframe, т.е. после загрузки нового html в iframe добавить:

$('iframe').each(function(){
    $(this).height(this.contentDocument.body.scrollHeight);
});

 

[Absolute]

Такой код действительно вывел страницу с правильной высотой, но в моем случаи страница которая внутри ифрема меняется без перезагрузки, т.е. с помощью js. Или допустим если основная страница была загружена во весь экран, а потом уменьшить окно, то содержимое ифрейма уходит под ифрейм, как в таком случаи заставить выровнять высоту (уже у загруженной страницы)?

Что касается изменений внутри фрейма, то приходит на ум две вещи -
1. это отслеживать каким-то образом события внутри фрейма, - клики, например, кот. приводят к изменениям высоты док-та:

$(document).ready(function(){
var fr = $('iframe');
fr.load(function(){
   var frameEl = $(this),
       frameBody = $(this.contentDocument.body);
   frameEl.height(frameBody.height());
   frameBody.on('click', function(){
     frameEl.height($(this).height());
   });
  });
});

2. setInterval т.е. каждую, например, секунду получать нужный параметр и устанавливать его фрейму:

$(document).ready(function(){
var fr = $('iframe');
fr.load(function(){
   var frameEl = $(this),
       frameBody = $(this.contentDocument.body);
   setInterval(function(){
     frameEl.height(frameBody.height());
    }, 1000);
  });
});

Что касается ресайза, адаптивности и всего такого, в общем-то вам подсказали правильно (resize). здесь больше следует отталкиваться от текущего проекта и текущих задач.

$(window).resize(function(){
  fr.css({
  'height' : $(window).height() - 40,
  'width' : $(window).width() - 40
});
});

Не исключено, что существуют другие пути - более правильные, но мне о них неизвестно.

 

[Zacker2]

Первый и второй вариант работают, спасибо огромное, но в конце ифрейма последняя строка урезается, можно ли добавить в скрипте + 30 или 40 height? т.е. чтобы адаптированная рамка была чуть ниже чем она щас?