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

Если вам не нужно обрабатывать содержимое 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>

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

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

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

решение на 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 к длине... Я работал на себя.

к твоему сведению!--9-->: если у вас уже есть атрибут "высота" на вашем iFrame, это просто добавляет style="height: xxx". Это может быть не то, чего ты хочешь.

может быть немного поздно, так как все остальные ответы старше: -), но... вот мое решение. Протестировано в реальных 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
        });
    });
});

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

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

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.

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

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

SiteB загружается внутри сайта siteA

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

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

или

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

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

// 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); 

если вы хотите добавить безопасность соединение вы можете использовать это условие if в 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);

этот ответ применим только для веб-сайтов, использующих 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

я реализую решение conroyp frame-in-frame для замены решения, основанного на настройке документа.домен, но оказалось довольно сложно правильно определить высоту содержимого 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 () - это функция обнаружения браузера, "вдохновленная" Ext Corehttp://docs.sencha.com/core/source/Ext.html#method-Ext-apply

это хорошо работало для FF и IE, но тогда были проблемы с Chrome. Один из них был проблемой времени, по-видимому, Chrome занимает некоторое время, чтобы установить/обнаружить высоту iframe. И тогда 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);
}

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

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

<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>

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

когда вы хотите уменьшить масштаб веб-страницы, чтобы вписать ее в размер iframe:

1. вы должны изменить размер окне iframe чтобы соответствовать его содержанию
2. затем вы должны уменьшить весь 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>

вот подход jQuery, который добавляет информацию в json через атрибут src iframe. Вот демонстрация, изменение размера и прокрутка этого окна.. полученный url-адрес с json выглядит следующим образом... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight: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);

получить высоту содержимого 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);
 }

работа с 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);
}
});

использование jQuery:

родитель.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>

ребенок.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>

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

что-то в этом роде, я считаю, должно работать.

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

загрузите это с помощью body onload на содержимое iframe.

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

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