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

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

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

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

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

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 странице, например, шрифт и его  размер, цвет шрифта?
Всего записей: 2152 | Зарегистр. 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 скрипт и автовысота отрабатывают прилично (лично мне эфект нравится). А для остальных отработки нет. Остальные открываются по-умолчанию.
Всего записей: 389 | Зарегистр. 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 не срабатывает ?
 
заранее благодарен
Всего записей: 2188 | Зарегистр. 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')
зачем тогда извращаться?
Всего записей: 15126 | Зарегистр. 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
 
так тоже не срабатывает
Всего записей: 2188 | Зарегистр. 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 грузится с того же домена.
Всего записей: 15126 | Зарегистр. 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 чтобы он по высоте адаптировался бы.
по ширине ок - резиновый.
Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 02:52 02-05-2017
vs6262



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
http://stackoverflow.com/questions/3846132/jquery-get-height-of-iframe-content-when-loaded
 
проблему сам решил
 
Добавлено:

Код:
<iframe id="_frameId" src="{{ paths.theme }}evoluted-directory-listing-script" scrolling="no" style="border: solid 0px #000000;width:100%;height:200px;"></iframe>
<script>
    $('iframe').load(function() {
            setTimeout(iResize, 50);
        // Safari and Opera need a kick-start.
        var iSource = document.getElementById('your-iframe-id').src;
        document.getElementById('_frameId').src = '';
        document.getElementById('_frameId').src = iSource;
    });
    
    function iResize() {
        document.getElementById('_frameId').style.height = document.getElementById('_frameId').contentWindow.document.body.offsetHeight + 'px';
    }
</script>

вот работает
Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 04:58 02-05-2017
Mavrikii

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

Цитата:
$('iframe').load(function()

не будет работать в jQuery 3.0 и выше.
 
и все можно сделать проще и удобнее

Код:
$('iframe').on('load', function() {
   var $this = $(this), src = $this.attr('src');  
   setTimeout(function() {
      $this.height($this.contents().height());
   }, 50);  
   // Safari and Opera need a kick-start.
   $this.attr('src', '').attr('src', src);  
});

и то, что после // расчитано на старые браузеры (2008 год), я бы выкинул вообще.
 
ps: а по поводу .change, я то думал, что какой то контент будет подгружаться через ajax, а не просто банальная загрузка iframe и больше ничего.
Всего записей: 15126 | Зарегистр. 20-09-2014 | Отправлено: 07:17 02-05-2017 | Исправлено: Mavrikii, 07:29 02-05-2017
vs6262



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

Код:
<iframe id="_frameId" src="{{ paths.theme }}evoluted-directory-listing-script" scrolling="no" style="border: solid 0px #000000;width:100%;height:0px;"></iframe>
<script>
    $('iframe').on('load', function() {
            setTimeout(iResize, 50);
        // Safari and Opera need a kick-start.
        var iSource = document.getElementById('your-iframe-id').src;
        document.getElementById('_frameId').src = '';
        document.getElementById('_frameId').src = iSource;
    });
    
    function iResize() {
        document.getElementById('_frameId').style.height = document.getElementById('_frameId').contentWindow.document.body.offsetHeight + 20 + 'px';
    }
</script>

вот мой окончательный код  
- по ширине iframe резиновый(responsive)
- высота iframe адаптируется автоматически под динамически по высоте его изменяющегося контента
 
Добавлено:
если кто считает что с пом. jQuery можно укоротить код помогите , а нет я и с этим могу жить
Всего записей: 2188 | Зарегистр. 25-02-2013 | Отправлено: 12:58 02-05-2017 | Исправлено: vs6262, 13:05 02-05-2017
Kaber



Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ребят, есть вариант отключить у iframe автовоспроизведение у видео? Сейчас видео показываю через тег <video> , но образуется непонятная белая пелена (как на скрине).
   
 
Добавлено:
Точнее тут слишком темное при:
 background-color: #000;
А если сделать background-color: transparent;
То:
 
Всего записей: 1356 | Зарегистр. 14-03-2014 | Отправлено: 08:44 05-09-2019
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Kaber
iframe видео не воспроизводит, воспроизводит содержимое iframe.
а что там и как реализовано - откуда мы знаем?
если содержимое с другого домена - у js нет доступа к нему.
 
ps: чтобы понять что не так - показывайте саму страницу
Всего записей: 15126 | Зарегистр. 20-09-2014 | Отправлено: 08:53 05-09-2019 | Исправлено: Mavrikii, 09:00 05-09-2019
Kaber



Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Видео с этого же домена в локальной папке хостинга.
Всего записей: 1356 | Зарегистр. 14-03-2014 | Отправлено: 09:00 05-09-2019
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Kaber
тогда при чем тут iframe, если вы сами указываете, что нужно его автоматически воспроизводить?
показывайте что за пелена, возможно не понимаете в чем дело.
Всего записей: 15126 | Зарегистр. 20-09-2014 | Отправлено: 09:08 05-09-2019
Kaber



Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Ссылка
Посмотрите пожалуйста.
Всего записей: 1356 | Зарегистр. 14-03-2014 | Отправлено: 09:10 05-09-2019
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Kaber
у тега video в all.css стоит полупрозрачность opacity: 0.4;
вопрос не имеет никакого отношения к данной теме.
Всего записей: 15126 | Зарегистр. 20-09-2014 | Отправлено: 09:12 05-09-2019 | Исправлено: Mavrikii, 09:13 05-09-2019
Kaber



Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
В очередной раз большое спасибо.
Всего записей: 1356 | Зарегистр. 14-03-2014 | Отправлено: 09:20 05-09-2019
Открыть новую тему     Написать ответ в эту тему

Страницы: 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