Zmiana rozmiaru ramki iframe na podstawie zawartości

Jeśli nie musisz obsługiwać zawartości iframe z innej domeny, wypróbuj ten kod, to całkowicie rozwiąże problem i jest to proste:

<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

okno.postMessage()

Okno.postMessage jest metodą umożliwiającą bezpieczną komunikację między źródłami. Zwykle Skrypty na różnych stronach mają dostęp do siebie tylko wtedy i tylko wtedy, gdy strony, które je wykonały, znajdują się w lokalizacjach z tym samym protokołem (Zwykle zarówno http), numerem portu (80 jest domyślnym dla http) i hostem (dokument modulo.domena jest ustawiana zarówno przez strony o tej samej wartości). okno.postMessage zapewnia kontrolowany mechanizm obejścia tego ograniczenia w sposób bezpieczny, gdy jest prawidłowo stosowany.

podsumowanie

Okno.po wywołaniu postMessage powoduje wysłanie MessageEvent do okna docelowego, gdy ukończy się dowolny oczekujący skrypt, który musi zostać wykonany (np. pozostałe procedury obsługi zdarzeń if window.postMessage jest wywoływany z obsługi zdarzenia, wcześniej ustawionych timeoutów oczekujących, itd.). MessageEvent ma type message, właściwość danych, która jest ustawiona na wartość łańcuchową pierwszego argumentu dostarczonego do window.postMessage, właściwość origin odpowiadająca źródłu głównego dokumentu w oknie wywołującym okno.postMessage w oknie czasowym.wywołano postMessage i właściwość źródłową, która jest oknem, z którego okna.postMessage jest nazywany. (Inne standardowe właściwości zdarzeń są obecne wraz z ich oczekiwanymi wartościami.)

Biblioteka iFrame-Resizer używa postMessage, aby zachować rozmiar iFrame do jego zawartości, wraz z MutationObserver do wykrywania zmian w zawartości i nie zależy od jQuery.

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

JQuery: Cross-domain scripting

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

MA demo zmiany rozmiaru iframe okno...

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

Ten artykuł pokazuje jak usunąć zależność od jQuery... Plus ma wiele przydatnych informacji i linków do innych rozwiązań.

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

Przykład Barebones...

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

HTML 5 working draft on okno.postMessage

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

John Resig on Cross-Window Messaging

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

Najprostszy sposób użycia jQuery:

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

Rozwiązanie na http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html działa świetnie (używa jQuery):

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

FYI: Jeśli masz już atrybut "height" na ramce iFrame, to po prostu dodaje style = "height: xxx". Może nie tego chcesz.

Może być trochę późno, ponieważ wszystkie inne odpowiedzi są starsze : -) ale... oto moje rozwiązanie. Testowane w rzeczywistych FF, Chrome i 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
        });
    });
});

Oto proste rozwiązanie wykorzystujące dynamicznie generowany arkusz stylów obsługiwany przez ten sam serwer co zawartość iframe. Po prostu arkusz stylów "wie", co znajduje się w ramce iframe i zna wymiary, których należy użyć do stylizacji ramki iframe. Dotyczy to tych samych ograniczeń polityki pochodzenia.

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

Więc dostarczony kod iframe będzie miał dołączony arkusz stylów jak więc...

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

Wymaga to, aby logika po stronie serwera była w stanie obliczyć wymiary renderowanej zawartości ramki iframe.

W końcu znalazłem inne rozwiązanie do wysyłania danych do strony nadrzędnej z iframe za pomocą window.postMessage(message, targetOrigin);. Tutaj wyjaśniam, jak to zrobiłem.

Site A = http://foo.com Strona B = http://bar.com

SiteB ładuje się wewnątrz witryny siteA

SiteB website have this line

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

Lub

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

Następnie siteA ma następujący kod

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

Jeśli chcesz dodać połączenie zabezpieczające, możesz użyć tego, jeśli warunek w 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.
}

Dla IE

Wewnątrz IFrame:

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

Na Zewnątrz:

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

Ta odpowiedź dotyczy tylko stron internetowych, które używają Bootstrap. Funkcja szybkiego osadzania w Bootstrap wykonuje zadanie. Opiera się na szerokości (nie wysokości) zawartości.

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

Implementuję rozwiązanie conroyp frame-in-frame, aby zastąpić rozwiązanie oparte na ustawieniu dokumentu.domeny, ale okazało się, że jest to dość trudne określenie wysokości zawartości iframe poprawnie w różnych przeglądarkach(testowanie z FF11, Ch17 i IE9 teraz).

Conroyp używa:

var height = document.body.scrollHeight;

Ale to działa tylko przy początkowym ładowaniu strony. Mój iframe ma dynamiczną zawartość i muszę zmienić rozmiar iframe w pewnych zdarzeniach.

Skończyło się na używaniu różnych JS właściwości dla różnych przeglądarek.

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() to funkcja wykrywania przeglądarki "zainspirowana" przez Ext Core ' a http://docs.sencha.com/core/source/Ext.html#method-Ext-apply

To działało dobrze dla FF i IE, ale potem były problemy z Chrome. Jednym z nich był problem z czasem, najwyraźniej Chrome zajmuje trochę czasu, aby ustawić / wykryć wysokość iframe. I wtedy Chrome również nigdy nie zwrócił wysokości zawartości w ramce iframe poprawnie, jeśli ramka iframe była wyższa niż zawartość. To nie działa w przypadku zawartości dynamicznej, gdy wysokość jest zmniejszona.

Aby rozwiązać ten problem, zawsze ustawiam ramkę iframe na niską wysokość przed wykryciem wysokości zawartości, a następnie ustawiam wysokość ramki iframe na prawidłową wartość.

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

Kod nie jest zoptymalizowany, pochodzi z moich testów devel:)

Mam nadzieję, że ktoś uzna to za pomocne!

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

Gadżety IGoogle muszą aktywnie wdrażać zmiany rozmiaru, więc moim zdaniem jest w modelu cross-domain nie można tego zrobić bez zdalnej treści biorąc udział w jakiś sposób. Jeśli zawartość może wysłać wiadomość o nowym rozmiarze do strony kontenera przy użyciu typowych technik komunikacji między domenami, reszta jest prosta.

Gdy chcesz pomniejszyć stronę internetową, aby dopasować ją do rozmiaru iframe:

1. należy zmienić rozmiar iframe , aby dopasować go do zawartości
2. Następnie należy pomniejszyć cały iframe z załadowaną zawartością strony

Oto przykład:

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

Oto podejście jQuery, które dodaje informacje w json poprzez atrybut src ramki iframe. Oto demo, Zmień rozmiar i przewiń to okno.. wynikowy url z json wygląda tak... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight:571}#

Oto kod źródłowy 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);

Get iFrame content height then give it to this 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);
 }

Praca z jquery przy ładowaniu (cross browser):

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

Przy zmianie rozmiaru w responsywnej stronie:

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

Using jQuery:

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

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

Jest to nieco trudne, ponieważ musisz wiedzieć, kiedy strona iframe została załadowana, co jest trudne, gdy nie masz kontroli nad jej treścią. Możliwe jest dodanie obsługi onload do iframe, ale próbowałem tego w przeszłości i ma znacznie inne zachowanie w różnych przeglądarkach (nie zgadnij, kto jest najbardziej denerwujący...). Prawdopodobnie będziesz musiał dodać funkcję do strony iframe, która wykonuje zmianę rozmiaru i wprowadzić skrypt do zawartości, która nasłuchuje zdarzeń lub zmienia rozmiar zdarzeń, które następnie wywołują poprzednią funkcję. Myślę, że Dodaj funkcję do strony, ponieważ chcesz upewnić się, że jest Bezpieczna, ale nie mam pojęcia, jak łatwo będzie to zrobić.

Coś z tego, co wierzę, powinno zadziałać.

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

Załaduj to swoim ciałem na zawartość iframe.

Mam proste rozwiązanie i wymaga określenia szerokości i wysokości w linku, spróbuj (działa z większością przeglądarek):

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