我不确定这是否可行，但基本上我正在对输入到文本区域的 html 和 css 进行实时预览，并将其显示在 div (#previewStyle) 中。我使用 .keyup 通过 javascript/jquery 显示这个
$(function(){
$(".updatepreview").keyup(function(){
$.post( "<?php echo http() . $websitedomain .'/.../.../styles.php'; ?>", $("#styles_form").serialize(), function(result_data){ $("#previewStyle").html(result_data); /* use result data here */ } );
});
问题是:当它加载 css 时，它会更新页面上的所有内容(甚至在 div 之外)。有什么方法可以使用 jquery 将其限制为仅 div 吗？如有必要，我可以进入并更改 div 之外所有内容的所有 id 和类，以确保没有冲突；但是，想先在这里查看解决方案。一个 textarea 包含 css，一个包含 html，它序列化它们并通过以下方式加载它们:
<?php echo "
<html>
<head>
<style> ".$_POST['style']."</style>
</head>
<body>".$_POST['html']."</body>
</html>";
?>
更新:
预览 div 确实显示正确；但是，预览 div 内的 css 会更新并覆盖预览 div 之外的 css。我正在尝试确定是否有办法将预览 div 内的 css 限制为仅预览 div，而不是让它覆盖预览 div 周围页面的主样式表。
最佳答案
将内容放入 iframe 以便独立于主文档进行处理。
参见 JQuery Loading Content of textarea into IFrame有关将 HTML 和 CSS 加载到 iframe 的详细信息。
关于Javascript/jquery : only update content inside div (not outside) - including html and css with live preview，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21202153/