iframe和 blob实现JS,CSS,HTML直接当前页预览
warning:
这篇文章距离上次修改已过260天，其中的内容可能已经有所变动。
要在当前页面内直接预览JS、CSS和HTML内容，可以使用iframe和blob URL。以下是实现这一功能的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embedded Content Preview</title>
<script>
function previewContent(jsCode, cssCode, htmlCode) {
// 创建一个新的Blob对象，类型为HTML文件
const blob = new Blob([`<!DOCTYPE html><html><head><style>${cssCode}</style></head><body>${htmlCode}</body><script>${jsCode}</script>`], { type: 'text/html' });
// 创建一个URL指向这个Blob对象
const url = URL.createObjectURL(blob);
// 创建或获取一个iframe，并导航到新创建的URL
let iframe = document.getElementById('previewIframe');
if (!iframe) {
iframe = document.createElement('iframe');
iframe.id = 'previewIframe';
iframe.style = 'width:100%;height:500px;';
document.body.appendChild(iframe);
}
iframe.src = url;
}
</script>
</head>
<body>
<textarea id="jsCode" placeholder="JavaScript Code"></textarea>
<textarea id="cssCode" placeholder="CSS Code"></textarea>
<textarea id="htmlCode" placeholder="HTML Code"></textarea>
<button onclick="previewContent(document.getElementById('jsCode').value, document.getElementById('cssCode').value, document.getElementById('htmlCode').value)">Preview</button>
<iframe id="previewIframe"></iframe>
</body>
</html>在这个示例中，用户可以在文本区域中输入JS、CSS和HTML代码，点击“Preview”按钮后，这些代码将被打包进一个Blob URL，然后在页面中的iframe内预览。这样可以避免任何跨域问题，因为所有的代码都在同一个源中。
评论已关闭