jquery obtém a altura do conteúdo do iframe quando carregado

Eu tenho uma página de ajuda, help.php que eu estou carregando dentro de um iframe em main.php Como posso obter a altura desta página depois de ter carregado no iframe?

Estou perguntando isso porque não posso estilizar a altura de iframe para 100% ou auto. É por isso que eu acho que preciso usar javascript .. Eu estou usando jQuery

CSS:

body { margin: 0; padding: 0; } .container { width: 900px; height: 100%; margin: 0 auto; background: silver; } .help-div { display: none; width: 850px; height: 100%; position: absolute; top: 100px; background: orange; } #help-frame { width: 100%; height: auto; margin:0; padding:0; } 

JS:

 $(document).ready(function () { $("a.open-help").click(function () { $(".help-div").show(); return false; }) }) 

HTML:

 

This is a div with an iframe loading the help page

open Help in iFrame

hello world

hello world

hello world

hello world

hello world

ok eu finalmente encontrei uma boa solução:

 $('iframe').load(function() { this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; }); 

Como alguns navegadores (Safari e Opera antigos) relatam que o onload foi concluído antes de o CSS renderizar, é necessário definir um micro Timeout (Tempo limite) e em branco e reatribuir o src do iframe.

 $('iframe').load(function() { setTimeout(iResize, 50); // Safari and Opera need a kick-start. var iSource = document.getElementById('your-iframe-id').src; document.getElementById('your-iframe-id').src = ''; document.getElementById('your-iframe-id').src = iSource; }); function iResize() { document.getElementById('your-iframe-id').style.height = document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px'; } 

A resposta menos complicada é usar .contents() para chegar no iframe. Curiosamente, porém, ele retorna um valor diferente do que eu recebo usando o código na minha resposta original, devido ao preenchimento do corpo, eu acredito.

 $('iframe').contents().height() + 'is the height' 

Foi assim que eu fiz isso para comunicação entre domínios, então tenho medo de que talvez seja desnecessariamente complicado. Primeiro, colocaria o jQuery dentro do documento do iFrame; isso consumirá mais memory, mas não deve aumentar o tempo de carregamento, pois o script só precisa ser carregado uma vez.

Use o jQuery do iFrame para medir a altura do corpo do seu iframe o mais cedo possível (onDOMReady) e, em seguida, defina o hash do URL para essa altura. E no documento pai, adicione um evento onload à tag iFrame que examinará o local do iframe e extrairá o valor necessário. Como onDOMReady sempre ocorrerá antes do evento de carregamento do documento, você pode ter certeza de que o valor será comunicado corretamente sem uma condição de corrida que complique as coisas.

Em outras palavras:

… em Help.php:

 var getDocumentHeight = function() { if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady location.hash = $('body').height(); // at this point the document address will be something like help.php#1552 } }; $(getDocumentHeight); 

… e no documento pai:

 var getIFrameHeight = function() { var iFrame = $('iframe')[0]; // this will return the DOM element var strHash = iFrame.contentDocument.location.hash; alert(strHash); // will return something like '#1552' }; $('iframe').bind('load', getIFrameHeight ); 

Eu encontrei o seguinte para trabalhar no Chrome, Firefox e IE11:

 $('iframe').load(function () { $('iframe').height($('iframe').contents().height()); }); 

Quando o conteúdo Iframes for concluído, o evento será triggersdo e definirá a altura dos IFrames em relação ao conteúdo. Isso funcionará apenas para páginas dentro do mesmo domínio que o do IFrame.

Você não precisa de jquery dentro do iframe para fazer isso, mas eu uso porque o código é muito mais simples …

Coloque isso no documento dentro do seu iframe.

 $(document).ready(function() { parent.set_size(this.body.offsetHeight + 5 + "px"); }); 

adicionado cinco acima para eliminar a barra de rolagem em pequenas janelas, nunca é perfeito em tamanho.

E isso dentro do seu documento pai.

 function set_size(ht) { $("#iframeId").css('height',ht); } 

O código para fazer isso sem jQuery é trivial hoje em dia:

 const frame = document.querySelector('iframe') function syncHeight() { this.style.height = `${this.contentWindow.document.body.offsetHeight}px` } frame.addEventListener('load', syncHeight) 

Para desenganchar o evento:

 frame.removeEventListener('load', syncHeight) 

esta é a resposta correta que funcionou para mim

 $(document).ready(function () { function resizeIframe() { if ($('iframe').contents().find('html').height() > 100) { $('iframe').height(($('iframe').contents().find('html').height()) + 'px') } else { setTimeout(function (e) { resizeIframe(); }, 50); } } resizeIframe(); }); 

A $('iframe').load resposta aceita agora produzirá a.indexOf is not a function erro de a.indexOf is not a function . Pode ser atualizado para:

 $('iframe').on('load', function() { // ... }); 

Poucos outros semelhantes a .load preteridos desde a jQuery 1.8: Erro “Uncaught TypeError: a.indexOf não é uma function” ao abrir o novo projeto da fundação