feat: Increase iframe size and add auto-resize functionality
Problem: - Form iframe was too small (800px fixed height) - Only spinner visible, form content not fully visible Solution: 1. Increased iframe container: - Changed Card bodyStyle to use calc(100vh - 200px) - Set minHeight to 800px - Made iframe flex: 1 to fill available space 2. Added auto-resize functionality: - Form sends iframe_resize messages with height - Parent component listens and adjusts iframe height - ResizeObserver watches for content changes - Window resize handler updates iframe size 3. Improved iframe styling: - Added sandbox attributes for security - Made height responsive (100% of container) - Minimum height ensures form is always visible Files: - frontend/src/components/form/StepClaimConfirmation.tsx: Increased iframe size, added resize handler - frontend/src/components/form/generateConfirmationFormHTML.ts: Added auto-resize messaging
This commit is contained in:
@@ -1380,9 +1380,47 @@ export function generateConfirmationFormHTML(data: any): string {
|
||||
window.__innFilterAttached = true;
|
||||
}
|
||||
|
||||
// Функция для отправки размера iframe родителю
|
||||
function sendIframeSize() {
|
||||
try {
|
||||
var height = Math.max(
|
||||
document.body.scrollHeight,
|
||||
document.body.offsetHeight,
|
||||
document.documentElement.clientHeight,
|
||||
document.documentElement.scrollHeight,
|
||||
document.documentElement.offsetHeight
|
||||
);
|
||||
window.parent.postMessage({
|
||||
type: 'iframe_resize',
|
||||
height: height
|
||||
}, '*');
|
||||
} catch (e) {
|
||||
console.warn('Не удалось отправить размер iframe:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Отправляем сообщение родителю при загрузке
|
||||
window.parent.postMessage({type: 'claim_form_loaded'}, '*');
|
||||
|
||||
// Отправляем размер iframe после небольшой задержки для полной загрузки
|
||||
setTimeout(function() {
|
||||
sendIframeSize();
|
||||
}, 500);
|
||||
|
||||
// Отправляем размер при изменении содержимого
|
||||
var resizeObserver = null;
|
||||
if (window.ResizeObserver) {
|
||||
resizeObserver = new ResizeObserver(function() {
|
||||
sendIframeSize();
|
||||
});
|
||||
resizeObserver.observe(document.body);
|
||||
}
|
||||
|
||||
// Также отправляем размер при изменении размера окна
|
||||
window.addEventListener('resize', function() {
|
||||
setTimeout(sendIframeSize, 100);
|
||||
});
|
||||
|
||||
console.log('=== ИНИЦИАЛИЗАЦИЯ ЗАВЕРШЕНА ===');
|
||||
} catch (e) {
|
||||
console.error('=== ОШИБКА ИНИЦИАЛИЗАЦИИ ===');
|
||||
|
||||
Reference in New Issue
Block a user