Zmiana rozmiaru elementu iframe na podstawie zawartości

498

Pracuję nad aplikacją podobną do iGoogle. Treści z innych aplikacji (w innych domenach) są wyświetlane przy użyciu ramek iframe.

Jak zmienić rozmiar iframe, aby dopasować go do wysokości zawartości iframe?

Próbowałem rozszyfrować javascript używany przez Google, ale jest on zaciemniony, a wyszukiwanie w sieci było jak dotąd bezowocne.

Aktualizacja: należy pamiętać, że treść jest ładowana z innych domen, dlatego obowiązują zasady tego samego pochodzenia .

javascript iframe widget larssg
źródło

584

Wystąpił tego rodzaju problem, ale nieco odwrotnie niż w twojej sytuacji - dostarczaliśmy zawartość iframed do witryn w innych domenach, więc problem dotyczył również tej samej zasady pochodzenia . Po wielu godzinach spędzonych na przeszukiwaniu Google, w końcu znaleźliśmy (nieco ..) wykonalne rozwiązanie, które możesz być w stanie dostosować do swoich potrzeb.

Istnieje sposób obejścia tej samej zasady pochodzenia, ale wymaga ona zmian zarówno w treści iframed, jak i na stronie kadrowania, więc jeśli nie możesz poprosić o zmiany po obu stronach, ta metoda nie będzie dla ciebie bardzo przydatna, obawiam się.

Istnieje dziwactwo przeglądarki, które pozwala nam ominąć tę samą zasadę pochodzenia - javascript może komunikować się ze stronami w swojej własnej domenie lub ze stronami, które mają iframed, ale nigdy stronami, na których jest oprawiony, np. Jeśli masz:

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

następnie home.htmlmoże komunikować się z framed.html(iframed) i helper.html(ta sama domena).

 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.htmlmoże wysyłać wiadomości do helper.html(iframed), ale nie home.html (dziecko nie może komunikować się między domenami z rodzicem).

Kluczem tutaj jest to, że helper.htmlmoże odbierać wiadomości framed.htmli może się z nimi komunikowaćhome.html .

Zasadniczo, gdy framed.htmlładuje, oblicza swoją własną wysokość, mówi helper.html, który przekazuje komunikat home.html, który może następnie zmienić rozmiar iframe, w którym framed.htmlsiedzi.

Najprostszym sposobem na przekazanie wiadomości od framed.htmldo helper.htmlbyło użycie argumentu adresu URL. Aby to zrobić, framed.htmlma iframe zsrc='' określony . Gdy onloadstrzela, ocenia swoją wysokość i ustawia w tym miejscu element src iframe nahelper.html?height=N

Tutaj jest wyjaśnienie jak radzi sobie z tym Facebook, co może być nieco jaśniejsze niż moje powyżej!

Kod

W www.foo.com/home.htmlprogramie wymagany jest następujący kod javascript (można go załadować z pliku .js w dowolnej domenie, nawiasem mówiąc ...):

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

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

Zawartość 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
źródło

7

naprawdę pełne wglądu. Zastanawiałem się, dlaczego igoogle.com ma plik helper.html! Dzięki

IEnumerator,

9

Wielkie dzieki! Dodałem kilka dodatków: Użyj jQuery, aby uzyskać wysokość ciała w framed.html (problem FF, ciało ciągle rosło): var height = $ (document.body) .height (); Użyłem zdarzenia obciążenia ciała, aby utworzyć ramkę w home.html podobnym do twojego podejścia w framed.html. Adresy nie aktualizują ramki podczas odświeżania w FF i Safari.

Abdullah Jibaly

5

Geniusz! Oprócz dodatków Abdullaha: zamiast ustawiania obciążenia ciała na wywołanie parentIframeResize(), użyłem JQuery do przechwycenia zarówno ładowania strony, jak i wszelkich zdarzeń zmiany rozmiaru: $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);Pozwala mi to ustawić ramkę iframe width="100%"i jeśli szerokość okna zmieni się, aby zawinąć tekst lub coś takiego, wewnętrzna rama rozpozna, że należy ją zmienić.

StriplingWarrior

9

Sugeruję, aby nadać iframe id = nazwa_ramki_ domyślny atrybut wysokości, taki jak wysokość = „2000”. Oznacza to, że gdy strona ładuje się, treść w ramce jest widoczna. Kiedy nastąpi zmiana rozmiaru, nie ma „migotania”. Zmiana rozmiaru zmniejsza się / rozwija poniżej zakładki strony. Jeśli znasz maksymalną wysokość treści iframed, użyj tej wartości ... spowoduje to również lepsze wrażenia noscript.

Chris Jacob

3

Siedem lat później wciąż najlepsze rozwiązanie dla wielu przeglądarek, jakie znalazłem. Brawo.

FurryWombat

81

Jeśli nie musisz obsługiwać treś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>

Ahmy
źródło

9

Bardziej optymalne może być przekazanie samego elementu do funkcji, aby uniknąć wszystkich tych, document.getElementById(id)które masz i uprościć kod.

Muhd,

1

To nie działa dla mnie, ponieważ contentWindow.document.body.scrollHeight zawiera 0, a nie rzeczywistą wysokość.

kroiz

4

To rozwiązanie, podobnie jak wszystkie inne, które wypróbowałem, działa tylko wtedy, gdy wysokość wzrośnie, jeśli z wysokiej strony przejdziesz do krótszej, wysokość będzie nadal ustawiona zgodnie z wysokością pierwszej. Czy ktoś znalazł rozwiązanie tego problemu?

Eugenio

6

@Eugenio i wszyscy inni łącznie ze mną, aby rozwiązać ten ostatni problem: patrz stackoverflow.com/questions/3053072/... Zanim poprosisz o wysokość dokumentu w ramce iframe, ustaw wysokość obiektu iframe na „auto”. Pamiętaj, że powinieneś używać stylu. Wysokość nie tylko wysokość jak w powyższej odpowiedzi

Kyle

7

Nie rozumiem ... sprawdzasz, czy istnieje document.getElementById, a następnie wywołujesz go poza sprawdzonym obszarem?

Legolas,

41

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

window.postMessage ()

window.postMessage to metoda bezpiecznego włączania komunikacji 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 oba http), numerem portu (domyślnym 80 dla http) i hostem (modulo document.domain jest ustawiany przez obie strony na tę samą wartość). window.postMessage zapewnia kontrolowany mechanizm umożliwiający obejście tego ograniczenia w sposób bezpieczny, gdy jest właściwie stosowany.

Podsumowanie

wywołanie window.postMessage powoduje wywołanie MessageEvent w oknie docelowym po zakończeniu dowolnego oczekującego skryptu, który musi zostać wykonany (np. pozostałe procedury obsługi zdarzeń, jeśli wywołanie window.postMessage jest wywoływane z procedury obsługi zdarzeń, wcześniej ustawione limity czasu oczekiwania itp. ). MessageEvent ma komunikat typu, właściwość danych, która jest ustawiona na wartość ciągu pierwszego argumentu przekazanego do window.postMessage, właściwość origin odpowiadającą pochodzeniu głównego dokumentu w oknie wywołującym window.postMessage w oknie czasowym. wywołano postMessage oraz właściwość source, która jest oknem, z którego wywoływane jest okno.postMessage. (Inne standardowe właściwości zdarzeń są obecne wraz z ich oczekiwanymi wartościami).

Biblioteka iFrame-Resizer używa postMessage do utrzymania rozmiaru iFrame do jego zawartości, wraz z MutationObserver do wykrywania zmian w treści i nie zależy od jQuery.

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

jQuery: Skrypty między domenami

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

Ma demonstrację zmiany rozmiaru okna iframe ...

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

W tym artykule pokazano, jak usunąć zależność od jQuery ... Plus zawiera wiele przydatnych informacji i łączy do innych rozwiązań.

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

Przykład bez kości ...

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

Wersja robocza HTML 5 na window.postMessage

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

John Resig o przesyłaniu wiadomości między oknami

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

Chris Jacob
źródło

PostMessage sam w sobie nie jest przeglądarką, ale wydaje się, że wtyczka jQuery dobrze udaje, udając, że jest to konieczne. Jedynym prawdziwym problemem jest „śmieci”, które są dodawane do paska adresu URL w przypadkach, gdy postMessage nie jest obsługiwany.

Herms

2

postMessage wygląda na X-Browser. Tylko IE musi mieć błędy lub rzeczy, na które trzeba zwracać uwagę: 1. Komunikacja tylko między ramkami lub ramkami iframe 2. Może tylko wysyłać łańcuchy. Zobacz: caniuse.com/x-doc-messaging

Christian Kuetbach,

3

Byłoby miło, gdybyś odpowiedział na pytanie zamiast wyjaśniać technologię wspomagającą, która pomaga w rozwiązaniu problemu.

hitautodestruct

periscopedata używa postMessage, jeśli jest dla nich wystarczająco dobry, jest dla nas wystarczająco dobry. Oto ich dokumenty: doc.periscopedata.com/docv2/embed-api-options

Jewgienij

8

Najprostszy sposób przy użyciu jQuery:

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

Omer Arshad
źródło

14

Nie między domenami zgodnie z żądaniem.

willem

6

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>

Nie wiem, czy musisz dodać 30 do długości ... 1 zadziałało dla mnie.

FYI : Jeśli masz już atrybut „wysokość” w ramce iFrame, dodaje to po prostu style = „height: xxx”. To może nie być to, czego chcesz.

Macho Matt
źródło

7

Nie między domenami, nie.

Volomike

Właśnie tego potrzebowałem, ponieważ nie robię wielu domen, +1 za prawidłowy HTML.

WildJoe,

4

może się trochę spóźnić, ponieważ wszystkie pozostałe 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
        });
    });
});

Mam nadzieję, że to pomoże każdemu.

ddlab
źródło

@pashute - masz na myśli „cross domain”?

Łukasz

Przepraszam. To znaczy: nie działa na różnych platformach ... Oto publiczna treść: gist.github.com/pashute/c4705ce7f767f50fdf56d0030ecf9192 Pobiera błąd odmowy wykonania błędu. Zmiana skryptu na type = "text / javascript" nie pomaga. Ani ustawienie szerokości i wysokości elementu iframe (powiedzmy 80%).

pashute

4

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

Witryna A = http://foo.com Witryna B = http://bar.com

Witryna B ładuje się w witrynie witryny A.

Witryna SiteB ma tę linię

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

lub

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

Następnie witryna A 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 bezpieczeństwa, 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);

Selvamani
źródło

2

Oto proste rozwiązanie wykorzystujące dynamicznie generowany arkusz stylów obsługiwany przez ten sam serwer, co treść iframe. Po prostu arkusz stylów „wie”, co jest w ramce iframe, i zna wymiary, które mają być użyte do stylowania ramki iframe. Pozwala to obejść te same ograniczenia dotyczące zasad pochodzenia.

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

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

<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 mogła obliczyć wymiary renderowanej zawartości elementu iframe.

Vaughan Rowsell
źródło

Link nie działa. Czy możesz podać odpowiedni kod w swojej odpowiedzi, aby pozostał on odpowiedni dla tego wątku?

Zed

2

Ta odpowiedź dotyczy tylko stron internetowych korzystających z Bootstrap. Responsywna funkcja osadzania Bootstrap spełnia swoje zadanie. Opiera się na szerokości (nie wysokości) treś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

Razan Paul
źródło

Działa to w przypadku osadzania filmów, ale jeśli chcę osadzić stronę internetową o wysokości, przewija się ona i ma dziwną wysokość.

cabaji99

1

Wdrażam rozwiązanie ConroyP „klatka w ramce”, aby zastąpić rozwiązanie oparte na ustawieniu document.domain, ale stwierdziłem, że dość trudne jest prawidłowe określenie wysokości zawartości elementu iframe w różnych przeglądarkach (testowanie teraz z FF11, Ch17 i IE9 ).

ConroyP wykorzystuje:

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 przypadku niektórych zdarzeń.

Skończyło się na użyciu różnych właściwości JS 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 http://docs.sencha.com/core/source/Ext.html#method-Ext-apply Ext Core

To działało dobrze dla FF i IE, ale potem były problemy z Chrome. Jednym z nich był problem z synchronizacją, najwyraźniej Chrome zajmuje trochę czasu, aby ustawić / wykryć wysokość iframe. A potem Chrome również nigdy nie zwracał poprawnie wysokości treści w ramce iframe, jeśli ramka była wyższa niż treść. Nie działałoby to z zawartością dynamiczną, 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 jej 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 rozwojowych :)

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

Tor Händevik
źródło

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
źródło

0

Gadżety iGoogle muszą aktywnie wdrażać zmianę rozmiaru, więc sądzę, że w modelu obejmującym wiele domen nie można tego zrobić bez udziału treści zdalnych. Jeśli treść może wysłać wiadomość o nowym rozmiarze do strony kontenera przy użyciu typowych technik komunikacji między domenami, reszta jest prosta.

Joeri Sebrechts
źródło

0

Jeśli chcesz pomniejszyć stronę internetową, aby dopasować ją do rozmiaru elementu iframe:

Powinieneś zmienić rozmiar iframe, aby dopasować go do treści
Następnie powinieneś pomniejszyć cały iframe z załadowaną zawartością strony internetowej

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>

kaw
źródło

0

Oto podejście jQuery, które dodaje informacje w jsonie poprzez atrybut src iframe. Oto wersja demonstracyjna, zmiana rozmiaru i przewijanie tego okna .. wynikowy adres URL z jsonem wygląda następująco ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight: 571} #

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

Czad Steele
źródło

0

uzyskaj wysokość zawartości elementu iframe, a następnie podaj go do tego elementu 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
źródło

1

Czy możesz dodać opis, dlaczego Twój kod odpowiada na pytanie?

Rughes

0

Praca z jquery przy ładowaniu (w różnych przeglądarkach):

 <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 na responsywnej stronie:

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

Mario Gonzales Flores
źródło

-1

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

Nino Škopac
źródło

-2

Jest to nieco trudne, ponieważ musisz wiedzieć, kiedy strona iframe została załadowana, co jest trudne, gdy nie kontrolujesz jej zawartości. Możliwe jest dodanie modułu obsługi obciążenia do ramki iframe, ale próbowałem tego w przeszłości i ma on bardzo różne zachowanie w różnych przeglądarkach (nie zgadnij, kto jest najbardziej denerwujący ...). Prawdopodobnie musiałbyś dodać funkcję do strony iframe, która wykonuje zmianę rozmiaru i wstrzyknąć skrypt do treści, która nasłuchuje, aby załadować zdarzenia lub zmienić rozmiar zdarzeń, która następnie wywołuje poprzednią funkcję. Myślę, że dodaj funkcję do strony, ponieważ chcesz się upewnić, że jest bezpieczna, ale nie mam pojęcia, jak łatwo będzie to zrobić.

roryf
źródło

-2

Coś na zasadzie tego, w co wierzę, powinno działać.

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

Załaduj to swoim ciałem do treści iframe.

Lalafur Waage
źródło

3

Nie jest to możliwe, ponieważ zawartość w ramkach iFrames jest ładowana z innych domen, więc próba zrobienia tego powoduje błąd, taki jak ten z Firefoksa: „Odmówiono zgody na uzyskanie właściwości Window.document”.

larssg

-4

Mam proste rozwiązanie i wymaga określenia szerokości i wysokości w linku, spróbuj (działa w 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>

فيصل خلبوص
źródło

Zmiana rozmiaru elementu iframe na podstawie zawartości

Odpowiedzi:

uzyskaj wysokość zawartości elementu iframe, a następnie podaj go do tego elementu iframe