Iframe content styled in head with hex color code not working

I am generating an iframe using javascript with dynamic html. My dynamic html looks like

<head>
<style>
...
.bar {background-color: #EB593C;}
...
</style>
</head>

      

Then the iframe contains all the code up to .bar {background-color: after the color code, the html / css is not included in the iframes content.

If I replace the hexadecimal color code with the rgb name or text color name then it works fine.

But since I said html is dynamic so I cannot replace all hex color codes with rgb or text.

var iframe = document.createElement('iframe');
//var html = '<style>body {background-color: #EB593C;}</style><body>Foo</body>'; // not working
var html = '<style>body {background-color: red;}</style><body>Foo</body>'; // working
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);

      

Please check the jsfiddle

+2
javascript html css iframe


source to share


No one has answered this question yet

See similar questions:

3
Can't use CSS character '#' in iframe

or similar:

763
jQuery / JavaScript: Accessing Iframe Content
591
Calling JavaScript code in an iframe from the parent page
486
Resize iframe based on content
465
Make iframe automatically adjust height to fit content without using scrollbar?
nine
Resize iframe to content using JQuery
1
Creating iframes from original page content with jQuery
0
Changing Javascript tree tree
0
Hex color not working in Chrome mobile address bar
0
JavaScript and iframe styling



All Articles
Loading...
X
Show
Funny
Dev
Pics