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:
AI Assistant
2025-11-24 16:03:25 +03:00
parent 08d59b9522
commit 5e59a15bae
2 changed files with 75 additions and 2 deletions

View File

@@ -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('=== ОШИБКА ИНИЦИАЛИЗАЦИИ ===');