I was trying to answer a user’s question here on SO with a jsFiddle example. The example was to dynamically initialized an iframe element via Javascript. The content to be displayed by the iframe was a valid html document assigned to a variable. Here’s the variable assignment:
var aValidDoc = '<!DOCTYPE html PUBLIC
\"-//W3C//DTD XHTML 1.0
Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html
xmlns=\"http://www.w3.org/1999/xhtml\">
<head><title></title><style
type=\"text/css\">@media
screen{html,body{margin:0;padding:0;height:100%;width:100%}p{margin:15px;}}</style>
</head><body><p>This is the content of
the dynmic document.</p><body></html>';
Here’s a snippet of what I want to do:
</p><script type=\"text/javascript\">alert(\"Hi\")</script><body></html>';
In fact, even a comment with <script> breaks the interface:
// below line breaks jsFiddle
// <script type="text//javascript"></script>
Here’s the fiddle: jsFiddle example
Is there a way to write the variable assignment to include the script tag so as not to break the jsFiddle interface?
Literally writing
</script>anywhere in your inline javascript will break the containing html tag.An easy work-around is to write
"<\/script>"instead. Since it’s inside a string literal, the backslash is dropped and you get"</script>"http://jsfiddle.net/KavDy/2/