Menu
I am trying to run following HTML in every browser: Opera, FF, IE, Chrome
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
</head>
<body>
<script>
<![CDATA[
alert('Hey!');
]]>
</script>
</body>
</html>
None of them display the alert. Chrome logs an error in console: Uncaught SyntaxError: Unexpected token <. It seems to be complaining about the fist < in CDATA declaration. Firefox also logs "syntax error"
The w3schools point out that this is the way to use CDATA http://www.w3schools.com/xml/xml_cdata.asp. Other answers on this site suggest it. What am I doing wrong? I tried playing with namespaces and doctypes, but that did not change anything.
Edit: I added XHTML name space and doctype, that I originally removed and the problem still persists.
450
Note: CDATA is now deprecated. Do not use. The CDATA Section interface is used within XML for including extended portions of text. This text is unescaped text, like < and & symbols.
CDATA stands for Character Data and it tells the parser to copy the following code exactly (and not try to parse it.)
CDATA has no meaning at all in HTML. CDATA is an XML construct which sets a tag's contents that is normally #PCDATA - parsed character data, to be instead taken as #CDATA, that is, non-parsed character data. It is only relevant and valid in XHTML. It is used in script tags to avoid parsing < and & .
You should almost never need to use CDATA Sections. The CDATA mechanism was designed to let an author quote fragments of text containing markup characters (the open-angle-bracket and the ampersand), for example when documenting XML (this FAQ uses CDATA Sections quite a lot, for obvious reasons).
The difference is between HTML and XHTML. W3Schools is correct that it’s a valid CDATA construct within XHTML, but as your question indicates that your code is HTML and there is no such thing as CDATA inside a <script> in HTML, your example fails as soon as the interpreter sees the "<". You can tell the browser that it’s looking at XHTML, but it's probably safer to handle HTML, too. To do that, you need to hide the CDATA inside JavaScript comments. (You might also consider identifying which language is inside your <script> block.)
<html>
<head>
</head>
<body>
<script>
//<![CDATA[
alert('Hey!');
//]]>
</script>
</body>
</html>
This is, in fact, the method recommended by the World Wide Web Consortium (W3C) in XHTML Media Types, A.4. Embedded Style Sheets and Scripts.
108
The related question When is a CDATA section necessary within a script tag? explains that a CDATA section is recommended when embedding scripts in XHTML documents. However, just setting a XHTML doctype to the test document isn't enough. The CDATA is still being treated as a syntax error.
According to this blog post, that is because the content type needs to match the doctype definition. Proper XHTML needs to have the following Content-type header set:
Content-type: application/xhtml+xml
if that is not specified and text/html sent instead, browsers will revert to HTML. And indeed, if I add that header to my test case, browsers start properly parsing the JavaScript inside the CDATA even when the CDATA it's not commented out.
This works for me (setting the header using PHP):
<?php header("Content-type: application/xhtml+xml");
echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script><![CDATA[alert('Hey!');]]></script>
</head>
<body>
</body>
</html>
You may see it as XML (XHTML) but that's not how the browser sees it.
You're serving it a text/html which means that the browser sees it as HTML.
It needs to be served with an XML mime type such as application/xhtml+xml
i.e. like this
http://www.alohci.net/application/xhtml+xml/starov.htm.ashx
and not like this
http://www.alohci.net/text/html/starov.htm.ashx
Check the view source to see that it's the same file. Check the "Net" tab in firebug (or the equivalent for your browser) to see the content type in the response headers.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
