gpt4 book ai didi

Javascript/jquery : only update content inside div (not outside) - including html and css with live preview

转载 作者:太空宇宙 更新时间:2023-11-04 14:04:58 24 4
gpt4 key购买 nike

我不确定这是否可行,但基本上我正在对输入到文本区域的 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com