perf(前端): 邮件正文
Lei OT
2 months ago
parent
888cc8214a
commit
9933fa7460
@ -0,0 +1,126 @@
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
|
||||
const EmailContent = ({ id, content: MailContent, ...props }) => {
|
||||
const [iframeHeight, setIframeHeight] = useState(800) // Initial height
|
||||
const [content, setContent] = useState(MailContent)
|
||||
const iframeRef = useRef(null)
|
||||
const containerRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
setContent(MailContent)
|
||||
}, [MailContent])
|
||||
|
||||
const setIframeContent = (iframe, content) => {
|
||||
if (!iframe || !iframe.contentDocument) {
|
||||
console.error('Iframe not loaded or contentDocument is null')
|
||||
return
|
||||
}
|
||||
|
||||
const doc = iframe.contentDocument
|
||||
doc.open()
|
||||
// doc.write(content)
|
||||
doc.write(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/*overflow-y: hidden;*/
|
||||
}
|
||||
img {
|
||||
max-width: 90%;
|
||||
height: auto;
|
||||
/*object-fit: contain;*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${content}
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
doc.close()
|
||||
}
|
||||
|
||||
const calculateHeight = () => {
|
||||
try {
|
||||
if (iframeRef.current && iframeRef.current.contentDocument) {
|
||||
const doc = iframeRef.current.contentDocument
|
||||
const body = doc.body
|
||||
|
||||
if (body) {
|
||||
requestAnimationFrame(() => {
|
||||
const newHeight = Math.max(body.scrollHeight, body.offsetHeight, body.clientHeight)
|
||||
|
||||
// console.log('body.scrollHeight: ', body.scrollHeight)
|
||||
// console.log('body.offsetHeight: ', body.offsetHeight)
|
||||
// console.log('body.clientHeight: ', body.clientHeight)
|
||||
|
||||
const addMore = Math.max(Math.ceil(newHeight*0.05), 120);
|
||||
// console.log('Calculated height:', newHeight, addMore)
|
||||
setIframeHeight(newHeight + addMore)
|
||||
})
|
||||
return
|
||||
} else {
|
||||
console.warn('iframe body is null or undefined')
|
||||
}
|
||||
} else {
|
||||
console.warn('iframeRef.current or contentDocument is null')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error calculating height:', error)
|
||||
}
|
||||
setIframeHeight(200)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const handleLoad = () => {
|
||||
calculateHeight()
|
||||
}
|
||||
|
||||
const currentIframe = iframeRef.current
|
||||
|
||||
if (currentIframe) {
|
||||
currentIframe.addEventListener('load', handleLoad)
|
||||
setIframeContent(currentIframe, content)
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (currentIframe) {
|
||||
currentIframe.removeEventListener('load', handleLoad)
|
||||
}
|
||||
}
|
||||
}, [content])
|
||||
|
||||
// useEffect(() => {
|
||||
// if(iframeRef.current){
|
||||
// setIframeContent(iframeRef.current, content);
|
||||
// calculateHeight();
|
||||
// }
|
||||
// }, [content])
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className='space-y-4 w-full'>
|
||||
<div className='w-full relative'>
|
||||
<iframe
|
||||
key={id}
|
||||
ref={iframeRef}
|
||||
height={iframeHeight}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: `${iframeHeight}px`,
|
||||
// border: '1px solid #e5e7eb',
|
||||
border: 'none',
|
||||
display: 'block',
|
||||
}}
|
||||
title='Dynamic Height Iframe'
|
||||
sandbox='allow-scripts allow-same-origin'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EmailContent
|
||||
Loading…
Reference in New Issue