HTML输入影响整个页面

Question

HTML输入影响整个页面

6

我正在创建一个页面，您可以在其中输入HTML代码，并在侧面的div中查看输出结果。
代码：

$("#tryit").keyup(function() {
  var input = $(this).val();
  $("#readout").html(input);
});

#readout {
  height: 400px;
  width: 48%;
  border: 1px solid black;
  overflow: auto;
  float: right;
  clear: none;
  display: inline-block;
}
#tryit {
  height: 396px;
  width: 50%;
  float: left;
  clear: none;
  display: inline-block;
  font-family: monospace;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="tryit" id="tryit" rows="10">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;New Webpage&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;
</textarea>

<div id="readout"></div>

它的功能很好：它将HTML输出到#readout。问题在于当用户在head中添加

- yaakov

他如何将某些东西添加到<head>中？你的脚本将所有内容放在readout DIV中。 - Barmar

看一下页面。尝试在头部添加样式标签并且调整正文的填充值。这将会影响实际页面的填充值，而不是输出。 - yaakov

5

真正的解决方案就像jsfiddle和codepen一样：将用户的代码放入一个iframe中，这样它就不会影响主页面。 - Barmar

2

在 DIV 中不应该有 <head>。一个文档中只能有一个 <head>，并且它必须在 <body> 之外。 - Barmar

另一个解决方案可能是影子DOM。 - Barmar

2个回答

2

在您的CSS中，使其选择具有特定ID的div输入，然后选择其子元素：

<style>    
#readout input{
     color: red;
}
</style>

由于您直接在html编辑器中放置css，因此我添加了样式标签。

上述css仅影响具有readout ID的DIV中的每个输入元素。

如果您需要其他内容，请说明。

查看这个fiddle

- code

不，这不是我想要的。请看有问题的页面。如果在文本区域中添加样式，它会影响实际页面，而不是读取div。 - yaakov

任何你在编辑器中输入的样式都应该被包裹在一个 style 标签中，这样它就知道它是 CSS 而不是文本。 - code

是的，但是用样式标签包装的样式会影响整个页面，而不仅仅是具有readout id的div。 - yaakov

@code 你正在回答一个不同的问题。问题是当网页用户在文本区域中输入<style>...</style>时会出现什么问题。 - Barmar

这怎么可能是个问题？我在你的页面上输入了它，而且它对我起作用了。 - code

显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DavidDomain · Accepted Answer

你应该考虑使用不同的方法来实现这个目标。

如果你真的想继续你现有的做法，你需要在文本区域的值中替换很多东西。举个例子，在下面的代码片段中，我只替换了 html 和 body 样式声明为 id (#readout)，以将样式应用于 #readout div 而不是页面的 body，它确实对 body 有效，但是其他可能的声明呢？

当然，我在正则表达式方面真的是一个新手，我相信这可以做得更好，但是这一切都是不必要的。

$("#tryit").keyup(function() {
    var style = $(this).val().match(/<style>(.*)<\/style>/);
    if (style !== null && style.length > 0) {
        var bodyReplace = style[1].replace(/(^|\s)(html)|(body)(\s|$)/ig, '#readout');
    }
  var input = $(this).val();
  $("#readout").html(input.replace(/<style>.*<\/style>/, '<style>'+bodyReplace+'</style>'));
});

$("#tryit").keyup();

#readout {
  height: 400px;
  width: 48%;
  border: 1px solid black;
  overflow: auto;
  float: right;
  clear: none;
  display: inline-block;
}
#tryit {
  height: 396px;
  width: 50%;
  float: left;
  clear: none;
  display: inline-block;
  font-family: monospace;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="tryit" id="tryit" rows="10">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;New Webpage&lt;/title&gt;<style>body {background: black; color: red }</style> &lt;/head&gt; &lt;body&gt;<h1>Hello</h1> &lt;/body&gt; &lt;/html&gt;
</textarea>
<div id="readout"></div>

另一个问题是你的