Can't use CSS character '#' in iframe
Scenario
I created a simple iframe that I dynamically generate from user provided HTML and CSS.
JSfiddle
https://jsfiddle.net/jaup3769/1/
Problem
Whenever I use the "#" character, CSS parsing stops after that point.
p#para1{
}
will not understand outside p#
Similarly,
p{
color: green;
background-color: #ff0000;
}
will not be analyzed outside background-color: #
What could be the problem?
source to share
Just use encodeURIComponent
instead encodeURI
. From MDN article:
encodeURIComponent
differ fromencodeURI
in that it encodes reserved characters and the number sign #
I think it even makes sense to use it in the code you provided, since you are not encoding the whole URI, the part data:whatever/charset:…
already exists ...
source to share