Altura de um iframe

[reginaldojunior]

Tem algum jeito menos "gambiarento" de colocar a altura de um iframe automática a partir do conteudo do iframe?

[brunover]

Depende do que você quer dizer com gambiarrento, hehehehe. Vou dizer como eu fiz, infelizmente não conheço forma mais elegante, se alguém souber uma forma melhor vai ser bom que também aprendo :)

• Adicionei um listener onload no iframe que chamava uma função "resizeframe()". Assim que o iframe era carregado a função atualizava a altura dele. Exemplo:

<iframe class="iframe-class" id="iFrameID" src="iframe.html" frameborder="0" scrolling="no" onload="resizeIframe()"></iframe>

const resizeIframe = () => {
	let iFrameElement = document.getElementById('iFrameID');
	iFrameElement.style.height = iFrameElement.contentWindow.document.body.scrollHeight + "px";
}

[bizarro]

Eu usava o iframe-resizer, talvez possa ajudar mais ainda caso você use domínios diferentes também. Esqueci de falar que não deixa de ser uma gambiarra, porque ele usa dois scripts. 😅

[reginaldojunior]

Não deu totalmente certo, pq o conteudo dos iframes são relativos, tipo eles carregam com um tamanho e dps que ocorre alguma ação do usuario ele carrega uma tabela x e fico de outro tamanho.

[bizarro]

Não sei. 🤔 No exemplo deles parece funcionar mesmo com alturas diferentes dinâmicas, se você clicar no "Toggle Content".

[luizbills]

A altura do iframe é sempre fixa ou fica variando?

Se for fixa você pode usar essa técnica: https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/

Se for váriável, vai ter que ser com javascript. Apenas espere o iframe terminar de carregar e pega a altura do body do contepudo e seta no iframe.

[kvnol]

@reginaldojunior, nesse exemplo do @brunover (que adorei e vou usar), talvez não tenha dado certo porque tu não adicionou o listener.

[marcusvcribeiro]

Cara, estou com o mesmo problema, se tiver achado alguma solução, me diga. 2018-04-30 14:01 GMT-03:00 Kevin Oliveira <[email protected]>:

…

@reginaldojunior <https://github.com/reginaldojunior>, nesse exemplo do @brunover <https://github.com/brunover> (que adorei e vou usar), talvez não tenha dado certo porque tu não adicionou o listener. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/frontendbr/forum/issues/1056#issuecomment-385461721>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ASSnxYUSOzuRmlhcc7CNACRK3Wxe6Dd_ks5tt0NrgaJpZM4TsDry> .

[ninetails]

Tem o Pym que sites, geralmente de mídias/jornais, usam para deixar iframes responsivos. Creio que também redimensiona a altura mas não tenho certeza.