Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?
Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Динамическое изменение размеров IFRAME

Модерирует : Cheery

 Версия для печати • Подписаться • Добавить в закладки
Страницы: 1 2 3 4

Открыть новую тему     Написать ответ в эту тему

FormalinBB

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
<script type='text/javascript'>  
 
function autoIframe(frame){  
 
        try{  
                
                innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;  
                objToResize = (frame.style) ? frame.style : frame;  
                objToResize.height = innerDoc.body.scrollHeight + 1;  
                //objToResize.width = innerDoc.body.scrollWidth + 1;  
 
        }  
        catch(err){  
                alert(err.message);  
        }  
objToResize.height = innerDoc.body.scrollHeight - 1;  
innerDoc.body.scrollHeight = 0;        
}  
</script>  
 
 
 
Вот это получше будет. исправлениям подверглись шаг изменения высоты до одного пикселя и обнуление этой самой высоты, чоб другие меньшего размера странички могли подстраиваться...
Всего записей: 1 | Зарегистр. 24-02-2010 | Отправлено: 04:27 24-02-2010
pingvin7



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Где вызывать эту функцию? В родительском фрейме или в текущем?
Как вызывать эту функцию? Можно через <body onLoad="…()" >?
Всего записей: 43 | Зарегистр. 31-03-2009 | Отправлено: 18:24 24-02-2010
arhan74

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery

Цитата:
Код:
<script type="text/javascript">
function autoIframe(frame){
        try{
                innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
                objToResize = (frame.style) ? frame.style : frame;
                objToResize.height = innerDoc.body.scrollHeight + 10;
                objToResize.width = innerDoc.body.scrollWidth + 10;  
 
        }
        catch(err){
                alert(err.message);
        }
}
</script>
<iframe style='width:1px;height:0px;overflow:hidden' src="frame.php" onload="if (window.autoIframe) {window.autoIframe(this);}"></iframe>

Добрый день!
Попробовал использовать ваш вариант, но заработал он как-то неадекватно:
в IE8 все работает без проблем, в Opera тоже, а вот в Мазиле 3.6.3 работает, только если на чистой странице, а если вставить в готовую, то не пашет, появляется белая полоса и все.
Что можно сделать?
З.Ы. Даже пробовал из готовой страницы в новую(где код с iframe работает) код переносить, перестает работать и все тут.
Всего записей: 1 | Зарегистр. 01-11-2007 | Отправлено: 15:29 22-06-2010 | Исправлено: arhan74, 15:33 22-06-2010
ivansychev

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
pingvin7
Cheery
Спасибо огромное!!! Способа 3 изменения размера iframe до этого перепробовал, и только эти заработали (на Ucozе).
Всего записей: 5 | Зарегистр. 12-12-2006 | Отправлено: 18:21 28-07-2012
KRAUSER0993

Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery

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

 
можно, пожалуйста, поподробнее как и где запустить аналогичный код, а то тоже столкнулся с этой проблемой.
Всего записей: 89 | Зарегистр. 09-12-2010 | Отправлено: 01:07 06-01-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
KRAUSER0993

Цитата:
можно, пожалуйста, поподробнее как и где запустить аналогичный код, а то тоже столкнулся с этой проблемой.

в принципе лучше использовать события и "ждать" пока iframe не загрузится.
если iframe ваш (на вашем сайте), то вы из его содержимого можете править размер iframe в родительском окне после загрузки.. например при window.onload
https://developer.mozilla.org/en-US/docs/DOM/window.onload

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 02:08 06-01-2013
KRAUSER0993

Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
 
window.onload = function() {
  init();
  doSomethingElse();
};
 
Эту часть ведь в JS вставить надо? Походу из-за того, что я не туда вставил появляется ошибка "load event detected!"
 
Всего записей: 89 | Зарегистр. 09-12-2010 | Отправлено: 02:35 06-01-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
KRAUSER0993

Цитата:
Эту часть ведь в JS вставить надо?  

в принципе - да.. все зависит от того, в какое окно вставляете )  
в данной записи код должен быть в iframe (в окне, которое туда подгружается)
чтобы после загрузки окна этот код смог обратиться в родительское и поправить размер вывода себя же.
 
можно сделать так и из родительского окна.
вот выше был пример

Цитата:
<iframe style='width:1px;height:0px;overflow:hidden' src="frame.php" onload="if (window.autoIframe) {window.autoIframe(this);}"></iframe>



----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 04:06 06-01-2013
KRAUSER0993

Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ничего не изменилось( только стала появляться надпись "load event detected!"
 
Вот Ссылка
Всего записей: 89 | Зарегистр. 09-12-2010 | Отправлено: 13:13 06-01-2013
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
KRAUSER0993
Вы хоть чуть чуть js понимаете? Я же показал как работать с событием загрузки окна, а не сказал его просто скопировать и ждать какой то результат.
 
вы либо используете  

Цитата:
<iframe style='width:1px;height:0px;overflow:hidden' src="frame.php" onload="if (window.autoIframe) {window.autoIframe(this);}"></iframe>

и с его помощью вызываете функцию корректировки размера..
 
либо с помощью window.onload в содержимом iframe вызываете функцию корректировки в родительском окне. либо, либо, а не просто копирование примера для window.onload
 
первый вариант срабатывает в Хроме сейчас, к примеру.


----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:50 06-01-2013
but3

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Подробнее...
Всего записей: 1 | Зарегистр. 19-02-2014 | Отправлено: 13:07 19-02-2014
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
but3
раз используете jquery, то все можно сделать гораздо проще.
 

Код:
$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

 
содержимое iframe должен быть, очевидно, с того же домена.

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 23:22 19-02-2014
Weinaum



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Всем привет, в общем, вкручиваю с помощью iframe некий поиск в тело своей странице на wordpress.

Код:
<p><iframe height="1000px" width="100%" src="http://isource-site>
</iframe></p>

Ну и никак не могу справиться с автоматической высотой, в зависимости от внутренней: нагуглил кучу инфы, как это все должно работать посредством js, перепробовал уже кучу таких скриптов, вижу, что подключаются они, но, как только убираю конкретное значение высоты и/или ставлю height="100%" , ну или авто или совсем убираю, высота сразу режется до минимума, см 3 где-то и скролл внутри...
Вот как выглядит страница с height="1000px"
А вот так - без жестко заданной высоты.
И что то никак не продвинусь дальше...
 
И еще вопрос, не совсем может быть в тему, но тоже по iframe: есть ли какая либо возможность повлиять извне на внутренние стили?
Т.е. я хочу изменить кое-какие стили в выводимой посредством iframe странице, например, шрифт и его  размер, цвет шрифта?
Всего записей: 2155 | Зарегистр. 18-06-2006 | Отправлено: 16:46 10-05-2014
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Weinaum

Цитата:
И еще вопрос, не совсем может быть в тему, но тоже по iframe: есть ли какая либо возможность повлиять извне на внутренние стили?

нет, как и получить иные нужные данные о нему.
это сделано для безопасности, иначе бы была серьезная дыра в браузере.

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:00 10-05-2014
Grafus



Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ребят, я в JS неособо понимаю (почти полный 0), поможитя, плз.
У меня есть такой код для Joomla:

Код:
 
function iFrameHeight()
 {
     var h = 0;
    if (!document.all)
    {
        h = document.getElementById('blockrandom').contentDocument.height;
        document.getElementById('blockrandom').style.height = h + 60 + 'px';
    } else if (document.all)
    {
        h = document.frames('blockrandom').document.body.scrollHeight;
        document.all.blockrandom.style.height = h + 20 + 'px';
    }
    h = document.getElementById('blockrandom').contentDocument.documentElement.scrollHeight;
    document.getElementById('blockrandom').style.height = h + 'px';
 }
 

Но он отсчитывает:
1. Высоту iFrame только при загрузке страницы. А хотелось бы и при изменении размеров окна браузера. Например я сдвигаю окно по ширине, вложенный документ (текст) соответственно то же сдвигается, тем самым становясь уже, но при этом длинее (выше). А этот скрипт не меняет высоту при этом.
2. Если на странице более одного iFrame, то высота считается только для первого. А хочется для всех.
 
Поможитя чем сможитя...
 
Добавлено:
На свое первое пожелание, получилось выкрутится так (уж не знаю на сколько это правильно):

Код:
 
setInterval(function iFrameHeight()
 {
     var h = 0;
    if (!document.all)
    {
        h = document.getElementById('blockrandom').contentDocument.height;
        document.getElementById('blockrandom').style.height = h + 60 + 'px';
    } else if (document.all)
    {
        h = document.frames('blockrandom').document.body.scrollHeight;
        document.all.blockrandom.style.height = h + 20 + 'px';
    }
    h = document.getElementById('blockrandom').contentDocument.documentElement.scrollHeight;
    document.getElementById('blockrandom').style.height = h + 'px';
 },1000);
 

Осталось понять, что делать при нескольких iFrame(второй вопрос)...  
 
Опишу проблему чуть подробнее:
Есть страница на которой несколько однотипных iFrame типа:

Код:
 
<iframe onload="iFrameHeight()" id="blockrandom" name="" src="/test_1.php" width="100%" height="100%" scrolling="no" frameborder="0" class="wrapper">Без IFRAME</iframe>
<iframe onload="iFrameHeight()" id="blockrandom" name="" src="/test_2.php" width="100%" height="100%" scrolling="no" frameborder="0" class="wrapper">Без IFRAME</iframe>
<iframe onload="iFrameHeight()" id="blockrandom" name="" src="/test_3.php" width="100%" height="100%" scrolling="no" frameborder="0" class="wrapper">Без IFRAME</iframe>
<iframe onload="iFrameHeight()" id="blockrandom" name="" src="/test_4.php" width="100%" height="100%" scrolling="no" frameborder="0" class="wrapper">Без IFRAME</iframe>
<iframe onload="iFrameHeight()" id="blockrandom" name="" src="/test_5.php" width="100%" height="100%" scrolling="no" frameborder="0" class="wrapper">Без IFRAME</iframe>
 

На странице подключен скрипт с таким содержимым:

Код:
 
setInterval(function iFrameHeight()
{
    var h = 0;
    if (!document.all)
    {
        h = document.getElementById('blockrandom').contentDocument.height;
        document.getElementById('blockrandom').style.height = h + 60 + 'px';
    } else if (document.all)
    {
        h = document.frames('blockrandom').document.body.scrollHeight;
        document.all.blockrandom.style.height = h + 20 + 'px';
    }
    h = document.getElementById('blockrandom').contentDocument.documentElement.scrollHeight;
    document.getElementById('blockrandom').style.height = h + 'px';
},1000);
 

Для первого iFrame скрипт и автовысота отрабатывают прилично (лично мне эфект нравится). А для остальных отработки нет. Остальные открываются по-умолчанию.
Всего записей: 392 | Зарегистр. 15-12-2004 | Отправлено: 10:23 02-03-2016 | Исправлено: Grafus, 18:05 02-03-2016
vs6262



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
<iframe id="_iframe_id" style="width:100%;height:0px;overflow:hidden;" src="{{ paths.theme }}evoluted-directory-listing-script"></iframe>  
 
<script type="text/javascript">  
$('#_iframe_id').load(function () {  
     $(this).height($(this).contents().height());  
     $(this).width($(this).contents().width());  
 });
 
$('body').change(function () {  
     $(document.getElementById("_iframe_id")).height($(document.getElementById("_iframe_id")).contents().height());  
     $(document.getElementById("_iframe_id")).width($(document.getElementById("_iframe_id")).contents().width());  
 }).change();
 
</script>

Change не срабатывает ?
 
заранее благодарен
Всего записей: 2235 | Зарегистр. 25-02-2013 | Отправлено: 01:59 02-05-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262

Цитата:
Change не срабатывает  

на что он должен срабатывать? .change это только для селектов, инпутов и текстареа или самостоятельного запуска данного события
https://api.jquery.com/change/

Цитата:
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

 

Цитата:
 $(document.getElementById("_iframe_id")).height($(document.getElementById("_iframe_id")).contents().height());  
 $(document.getElementById("_iframe_id")).width($(document.getElementById("_iframe_id")).contents().width());  

какой бред, прости господи.. зачем комбинировать чистый js и jquery подобным образом???
сдается мне, что вообще не понимаете что такое jQuery и как им пользоваться.
$(document.getElementById("_iframe_id")) = $('#_iframe_id')
зачем тогда извращаться?
Всего записей: 15686 | Зарегистр. 20-09-2014 | Отправлено: 02:06 02-05-2017 | Исправлено: Mavrikii, 02:09 02-05-2017
vs6262



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
$(document.getElementById("_iframe_id")).height($(document.getElementById("_iframe_id"))).contents().height());  
$(document.getElementById("_iframe_id")).width($(document.getElementById("_iframe_id"))).contents().width());  
 
это я уже подправил
 
Добавлено:

Код:
<iframe id="_iframe_id" style="width:100%;height:0px;overflow:hidden;" src="{{ paths.theme }}evoluted-directory-listing-script"></iframe>  
   
 <script type="text/javascript">  
 $('#_iframe_id').load(function () {  
      $(this).height($(this).contents().height());  
      $(this).width($(this).contents().width());  
  });  
   
 $('body').on('change', '#_iframe_id', function() {
// $('body').change(function () {  
   // alert();
      $('#_iframe_id').height($('#_iframe_id')).contents().height());  
      $('#_iframe_id').width($('#_iframe_id')).contents().width());  
  });  
   
 </script>

http://stackoverflow.com/questions/29597488/body-onchange-selector-function-not-working-as-expected-for
 
так тоже не срабатывает
Всего записей: 2235 | Зарегистр. 25-02-2013 | Отправлено: 02:14 02-05-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262
что из процитированного мною непонятно??

Цитата:
This event is limited to <input> elements, <textarea> boxes and <select> elements.

ну нет такого события у других элементов, нет! вы же пытаетесь выцепить какие то изменения iframe, а он не создает такое событие.
 
http://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div
а еще лучше просто вызывать нужную функцию в родители из содержимого iframe. когда там загрузится все, тогда и вызвать в родителе что нужно (да хоть запустить вышеупомянутое событие через .trigger()). это работает, конечно же, если содержимое iframe грузится с того же домена.
Всего записей: 15686 | Зарегистр. 20-09-2014 | Отправлено: 02:36 02-05-2017
vs6262



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
<iframe id="_iframe_id" style="width:100%;height:0px;overflow:hidden;" src="{{ paths.theme }}evoluted-directory-listing-script"></iframe>  
   
 <script type="text/javascript">  
 $('#_iframe_id').load(function () {  
      $(this).height($(this).contents().height());  
      $(this).width($(this).contents().width());  
  });  
   
// $('body').on('change', '#_iframe_id', function() {
// $('body').change(function () {  
$('body').trigger(function () {
    alert();
      //$('#_iframe_id').height($('#_iframe_id')).contents().height());  
      //$('#_iframe_id').width($('#_iframe_id')).contents().width());  
  });  
   
 </script>

так не работает
Mavrikii
не нашел как вы думали .trigger()). применить
 
Добавлено:
http://br-andy.de/page/downloads
 

Код:
<iframe src="{{ paths.theme }}evoluted-directory-listing-script" style="border: solid 0px #000000;width:100%;height:600px;"></iframe>

 
мне собственно нужно чтобы iframe, если количество файлов и папок бальше чем высота iframe чтобы он по высоте адаптировался бы.
по ширине ок - резиновый.
Всего записей: 2235 | Зарегистр. 25-02-2013 | Отправлено: 02:52 02-05-2017
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4

Компьютерный форум Ru.Board » Интернет » Web-программирование » Динамическое изменение размеров IFRAME


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru