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();
|
onPrev();
|
||||||
} else if (event.data.type === 'claim_form_loaded') {
|
} else if (event.data.type === 'claim_form_loaded') {
|
||||||
setLoading(false);
|
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 (
|
return (
|
||||||
<Card>
|
<Card
|
||||||
|
bodyStyle={{
|
||||||
|
padding: 0,
|
||||||
|
height: 'calc(100vh - 200px)',
|
||||||
|
minHeight: '800px',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
}}
|
||||||
|
>
|
||||||
<iframe
|
<iframe
|
||||||
ref={iframeRef}
|
ref={iframeRef}
|
||||||
srcDoc={htmlContent}
|
srcDoc={htmlContent}
|
||||||
style={{
|
style={{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '800px',
|
height: '100%',
|
||||||
|
minHeight: '800px',
|
||||||
border: 'none',
|
border: 'none',
|
||||||
borderRadius: '8px',
|
borderRadius: '8px',
|
||||||
|
flex: 1,
|
||||||
}}
|
}}
|
||||||
title="Форма подтверждения заявления"
|
title="Форма подтверждения заявления"
|
||||||
|
sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1380,9 +1380,47 @@ export function generateConfirmationFormHTML(data: any): string {
|
|||||||
window.__innFilterAttached = true;
|
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'}, '*');
|
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('=== ИНИЦИАЛИЗАЦИЯ ЗАВЕРШЕНА ===');
|
console.log('=== ИНИЦИАЛИЗАЦИЯ ЗАВЕРШЕНА ===');
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('=== ОШИБКА ИНИЦИАЛИЗАЦИИ ===');
|
console.error('=== ОШИБКА ИНИЦИАЛИЗАЦИИ ===');
|
||||||
|
|||||||
Reference in New Issue
Block a user