css - 无法在 iframe 中使用 CSS '#' 符号

Question

Scenario

我创建了一个简单的 iframe，它是我根据用户提供的 HTML 和 CSS 动态生成的。

JSfiddle

https://jsfiddle.net/jaup3769/1/

Problem

每当我使用“#”符号时，CSS 解析都会在该点之后停止。

p#para1{

}

不会解析超出p#

同样，

p{
 color: green;
 background-color: #ff0000;
}

不会解析超出 background-color: #

可能是什么问题？

Answer 1

只需使用 encodeURIComponent 而不是 encodeURI。来自 MDN 文章:

encodeURIComponent differ from encodeURI in that it encode reserved characters and Number sign #

我认为在您提供的代码中使用它甚至更有意义，因为您没有对整个 URI 进行编码，data:whatever/charset:... 部分已经存在...

• MDN article
• JSfiddle
• related SO question