Междоменное изменение размера iframe?

Я ищу хороший междоменный iframe resizing script, который настраивает его высоту на основе его содержимого. У меня есть доступ к html/css для источника iframe. Есть ли там?

ОТВЕТЫ

Ответ 1

Если ваши пользователи находятся в современных браузерах, вы можете легко решить это с помощью postMessage в HTML5. Здесь быстрое решение, которое хорошо работает:

Страница iframe:

<!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
  <h3>Got post?</h3>
  <p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>

Родительская страница, которая содержит iframe (и хотела бы знать ее высоту):

<script type="text/javascript">
  function resizeCrossDomainIframe(id, other_domain) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      if (event.origin !== other_domain) return; // only accept messages from the specified domain
      if (isNaN(event.data)) return; // only accept something which can be parsed as a number
      var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
      iframe.height = height + "px";
    }, false);
  }
</script>

<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
</iframe>

Ответ 2

Не удалось найти решение, которое касалось всех разных вариантов использования, я написал пишущий простой js lib, который поддерживает как ширину, так и высоту, изменяя размер содержимого и несколько фреймов на одной странице.

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

Ответ 4

Первый script на этой странице - тот, который использует postMessage в HTML5 - также работает для iframes на мобильном устройстве - путем изменения размера iframe на контент - например, для синдикации кросс-домена - вы можете легко прокручивать iphones или android, таким образом, что невозможно с iframes иначе

Ответ 5

После некоторого исследования я закончил использование механизма передачи сообщений html5, заключенного в jQuery pluging, который делает его совместимым со старыми браузерами, используя различные методы ( некоторые из них описаны в этом потоке).

Конечное решение очень просто.

На главной странице (родительской):

// executes when a message is received from the iframe, to adjust 
// the iframe height
    $.receiveMessage(
        function( event ){
            $( 'my_iframe' ).css({
                height: event.data
            });
    });

// Please note this function could also verify event.origin and other security-related checks.

На странице iframe:

$(function(){

    // Sends a message to the parent window to tell it the height of the 
    // iframe body

    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

    $.postMessage(
        $('body').outerHeight( true ) + 'px',
        '*',
        target
    );

});

Я тестировал это на Chrome 13+, Firefox 3.6+, IE7, 8 и 9 на XP и W7, сафари на OSX и W7.;)

Ответ 6

Следующий код работал у меня:

var iframe = document.getElementById(id);  
iframe.height = iframe.contentDocument.body.scrollHeight;

Протестировано в Opera 11, IE 8 9, FF 8, Chrome 16

Ответ 7

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

следует пример:

<?php
            if(isset($_GET['html'])) $blogpagehtml = file_get_contents(urldecode($_GET['html']));
            else $blogpagehtml = file_get_contents('http://r****d.wordpress.com/');
            $doc = new DOMDocument();
            libxml_use_internal_errors(true);
            $doc->loadHTML($blogpagehtml);
            libxml_use_internal_errors(false);
            $anchors = $doc->getElementsByTagName("a");
            foreach($anchors as $anchor) {
                 $anchorlink=$anchor->getAttribute("href");
                 if(strpos($anchorlink,"http://r****d.wordpress")===false) $anchor->setAttribute("target","_top");
                 else $anchor->setAttribute("href","formatimportedblog.php?html=".urlencode($anchorlink));        
            }
            $newblogpagehtml = $doc->saveHTML();
            $token = rand(0,50);
            file_put_contents('tempblog'.$token.'.html',$newblogpagehtml);


?>

            <iframe id='iframe1' style='width:970px;margin:0 auto;' src='tempblog<?php echo $token; ?>.html' frameborder="0" scrolling="no" onLoad="autoResize('iframe1');" height="5600"></iframe>