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