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:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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