Zmiana rozmiaru elementu iframe na treść za pomocą Jquery

Question

Próbuję dynamicznie zmieniać rozmiar elementu iframe w celu dopasowania do jego treści. Aby to zrobić, mam kod:

$("#IframeId").height($("#IframeId").contents().find("html").height());​ 

To nie działa. Czy to z powodu problemu z wieloma domenami? Jak mogę to dopasować? Proszę spojrzeć na Fiddle: JsFiddle

ps mam ustawić html i ciało link height:100%;

Answer 1

Trzeba tylko zastosować kod na razie iframe load, więc wysokość jest już znana w tym czasie, kod następująco:

$("#IframeId").load(function() { 
    $(this).height($(this).contents().find("body").height()); 
}); 

Zobacz pracę demo. To demo działa na jsfiddle, ponieważ ustawiłem adres URL elementu iframe na adres URL w tej samej domenie, co element iframe wynikowy jsfiddle, czyli domena fiddle.jshell.net.

UPDATE:
@Youss: Wydaje swoją stronę na dziwnego powodu nie uzyskania wysokość ciała w prawo, więc spróbuj użyć wysokość głównych elementów zamiast, jak to:

$(document).ready(function() { 
    $("#IframeId").load(function() { 
      var h = $(this).contents().find("ul.jq-text").height(); 
      h += $(this).contents().find("#form1").height(); 
      $(this).height(h); 
     }); 
}); 

Answer 2

Co można zrobić, jest następujący:

• W użycia iFrame document.parent .setHeight (myheight), aby ustawić wysokość w iFrame na rodzica. Co jest dozwolone, ponieważ jest kontrolą podrzędną. Wywołaj funkcję od rodzica.

• W obiekcie nadrzędnym ustawia się funkcję setHeight (iframeheight), która zmienia rozmiar ramki iFrame.

Zobacz także:
How do I implement Cross Domain URL Access from an Iframe using Javascript?

Answer 3

Nie wiem, dlaczego rozwiązanie @ Nelsona nie działało w Firefoksie 26 (Ubuntu), ale poniższe rozwiązanie Javascript-jQuery wydaje się działać w Chromium i Firefox.

/** 
* Called to resize a given iframe. 
* 
* @param frame The iframe to resize. 
*/ 
function resize(frame) { 
    var b = frame.contentWindow.document.body || frame.contentDocument.body, 
     cHeight = $(b).height(); 

    if(frame.oHeight !== cHeight) { 
    $(frame).height(0); 
    frame.style.height = 0; 

    $(frame).height(cHeight); 
    frame.style.height = cHeight + "px"; 

    frame.oHeight = cHeight; 
    } 

    // Call again to check whether the content height has changed. 
    setTimeout(function() { resize(frame); }, 250); 
} 

/** 
* Resizes all the iframe objects on the current page. This is called when 
* the page is loaded. For some reason using jQuery to trigger on loading 
* the iframe does not work in Firefox 26. 
*/ 
window.onload = function() { 
    var frame, 
     frames = document.getElementsByTagName('iframe'), 
     i = frames.length - 1; 

    while(i >= 0) { 
    frame = frames[i]; 
    frame.onload = resize(frame); 

    i -= 1; 
    } 
}; 

Powoduje to ciągłe zmienianie rozmiarów wszystkich elementów iframe na danej stronie.

Testowany z jQuery 1.10.2.

Używanie $('iframe').on('load', ... działałoby tylko sporadycznie. Należy zauważyć, że rozmiar musi początkowo być ustawiony na 0 pikseli wysokości, jeśli ma się kurczyć poniżej domyślnej wysokości iframe w niektórych przeglądarkach.

Answer 4

Po prostu zrób to na tag HTML, działa idealnie

$("#iframe").load(function() { 
    $(this).height($(this).contents().find("html").height()); 
}); 

Answer 5

Regulacja wysokości iframe na obciążenia i zmiana rozmiaru, na podstawie jego wysokości ciała.