Контекст
Я должен был сделать это сам в контексте веб-расширения. Это веб-расширение внедряет какой-то кусок пользовательского интерфейса в каждую страницу, и этот пользовательский интерфейс находится внутри iframe. Содержимое внутри iframe является динамическим, поэтому мне пришлось перенастроить ширину и высоту самого iframe.
Я использую Реагирует , но концепция применима к каждой библиотеке.
Мое решение (предполагается, что вы контролируете как страницу, так и фрейм)
Внутри iframe я изменил стили body, чтобы иметь действительно большие размеры. Это позволит расположить элементы внутри, используя все необходимое пространство. Создание width и height 100% у меня не сработало (наверное, потому что у iframe по умолчанию width = 300px и height = 150px)
/* something like this */
body {
width: 99999px;
height: 99999px;
}
Затем я вставил весь интерфейс iframe в div и дал ему несколько стилей
#ui-root {
display: 'inline-block';
}
После рендеринга моего приложения внутри этого #ui-root (в Реагирование Я делаю это внутри componentDidMount) Я вычисляю размеры этого div как и синхронизирую их с родительской страницей, используя window.postMessage:
let elRect = el.getBoundingClientRect()
window.parent.postMessage({
type: 'resize-iframe',
payload: {
width: elRect.width,
height: elRect.height
}
}, '*')
В родительском кадре я делаю что-то вроде этого:
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)