Question

在我的网页中，我有两个大约占屏幕宽度一半的盒子。左边的框是用于编写HTML的文本区域，右边是一个div，其中HTML被渲染成一个单独的网页。我遇到的问题是，如果有人在textarea中编写HTML并为body元素编写CSS（如background-color），则将其渲染为div会影响整个网站的背景而不是div，我想要的。我环顾四周，已经了解了浏览器为什么会这样做，但我想知道是否有办法解决它。

在将textarea的HMTL渲染到div中之前，我可以搜索textarea并将<body>的任何实例替换为<div>，将</body>替换为</div>吗？这样它只会影响div，而不会影响整个网站。

我呈现HTML的功能是：

// click 'showmeImg' to render the contents of 'editor' into the 'outputContainer'
        $(document).ready(function(){
            $("#showmeImg").click(function(){
                $("#outputContainer").html($(editor.getValue()));
            });
        });

例如，如果有人将其输入textarea：

<html>
<head>
</head>
<body style="background-color: blue;">
    --Other HTML code--
</body>
</html>

单击showmeImg会更改整个网页的背景，而不会更改“outputContainer”。理想情况下，我想要一个将上述代码更改为：

的函数

<html>
<head>
</head>
<div style="background-color: blue;">
    --Other HTML code--
</div>
</html>

在我的函数将其渲染为div之前。

将HTML从textarea渲染到div而不影响整个浏览器背景

0 个答案: