CDATA in inline JS

  • -->gm<--
  • Student
  • Student
  • User avatar
  • Posts: 68

Post 3+ Months Ago

Hi everyone,

I was wondering what exactly the CDATA part of the HTML comment does, or how it gets processed by the browsers.
I know that if a comment is put at the start and the end of some inline js, the code is hidden from older browsers, but am curious as to the prupose of CDATA?

Code: [ Select ]
<div id="flashFile">
    <script type="text/javascript">
    // <![CDATA[
        var so = new SWFObject("swf/home.swf", "home", "710", "130", "8", "#ffffff");
        so.addParam("quality", "high");
        so.addParam("wmode", "transparent");
        so.addParam("menu", "false");
        so.addParam("loop", "true");
    // ]]>
  1. <div id="flashFile">
  2.     <script type="text/javascript">
  3.     // <![CDATA[
  4.         var so = new SWFObject("swf/home.swf", "home", "710", "130", "8", "#ffffff");
  5.         so.addParam("quality", "high");
  6.         so.addParam("wmode", "transparent");
  7.         so.addParam("menu", "false");
  8.         so.addParam("loop", "true");
  9.         so.write("flashFile");
  10.     // ]]>
  11.     </script>
  12. </div>

  • joebert
  • Genius
  • Genius
  • User avatar
  • Posts: 13511
  • Loc: Florida

Post 3+ Months Ago

Start with the first part of this thread.

It basicly means, do not parse anything inside this element as XML, treat the entire contents as text. The parent <script> element tells the parser to treat that text as script.

Now, you might think this means you can place CDATA anywhere in the document & prevent parsing, for things like displaying source code.
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel='stylesheet' type='text/css' href='style.css' />
    <p> ... Content ... </p>
This should be <b>unparsable</b> content;
which displays as-is.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
  2. <html xmlns="" xml:lang="en" lang="en">
  3. <head>
  4.     <title>Title</title>
  5.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  6.     <meta http-equiv="Content-Style-Type" content="text/css" />
  7.     <link rel='stylesheet' type='text/css' href='style.css' />
  8. </head>
  9. <body>
  10.     <p> ... Content ... </p>
  11.     <pre><code><![CDATA[
  12. This should be <b>unparsable</b> content;
  13. which displays as-is.
  14.     ]]></code></pre>
  15. </body>
  16. </html>

However, that's not the case. Opera is the only browser I know of that will display that <code> line as-is. Firefox will throw the contents away & IE will parse it without the <b> and show a broken HTML element on the end.
  • -->gm<--
  • Student
  • Student
  • User avatar
  • Posts: 68

Post 3+ Months Ago

Hi Joe,

Definitely cleared it up for me, thanks

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 17 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.