Contexto
Eu mesmo tive que fazer isso no contexto de uma extensão da web. Essa extensão da Web injeta parte da interface do usuário em cada página, e essa interface fica dentro de uma iframe
. O conteúdo dentro do iframe
é dinâmico, então tive que reajustar a largura e a altura do iframe
próprio.
Uso React, mas o conceito se aplica a todas as bibliotecas.
Minha solução (isso pressupõe que você controla a página e o iframe)
No interior iframe
, mudei de body
estilo para ter dimensões realmente grandes. Isso permitirá que os elementos internos sejam dispostos usando todo o espaço necessário. Fazer width
e height
100% não funcionou para mim (acho que porque o iframe tem um padrão width = 300px
e height = 150px
)
/* something like this */
body {
width: 99999px;
height: 99999px;
}
Injetei toda a interface do iframe dentro de uma div e dei alguns estilos
#ui-root {
display: 'inline-block';
}
Depois de renderizar meu aplicativo dentro disso #ui-root
(em React , faço isso dentro componentDidMount
), eu calculo as dimensões dessa div e sincronizo-as com a página pai usando window.postMessage
:
let elRect = el.getBoundingClientRect()
window.parent.postMessage({
type: 'resize-iframe',
payload: {
width: elRect.width,
height: elRect.height
}
}, '*')
No quadro pai, faço algo assim:
window.addEventListener('message', (ev) => {
if(ev.data.type && ev.data.type === 'resize-iframe') {
iframe.style.width = ev.data.payload.width + 'px'
iframe.style.height = ev.data.payload.height + 'px'
}
}, false)