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

@@ -123,6 +123,30 @@ export default function StepClaimConfirmation({
onPrev();
} else if (event.data.type === 'claim_form_loaded') {
setLoading(false);
// Автоматически подстраиваем высоту iframe после загрузки
if (iframeRef.current) {
try {
const iframe = iframeRef.current;
const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
if (iframeDoc) {
const height = Math.max(
iframeDoc.body.scrollHeight,
iframeDoc.body.offsetHeight,
iframeDoc.documentElement.clientHeight,
iframeDoc.documentElement.scrollHeight,
iframeDoc.documentElement.offsetHeight
);
iframe.style.height = Math.max(height + 50, 800) + 'px';
}
} catch (e) {
console.warn('Не удалось автоматически подстроить высоту iframe:', e);
}
}
} else if (event.data.type === 'iframe_resize') {
// Обработка запроса на изменение размера от iframe
if (iframeRef.current && event.data.height) {
iframeRef.current.style.height = Math.max(event.data.height + 50, 800) + 'px';
}
}
};
@@ -144,17 +168,28 @@ export default function StepClaimConfirmation({
}
return (
<Card>
<Card
bodyStyle={{
padding: 0,
height: 'calc(100vh - 200px)',
minHeight: '800px',
display: 'flex',
flexDirection: 'column',
}}
>
<iframe
ref={iframeRef}
srcDoc={htmlContent}
style={{
width: '100%',
height: '800px',
height: '100%',
minHeight: '800px',
border: 'none',
borderRadius: '8px',
flex: 1,
}}
title="Форма подтверждения заявления"
sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
/>
</Card>
);

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