3

Scenario

I have created a simple iframe which i am dynamically generating from user provided HTML and CSS.

JSfiddle

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

Problem

Whenever I use the '#' symbol, CSS parsing is stopped beyond that point. 

p#para1{

}

won't parse beyond p#

Similarly,

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

won't parse beyond background-color: #

What might be the issue?

Abhi9
  • 320
  • 1
  • 2
  • 13
  • fiddle works fine for me in chrome? – Pete Mar 28 '17 at 11:33
  • The question at http://stackoverflow.com/questions/37437019/iframe-content-with-style-in-head-with-hex-color-code-not-working states the it is a mozilla-only issue, which seems to be true. So, what possible workaround is suggested instead the approach used in fiddle? – Abhi9 Mar 28 '17 at 11:34
  • The # is being treated as a fragment identifier. It's not clear which browser is behaving correctly, but either way, that's the reason why. The workaround is supposed to be to just use the srcdoc attribute like a normal person instead of trying to encode the HTML as a data URI with the src attribute, but Microsoft Edge doesn't support the srcdoc attribute. – BoltClock Mar 28 '17 at 15:31

1 Answers1

1

Just use encodeURIComponent instead of encodeURI. From the MDN article:

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

I think it even makes more sense to use it in the code you provided, since you are not encoding the whole URI, the data:whatever/charset:… part is already there…

Community
  • 1
  • 1
helb
  • 3,154
  • 15
  • 21