Изменение размера фрейма в зависимости от содержимого

498

Я работаю над iGoogle-подобным приложением. Контент из других приложений (в других доменах) показывается с помощью iframes.

Как изменить размеры фреймов, чтобы они соответствовали высоте содержимого фреймов?

Я пытался расшифровать javascript, который использует Google, но он запутан, и поиск в Интернете до сих пор был бесплодным.

Обновление: обратите внимание, что контент загружается из других доменов, поэтому применяется та же политика происхождения .

javascript iframe widget larssg
источник

584

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

Существует способ обойти одну и ту же политику происхождения, но она требует изменений как для содержимого iframed, так и для страницы создания кадров, поэтому, если у вас нет возможности запрашивать изменения с обеих сторон, этот метод не будет очень полезен для вас, Боюсь.

Существует особенность браузера, которая позволяет нам обходить ту же политику происхождения - javascript может взаимодействовать либо со страницами в своем собственном домене, либо со страницами, на которые он встроен, но не со страницами, на которых он создан, например, если у вас:

 www.foo.com/home.html, which iframes
 |-> www.bar.net/framed.html, which iframes
     |-> www.foo.com/helper.html

затем home.htmlможет общаться с framed.html(iframed) и helper.html(тот же домен).

 Communication options for each page:
 +-------------------------+-----------+-------------+-------------+
 |                         | home.html | framed.html | helper.html |
 +-------------------------+-----------+-------------+-------------+
 | www.foo.com/home.html   |    N/A    |     YES     |     YES     |
 | www.bar.net/framed.html |    NO     |     N/A     |     YES     |
 | www.foo.com/helper.html |    YES    |     YES     |     N/A     |
 +-------------------------+-----------+-------------+-------------+

framed.htmlможет отправлять сообщения helper.html(в рамке), но нет home.html (ребенок не может общаться между доменами с родителем).

Ключевым моментом здесь является то, что вы helper.htmlможете получать сообщения framed.htmlи общаться с ними home.html.

Таким образом, по существу, когда framed.htmlзагружается, он helper.htmlопределяет свою собственную высоту, говорит , что передает сообщение home.html, которое может затем изменить размер iframe, в котором framed.htmlнаходится.

Самый простой способ мы нашли для передачи сообщений от framed.htmlдоhelper.html был найден через аргумент URL. Для этого framed.htmlесть iframe с src=''указанным. Когда он onloadстреляет, он оценивает собственную высоту и устанавливает в этом месте src для iframe:helper.html?height=N

Здесь есть объяснение того, как Facebook справляется с этим, что может быть немного яснее, чем мое выше!

Код

В www.foo.com/home.html , требуется следующий код javascript (его можно загрузить из файла .js в любом домене, между прочим ..):

<script>
  // Resize iframe to full height
  function resizeIframe(height)
  {
    // "+60" is a general rule of thumb to allow for differences in
    // IE & and FF height reporting, can be adjusted as required..
    document.getElementById('frame_name_here').height = parseInt(height)+60;
  }
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>

В www.bar.net/framed.html :

<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>

<script type="text/javascript">
  function iframeResizePipe()
  {
     // What's the page height?
     var height = document.body.scrollHeight;

     // Going to 'pipe' the data to the parent through the helpframe..
     var pipe = document.getElementById('helpframe');

     // Cachebuster a precaution here to stop browser caching interfering
     pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();

  }
</script>

Содержание www.foo.com/helper.html:

<html> 
<!-- 
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content 
--> 
  <body onload="parentIframeResize()"> 
    <script> 
      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize()
      {
         var height = getParam('height');
         // This works as our parent's parent is on our domain..
         parent.parent.resizeIframe(height);
      }

      // Helper function, parse param from request string
      function getParam( name )
      {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
    </script> 
  </body> 
</html>

ConroyP
источник

7

полностью полон понимания. Мне было интересно, почему на igoogle.com был файл helper.html! Спасибо

IEnumerator

9

Круто, спасибо! Я сделал пару дополнений: используйте jQuery, чтобы получить рост в framed.html (проблема FF, тело продолжало расти): var height = $ (document.body) .height (); Использовал событие onload body для создания фрейма в home.html, аналогичного вашему подходу в framed.html. Адреса, не обновляющие фрейм при обновлении в FF и Safari.

Абдулла Джибали

5

Genius! В дополнение к дополнениям Абдуллы: вместо того, чтобы устанавливать onload тела для вызоваparentIframeResize() загрузку , я использовал JQuery для отслеживания загрузки страницы и любых событий изменения размера: $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);это позволяет мне устанавливать iframe width="100%"и, если ширина окна изменяется, чтобы сделать перенос текста или что-то еще, внутренняя рамка распознает, что ее нужно изменить.

StriplingWarrior

9

Я предлагаю дать iframe id = frame_name_here атрибут высоты по умолчанию, такой как height = "2000". Это означает, что при загрузке страницы содержимое в рамке становится видимым. Когда происходит изменение размера, «мерцание» отсутствует. Изменение размера уменьшается / увеличивается ниже сгиба страницы. Если вы знаете максимальную высоту вашего содержимого iframed, тогда используйте это значение ... это также приведет к лучшему восприятию noscript.

Крис Джейкоб

3

Семь лет спустя, все еще лучшее кросс-браузерное, междоменное решение, которое я нашел. Браво.

FurryWombat

81

Если вам не нужно обрабатывать содержимое iframe из другого домена, попробуйте этот код, он полностью решит проблему и прост:

<script language="JavaScript">
<!--
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>

<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>

Ahmy
источник

9

Возможно, было бы более оптимальным передать сам элемент в функцию, чтобы избежать всего того, что у document.getElementById(id)вас есть, и упростить код.

Чт

1

Это не работает для меня, так как contentWindow.document.body.scrollHeight содержит 0, а не реальную высоту.

кроиз

4

Это решение, как и все другие, которые я пробовал, работает только в том случае, если высота увеличивается, если от высокой страницы вы переходите к более короткой, высота все равно устанавливается в соответствии с высотой первой. Кто-нибудь нашел решение этой проблемы?

Эудженио

6

@Eugenio и все остальные, включая меня, чтобы решить эту последнюю проблему: см. Stackoverflow.com/questions/3053072/… Прежде чем запрашивать высоту документа внутри iframe, вы должны установить высоту объекта iframe на «auto». Обратите внимание, что вы должны использовать style.height, а не только высоту, как в ответе выше

Кайл,

7

Я не понимаю ... вы проверяете существование document.getElementById, а затем вызываете его вне проверенной области?

Леголас

41

https://developer.mozilla.org/en/DOM/window.postMessage

window.postMessage ()

window.postMessage - это метод безопасного включения связи между источниками. Как правило, скрипты на разных страницах могут получать доступ друг к другу только тогда и только тогда, когда страницы, которые их выполняли, находятся в местах с одинаковым протоколом (обычно с http), номером порта (по умолчанию для http используется 80) и хостом (по модулю). document.domain устанавливается обеими страницами на одно и то же значение). window.postMessage предоставляет управляемый механизм, позволяющий обойти это ограничение безопасным способом при правильном использовании.

Резюме

window.postMessage, когда вызывается, вызывает отправку MessageEvent в целевом окне, когда завершается любой ожидающий сценарий, который должен быть выполнен (например, оставшиеся обработчики событий, если window.postMessage вызывается из обработчика событий, предварительно установленные ожидания ожидания и т. д. ). MessageEvent имеет тип сообщения, свойство data, для которого задано строковое значение первого аргумента, предоставленного window.postMessage, свойство origin, соответствующее источнику основного документа в окне, вызывающем window.postMessage во временном окне. Был вызван postMessage и свойство источника, которое является окном, из которого вызывается window.postMessage. (Другие стандартные свойства событий присутствуют с их ожидаемыми значениями.)

Библиотека iFrame-Resizer использует postMessage для сохранения размера iFrame в соответствии с его содержимым вместе с MutationObserver для обнаружения изменений в контенте и не зависит от jQuery.

https://github.com/davidjbradshaw/iframe-resizer

jQuery: совершенство междоменных сценариев

http://benalman.com/projects/jquery-postmessage-plugin/

Имеет демонстрацию изменения размера окна iframe ...

http://benalman.com/code/projects/jquery-postmessage/examples/iframe/

В этой статье показано, как убрать зависимость от jQuery ... Plus содержит много полезной информации и ссылок на другие решения.

http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/

Пример Barebones ...

http://onlineaspect.com/uploads/postmessage/parent.html

HTML 5 рабочий проект для window.postMessage

http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages

Джон Резиг по обмену сообщениями между окнами

http://ejohn.org/blog/cross-window-messaging/

Крис Джейкоб
источник

PostMessage сам по себе не является кросс-браузерным, но плагин jQuery, похоже, хорошо подделывает его при необходимости. Единственная реальная проблема - это «мусор», который добавляется в строку URL в тех случаях, когда postMessage не поддерживается.

Herms

2

PostMessage кажется X-Browser. Только IE должен заботиться об ошибках или вещах: 1. Связь только между фреймами или фреймами 2. Только возможность публикации строк. См .: caniuse.com/x-doc-messaging

Кристиан Кютбах,

3

Было бы приятно видеть, что вы отвечаете на вопрос, а не объясняете вспомогательную технологию, которая помогает с решением ...

hitautodestruct

periscopedata использует postMessage, если он достаточно хорош для нас, он достаточно хорош для нас. Вот их документы: doc.periscopedata.com/docv2/embed-api-options

Евгений Афанасьев

8

Самый простой способ использования jQuery:

$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
    $(this).css("height", $(this).contents().height() + "px");
});

Омер Аршад
источник

14

Не кросс-домен, как требуется.

Виллем

6

Решение на http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html прекрасно работает (использует jQuery):

<script type=”text/javascript”>
  $(document).ready(function() {
    var theFrame = $(”#iFrameToAdjust”, parent.document.body);
    theFrame.height($(document.body).height() + 30);
  });
</script>

Я не знаю, что вам нужно добавить 30 к длине ... 1 работал для меня.

К вашему сведению : если у вас уже есть атрибут «высота» в вашем iFrame, это просто добавляет style = "height: xxx". Это может быть не то, что вы хотите.

Мачо Мэтт
источник

7

Нет междоменных, нет.

Volomike

Как раз то, что мне нужно, так как я не делаю междоменный, +1 за действительный HTML.

WildJoe

4

может быть немного поздно, так как все остальные ответы старше :-) но ... вот мое решение. Проверено в реальных FF, Chrome и Safari 5.0.

CSS:

iframe {border:0; overflow:hidden;}

JavaScript:

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

Надеюсь, это кому-нибудь поможет.

ddlab
источник

@pashute - вы имеете в виду «кросс-домен»?

Люк

Извините. Имеется в виду: не работает кроссплатформенный ... Вот публичная суть: gist.github.com/pashute/c4705ce7f767f50fdf56d0030ecf9192 Получает ошибку Отказ в выполнении. Изменение сценария на type = "text / javascript" не помогает. Ни установка ширины и высоты iframe (скажем, 80%).

Пашуте

4

Наконец, я нашел другое решение для отправки данных на родительский сайт из iframe window.postMessage(message, targetOrigin);. Здесь я объясняю, как я это сделал.

Сайт A = http://foo.com Сайт B = http://bar.com

Сайт B загружается внутри сайта. Сайт

Сайт SiteB имеет эту строку

window.parent.postMessage("Hello From IFrame", "*");

или

window.parent.postMessage("Hello From IFrame", "http://foo.com");

Тогда сайт А имеет следующий код

// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];


var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
   alert(e.data);
   // Do whatever you want to do with the data got from IFrame in Parent form.
}, false);

Если вы хотите добавить безопасное соединение, вы можете использовать это, если условие в eventer(messageEvent, function (e) {})

if (e.origin == 'http://iframe.example.com') {
    alert(e.data); 
    // Do whatever you want to do with the data got from IFrame in Parent form.
}

Для IE

Внутри IFrame:

 window.parent.postMessage('{"key":"value"}','*');

За пределами:

 eventer(messageEvent, function (e) {
   var data = jQuery.parseJSON(e.data);
   doSomething(data.key);
 }, false);

Selvamani
источник

2

Вот простое решение с использованием динамически генерируемой таблицы стилей, обслуживаемой тем же сервером, что и содержимое iframe. Проще говоря, таблица стилей «знает», что находится в iframe, и знает размеры, используемые для стилизации iframe. Это обходит те же ограничения политики происхождения.

http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/

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

<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" />  <iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>

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

Вон Роуселл
источник

Ссылка не работает. Не могли бы вы поделиться соответствующим кодом в своем ответе, чтобы он оставался актуальным для этой темы?

зет

2

Этот ответ применим только для сайтов, которые используют Bootstrap. Функция адаптивного встраивания Bootstrap делает свою работу. Он основан на ширине (а не высоте) содержимого.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

Разан Пол
источник

Это работает для встраивания видео, но если я хочу встроить веб-страницу с высотой, она получает прокрутку и странную высоту.

cabaji99

1

Я внедряю решение ConroyP для фреймов в кадре, чтобы заменить решение, основанное на настройке document.domain, но мне было довольно сложно правильно определить высоту содержимого iframe в разных браузерах (тестирование с FF11, Ch17 и IE9 сейчас ).

ConroyP использует:

var height = document.body.scrollHeight;

Но это работает только при начальной загрузке страницы. Мой iframe имеет динамическое содержимое, и мне нужно изменить размер iframe для определенных событий.

В итоге я использовал разные свойства JS для разных браузеров.

function getDim () {
    var body = document.body,
        html = document.documentElement;

    var bc = body.clientHeight;
    var bo = body.offsetHeight;
    var bs = body.scrollHeight;
    var hc = html.clientHeight;
    var ho = html.offsetHeight;
    var hs = html.scrollHeight;

    var h = Math.max(bc, bo, bs, hc, hs, ho);

    var bd = getBrowserData();

    // Select height property to use depending on browser
    if (bd.isGecko) {
        // FF 11
        h = hc;
    } else if (bd.isChrome) {
        // CH 17
        h = hc;
    } else if (bd.isIE) {
        // IE 9
        h = bs;
    }

    return h;
}

getBrowserData () - функция обнаружения браузера, «вдохновленная» http://docs.sencha.com/core/source/Ext.html#method-Ext-apply функцией Ext Core.

Это хорошо работает для FF и IE, но затем возникли проблемы с Chrome. Одной из них была проблема синхронизации, очевидно, что Chrome требуется некоторое время, чтобы установить / определить высоту фрейма. Кроме того, Chrome также никогда не возвращает правильную высоту содержимого в iframe, если iframe был выше содержимого. Это не будет работать с динамическим контентом, когда высота уменьшается.

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

function resize () {
    // Reset the iframes height to a low value.
    // Otherwise Chrome won't detect the content height of the iframe.
    setIframeHeight(150);

    // Delay getting the dimensions because Chrome needs
    // a few moments to get the correct height.
    setTimeout("getDimAndResize()", 100);
}

Код не оптимизирован, это из моего тестирования на уровне :)

Надеюсь, кто-то найдет это полезным!

Тор Гендевик
источник

1

<html>
<head>
<script>
function frameSize(id){
var frameHeight;

document.getElementById(id).height=0 + "px";
if(document.getElementById){
    newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;    
}

document.getElementById(id).height= (frameHeight) + "px";
}
</script>
</head>

<body>

<iframe id="frame"  src="startframe.html" frameborder="0" marginheight="0" hspace=20     width="100%" 

onload="javascript:frameSize('frame');">

<p>This will work, but you need to host it on an http server, you can do it locally.    </p>
</body>
</html>

webd3sign
источник

0

Гаджеты iGoogle должны активно реализовывать изменение размера, поэтому я полагаю, что в междоменной модели вы не сможете сделать это без участия удаленного контента. Если ваш контент может отправить сообщение с новым размером на страницу контейнера с использованием типичных междоменных методов связи, то все остальное просто.

Джори Себрехтс
источник

0

Если вы хотите уменьшить веб-страницу, чтобы она соответствовала размеру фрейма:

Вы должны изменить размер iframe чтобы он соответствовал содержанию
Затем вы должны уменьшить весь iframe с загруженным содержимым веб-страницы.

Вот пример:

<div id="wrap">
   <IFRAME ID="frame" name="Main" src ="http://www.google.com" />
</div>

<style type="text/css">
    #wrap { width: 130px; height: 130px; padding: 0; overflow: hidden; }
    #frame { width: 900px; height: 600px; border: 1px solid black; }
    #frame { zoom:0.15; -moz-transform:scale(0.15);-moz-transform-origin: 0 0; }
</style>

Кау
источник

0

Вот подход jQuery, который добавляет информацию в json через атрибут src iframe. Вот демонстрация, измените размер и прокрутите это окно ... Полученный URL с json выглядит следующим образом ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/# enjdocHeight:5124,windowHeight:1019,scrollHeight: 571} #

Вот скрипта исходного кода http://jsfiddle.net/zippyskippy/RJN3G/

function updateLocation(){

    var loc = window.location.href;
    window.location.href = loc.replace(/#{.*}#/,"") 
        + "#{docHeight:"+$(document).height() 
        + ",windowHeight:"+$(window).height()
        + ",scrollHeight:"+$(window).scrollTop()
        +"}#";

};

//setInterval(updateLocation,500);

$(window).resize(updateLocation);
$(window).scroll(updateLocation);

Чад Стил
источник

0

получить высоту содержимого iframe, затем передать его этому iframe

 var iframes = document.getElementsByTagName("iframe");
 for(var i = 0, len = iframes.length; i<len; i++){
      window.frames[i].onload = function(_i){
           return function(){
                     iframes[_i].style.height = window.frames[_i].document.body.scrollHeight + "px";
                     }
      }(i);
 }

YellowGlue
источник

1

Можете ли вы добавить какое-то описание того, почему ваш код отвечает на вопрос?

Пророчится

0

Работа с jquery под нагрузкой (кросс-браузер):

 <iframe src="your_url" marginwidth="0"  marginheight="0" scrolling="No" frameborder="0"  hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%"  width="100%"></iframe>

function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
 }

при изменении размера на адаптивной странице:

$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
 $('#frame').css("height", heightFrame);
}
});

Марио Гонсалес Флорес
источник

-1

Используя jQuery:

parent.html

<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
iframe {
    width: 100%;
    border: 1px solid black;
}
</style>
<script>
function foo(w, h) {
    $("iframe").css({width: w, height: h});
    return true;  // for debug purposes
}
</script>
<iframe src="child.html"></iframe>
</body>

child.html

<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
    var w = $("#container").css("width");
    var h = $("#container").css("height");

    var req = parent.foo(w, h);
    console.log(req); // for debug purposes
});
</script>
<style>
body, html {
    margin: 0;
}
#container {
    width: 500px;
    height: 500px;
    background-color: red;
}
</style>
<div id="container"></div>
</body>

Нино Шкопац
источник

-2

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

roryf
источник

-2

Что-то на линии этого, я верю, должно работать.

parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;

Загрузите это с нагрузкой тела на содержание iframe.

Олафур Вааге
источник

3

Это невозможно, так как содержимое в iFrames загружается из других доменов, поэтому попытка сделать это приводит к ошибке, например, из Firefox: «В доступе запрещено свойство Window.document».

Larssg

-4

У меня есть простое решение, и вы должны определить ширину и высоту в ссылке, попробуйте (это работает с большинством браузеров):

<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>

فيصل خلبوص
источник

Изменение размера фрейма в зависимости от содержимого

Ответы:

получить высоту содержимого iframe, затем передать его этому iframe