import
React, { useState, useEffect } from '
react';
import DOMPurify from 'dompurify'; // 用于安全净化
HTML，防止 XSS
const
HtmlEmbedder = () => {
// 状态管理：存储
HTML 内容、加载状态、错误信息
const [
htmlContent, set
HtmlContent] = useState('');
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// 假设 demo.
html 在 public 文件夹下，URL 为 /demo.
html
const fetch
HtmlWithStyles = async () => {
try {
// 1. 加载
HTML 内容
const
htmlResponse = await fetch('/home.
html');
if (!
htmlResponse.ok) throw new Error('
HTML 加载失败');
const
htmlText = await
htmlResponse.text();
const sanitized
Html = DOMPurify.sanitize(
htmlText);
// 2. 解析 DOM 并提取资源
const parser = new DOMParser();
const tempDoc = parser.parseFromString(sanitized
Html, 'text/
html');
// 3. 提取所有 CSS 资源
const extractedResources = [];
// 处理 <link> 标签 (外部 CSS)
const links = tempDoc.querySelectorAll('link[rel="stylesheet"]');
for (const link of links) {
try {
const cssResponse = await fetch(link.href);
if (!cssResponse.ok) continue;
const cssText = await cssResponse.text();
extractedResources.push({
type
: 'external',
content
: cssText,
origin
: link.href
});
link.remove(); // 移除原链接标签
} catch (e) {
console.error(`CSS加载失败
: ${link.href}`, e);
}
}
// 处理 <style> 标签 (内联 CSS)
const styles = tempDoc.querySelectorAll('style');
styles.forEach(style => {
extractedResources.push({
type
: 'inline',
content
: style.textContent
});
});
// 4. 创建样式合并容器
const styleContainer = document.createElement('style');
styleContainer.textContent = extractedResources
.map(res => `/* ${res.type === 'external' ? 'From
: ' + res.origin
: 'Inline CSS'} */\n${res.content}`)
.join('\n\n');
setLoading(false);
} catch (err) {
setError('加载错误
: ' + err.message);
setLoading(false);
}
};
fetch
HtmlWithStyles();
}, []); // 空依赖数组确保只运行一次
// 渲染组件
return (
<div>
<h2>嵌入外部
HTML 文件</h2>
{loading && <p>Loading
HTML content...</p>}
{error && <p style={{ color
: 'red' }}>{error}</p>}
{/* 安全渲染
HTML，使用
dangerouslySetInnerHTML */}
<div
dangerouslySetInnerHTML={{ __
html: htmlContent }} />
</div>
);
};
export default
HtmlEmbedder; 完整的生成
html和css并放到return的div中
本文介绍如何在React中利用dangerouslySetInnerHTML属性安全地插入HTML内容，并给出具体示例代码，展示正确的属性设置方式。
扫一扫
3411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
