Estou a carregar uma página web aspx num iframe. O conteúdo no Iframe pode ter mais altura do que o iframe's height. O iframe não deve ter barras de rolagem.
Eu tenho um wrapper div
tag dentro do iframe que basicamente é todo o conteúdo. Eu escrevi alguns jQuery para fazer o redimensionamento acontecer :
$("#TB_window", window.parent.document).height($("body").height() + 50);
onde TB_window' é o mergulho no qual o 'Iframe' está contido.
corpo
- a etiqueta do corpo do aspx no iframe.
Este script está anexado ao conteúdo do iframe. Eu estou recebendo o elemento TB_window
da página principal. Enquanto isso funciona bem no Chrome, mas a TB_window colapsa no Firefox. Eu estou realmente confuso/perdido com o porquê de isso acontecer.
Você pode recuperar a altura do conteúdo do IFRAME
's utilizando:
contentWindow.document.body.scrollHeight
Após o IFRAME
ser carregado, você pode então mudar a altura, fazendo o seguinte:
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
Depois, na etiqueta IFRAME
, você prende o manipulador assim:
<iframe id="idIframe" onload="iframeLoaded()" ...
Eu tive uma situação há algum tempo atrás onde eu adicionalmente precisava ligar para o "se o frameLoaded" do próprio "IFRAME" depois que um formulário-submissão ocorreu dentro. Você pode conseguir isso fazendo o seguinte dentro dos scripts de conteúdo do IFRAME
's:
parent.iframeLoaded();
Uma resposta ligeiramente melhor para Aristos...
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
Então declare no seu iframe como se segue:
<iframe onload="resizeIframe(this)" ...
Há duas pequenas melhorias:
iframe.height = ""
se você'vai reatribuí-lo no próximo comando. Fazendo isso, você're lida com um elemento DOM.Editar: Se o conteúdo no quadro está sempre a mudar, então chama:
parent.resizeIframe(this.frameElement);
de dentro do iframe após a actualização. Funciona para a mesma origem.
Ou para detectar automaticamente:
// on resize
this.container = this.frameElement.contentWindow.document.body;
this.watch = () => {
cancelAnimationFrame(this.watcher);
if (this.lastScrollHeight !== container.scrollHeight) {
parent.resizeIframeToContentSize(this.frameElement);
}
this.lastScrollHeight = container.scrollHeight;
this.watcher = requestAnimationFrame(this.watch);
};
this.watcher = window.requestAnimationFrame(this.watch);
$(document).height() // - $('body').offset().top
e / ou
$(window).height()
Ver Stack Overflow pergunta https://stackoverflow.com/questions/806402.
Tente isto para encontrar a altura do corpo em jQuery:
if $("body").height()
Não tem um valor se Firebug. Talvez esse'seja o problema.