IFRAME с 100% Высота автоматически

Некоторые возможные решения, чтобы сделать ваш Высота IFRAME динамически как содержимое, отображаемое.

Проблема

Пусть IFRAME с автоматической высота, как содержание представлено, Это может быть что-то более простой делать, но не раз. Есть проблемы совместимости с браузерами в использовании некоторых свойств javascript, включая различия для определения степени (пикселей), Например, Тег P. Представленные решения не может быть окончательной, но это, безусловно, поможет вам.

Код был протестирован в обозревателе Internet Explorer 9, Firefox 14.0.1 и хром 21.0.1180.8.

Решение

Во всех случаях представлены ниже, Ваш IFRAME должно быть что-то вроде этого:

1
2
3
4
  <тело>
    Ниже, У нас есть IFRAME<Br />
    <Код IFRAME="iframe1" src="iframe.html" Ширина="" Высота=""></IFRAME>
  </тело>

Примечание: Можно задать ширину в IFRAME должны взять на себя ваши с помощью атрибута “Ширина”. Это также интересно, как приложение, Используйте атрибуты frameborder =’0′ и скроллинг = ' нет’, Это означает, что “без границ” и “полоса прокрутки”, соответственно.

Параметр 1 – JQuery

Этот случай, принцип, служит только для IFRAME SRC которого загружается через файл вместе, на том же сервере и домене, Поэтому, Это не использовать, указывая на страницы на других доменах. После поиска, Я сделал комбинации с частями скриптов, найденные в Интернете, ссылка в конце поста. В любом случае, Существует никакой гарантии, операции при определенных условиях или структура страницы для загрузки.

Я имел некоторые трудности, чтобы найти решение, Поскольку метод. загрузить() не работает правильно в Internet Explorer, Поскольку он выглядел как кэширование ссылка на страницу загрузки. Это была решена с помощью устройства для добавления в конец URL-адреса нумерации, на основании getTime(), Это возвращает количество миллисекунд с момента 01/01/1970.

Очень хорошо этот сценарий является, что вам только нужно поместить его между тегами HEAD вашей страницы где IFRAME. Конечно, изменить идентификатор IFRAME для вашего, в примере вызов “#iframe1” и, И наконец, Задайте атрибут SRC на страницу, которую вы носите, в примере вызов “IFRAME.HTML”. Обратите внимание на вызов в начале JQuery в; Если вы уже сделали это, можно опустить его.

1
2
3
4
5
6
7
8
9
10
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></сценарий>
  <Тип сценария="text/javascript">
    $(документ).готов(Функция() {
      myIframe = $("#iframe1").attr("src","iframe.html?" + Новые функции Дата().getTime());
      $(myIframe).загрузить(Функция() {          
        var myDoc = (myIframe.Получить(0).документ) ? myIframe.Получить(0).документ : myIframe.Получить(0).contentWindow.документ;
        myIframe.Высота(myDoc.тело.ScrollHeight+10);
      });
    });
  </сценарий>

Параметр 2 – CSS

Еще одно интересное решение InHosting, позволяет использовать только CSS и возможно вы может служить, если вы хотите загружать только один IFRAME. К сожалению, является весьма ограниченным и не работает правильно для других целей. Вы можете загрузить (Внедрить) страницы из других доменов.

1
2
3
4
  <Тип стиля="text/css">
    HTML, тело, Div, IFRAME {маржа:0; заполнение:0; Высота:100%}
    IFRAME {дисплей:блок; Ширина:100%; граница:Нет}
  </стиль>

Параметр 3 – JavaScript

В этом методе, Вам нужно иметь доступ к исходному коду файла, который будет отображаться в IFRAME, чтобы добавить сценарий. Но это просто, и он работает хорошо. Так, Этот процесс осуществляется в двух частях:

(1) Определите ваши IFRAME, что-то вроде:
index.HTML

1
2
3
4
5
...
  <тело>
    <Код IFRAME="iframe1" src="iframe.html" Ширина="" Высота=""></IFRAME>
  </тело>
...

(2) Сделать вызов Javascript в файл, определенный в SRC IFRAME:
IFRAME.HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<HTML>
  <Руководитель>
    <Тип сценария="text/javascript">
      окно.OnLoad = Функция(){
         родитель.документ.getElementById("iframe1").Высота = документ.getElementById("myDoc").ScrollHeight + 35;
     }
    </сценарий>
  </Руководитель>
  <тело>
    <div id="myDoc">
       <p>ВОТ ВАШ ТЕКСТ</p>
       <p>Текст</p>
       <p>Текст</p>
       <p>Текст</p>
       <p>Текст</p>
       <p>Текст</p>
       <p>Текст</p>
       <p>Текст</p>
       <p>Текст</p>
       <p>Текст</p>
       <p>Текст</p>
       <p>Текст</p>  
    </Div>
  </тело>
</HTML>

Примечание: Не забудьте изменить ID вашего IFRAME к этому идентификатору() не выдерживают!

Если вы используете другой более эффективное решение, Пожалуйста,, Предоставить общий доступ!

Шрифты

Всего просмотров: 38487

19 Комментарии по “IFRAME с 100% Высота автоматически

  1. Ренато сказал:

    Поздравляю !! После 3 дней, выполняя несколько попыток ваш был только что работал.

  2. Шейн сказал:

    Протестировано здесь в Firefox и он работал прямой стрелкой!! В IE 10 просит вас запустить надстройку activex, AI после позволяют правильно отображает страницы, как содержание.
    Уже в Google Chrome iframe был довольно мал, и я не смог отрегулировать…
    Я использовал вариант 1 jQuery и единственное, что я изменил было имя страницы и ширина =”700″.
    Любые советы для решения проблемы?
    Спасибо!!

  3. Даниэль Филипе сказал:

    Властный человек, который вы представили нам, Я был весь день, глядя на пейджинговых систем с jquery, чтобы сделать все время загрузки страницы (но очень сложны), Дай думал о сдачи в кадре, что вам просто нужно загрузить раме с помощью php и mysql только, но был избит на высоту кадра. Огромное спасибо! 100%.

  4. Уэсли сказал:

    Гений, Я провел часы ища для кода, который работает и это работало отлично! Теперь я могу открыть PDF внутри IFRAME и сделать перенаправление на странице для загрузки ZIP-файла при чтении книги.

  5. Джованни пол сказал:

    Спасибо вам большое за Совет. Отличное объяснение и 100% функциональные.

Оставь ответ

Ваш электронный адрес не будет опубликован. Обязательные поля отмечены *