logo标签列表

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

cssiframe
3

场景

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

JSfiddle

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

问题

每当我使用'#'符号时，CSS解析就会在那个点之后停止。

p#para1{

}

无法解析超出p#的部分。

同样地，

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

无法解析background-color: #之后的内容。

可能出现了什么问题？

Fiddle在我的Chrome浏览器中运行良好。 - Pete
这个问题在http://stackoverflow.com/questions/37437019/iframe-content-with-style-in-head-with-hex-color-code-not-working中提到，它是一个仅限于Mozilla的问题，这似乎是真的。那么，除了fiddle中使用的方法之外，有什么可能的解决方法建议呢？ - Abhi9

被视为片段标识符。不清楚哪个浏览器的行为是正确的，但无论如何，这就是原因。解决方法应该是像正常人一样使用srcdoc属性而不是尝试将HTML编码为带有src属性的数据URI，但Microsoft Edge不支持srcdoc属性。

 - BoltClock
1个回答
1

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

encodeURIComponent与encodeURI的区别在于它编码保留字符和数字符号#。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接