Javascript/jquery : 仅更新 div 内的内容（不在外部） - 包括带有实时预览的 html 和 css答案

【问题标题】：Javascript/jquery : only update content inside div (not outside) - including html and css with live previewJavascript/jquery : 仅更新 div 内的内容（不在外部） - 包括带有实时预览的 html 和 css
【发布时间】：2014-01-18 09:07:30
【问题描述】：

我不确定这是否可行，但基本上我正在实时预览输入到 textarea 中的 html 和 css 并将其显示在 div 中 (#previewStyle)。我通过 javascript/jquery 使用 .keyup 显示这个

$(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 将所有内容与主文档分开。例如，jsfiddle 就是这样做的。
我会试试的。如果它工作/不能正常工作，我会在这里发布。
但是有没有其他方法可以用 div 做到这一点？只是好奇。如果可能的话，我更喜欢使用 div 而不是 iframe。
您可以将所有 CSS 选择器更改为以 #divid 开头，因此效果将仅限于该 DIV。
stackoverflow.com/questions/16292253/…

标签： javascript jquery html css

【解决方案1】：

将内容放入iframe，以便独立于主文档进行处理。

有关将 HTML 和 CSS 加载到 iframe 中的详细信息，请参阅 JQuery Loading Content of textarea into IFrame。

【讨论】：

谢谢。我最终切换到 iframe；但是，现在面临调整 iframe 的大小。得到它的大小调整更大，但不是更小。如果您对此有所了解，可以看到这个问题：stackoverflow.com/questions/21202935/…