кросс-доменный iframe resizer? - PullRequest
Новая
       12

кросс-доменный iframe resizer?

28 голосов
/ 09 апреля 2011

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

Ответы [ 7 ]

34 голосов
/ 04 августа 2011

Если ваши пользователи используют современные браузеры, вы можете легко решить эту проблему с помощью 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>
15 голосов
/ 15 августа 2013

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

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

1 голос
/ 25 мая 2012

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

1 голос
/ 09 апреля 2011

EasyXDM может сделать именно это :) Этот пост t объясняет суть

0 голосов
/ 09 февраля 2014

У меня есть совершенно другое решение для изменения размера 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>
0 голосов
/ 19 декабря 2011

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

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

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

0 голосов
/ 01 декабря 2011

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

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

// executes when a message is received from the iframe, to adjust 
// the iframe's 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's 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.;)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...