i'm using blogger and i want to make my own template from scratch so i began to understand the very basic structure of how things are.
In my journey through this i encounter the CDATA thing
And i wanted to test this code.
<html>
<head>
<b:skin>
<![CDATA[ ]]>
</b:skin>
</head>
<body>
<b:section id='post'/>
<script>
if(true&&true)
alert("hello");
</script>
</body>
</html>
It gives me an error and i know that the "&" should be "&" instead because it's xhtml so i add the cdata my code will become like this
<html>
<head>
<b:skin>
<![CDATA[ ]]>
</b:skin>
</head>
<body>
<b:section id='post'/>
<script>
<![CDATA[
if(true&&true)
alert("hello");
]]>
</script>
</body>
</html>
Now that i test it the alert message wouldn't show up so i put // before the opening and closing CDATA tag and it works.
I want to understand why the reason it works with // and not without.
Blogger parses the XML templates as XML, so they need to be valid XML to work with Blogger's backend.
However, when Blogger serves the resulting page to the browser it says that the Content-Type is text/html; charset=UTF-8 (which is wrong, because it is XHTML (but see below)).
HTML and XHTML are different languages so when the browser parses the XHTML as HTML it doesn't do anything special with <![CDATA[ and just passes it to the JavaScript engine.
<![CDATA[ isn't valid JavaScript, so this throws an exception.
By prefixing it //, you change the invalid JavaScript into a valid JavaScript line comment.
aside: XHTML and HTML are similar enough that you can get away with pretending your XHTML is HTML if you follow the compatibility guidelines.
Related
When I check my url on open graph debugger and click on scrape again
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.tvsrbija.online%2Findex.php
I get an strange error
our page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree.
Please fix this in order for the tags to be usable.
But everything with my code is fine when you look into the source.
I tried scraping blank index.php file, and when i do, here is what Facebook sees
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head></html>
But there is no such code, If i go to blank index.php page of my site and check the source it is blank...
BUT, when i use index.html instead of index.php Facebook sees no code as it should with an empty index.php
Problem is my script is php and not html so i can not use html extension to fix problem. I even tried rewriting .php extension to html because I thought maybe Facebook handles it differently but with no luck.
Also I try pausing Cloudflare for couple of days and the same thing...
What can it be?
EDIT: Here you can see how Facebook sees my source code https://developers.facebook.com/tools/debug/echo/?q=https%3A%2F%2Fwww.tvsrbija.online%2Findex.php
In the provided source link, your output does not have a page head. It must have a valid head and body node to be valid html markup. You can see this in the first three lines of the response body provided by facebook:
<!DOCTYPE html>
<html><body>
<p>
Facebook is likely converting your <head> tag into a <body> tag because your source does not contain a <body>. Your index.php page should scrape like this to be correct:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body></body></html>
In the future, validate your html markup using the w3c validator to be sure it is correct:
https://validator.w3.org/
Try changing encoding to UTF8 without boom instead of just utf8. This has been a headache for many developers because utf8 adds info before file indicating file is utf8
I try to learn how to write Javascript but I have found a problem either so basic I would never think about it or so complicated that I lack the knowladge to find it.
I am Using NetbeansIDE 8.0 .
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<head>
<title>Objekt Navigator</title>
</head>
<body>
Something<br/>
<script language="javascript" type="text/javascript">
document.write("Text");
alert("Bla bla");
</script>
Else<br/>
</body>
</html>
If the compiled page is opened it will only display "Something" and "Else" but nothing of the script.
If I remove "document.write("Text");" it will show the alert but there is no wrong wording in "document.write".
I really need one (or more) pointers to understand this.
Pointer 1:
Don't use document.write. Really. It has been archaic and obsolete for at least 15 years, if not 20. Use regular DOM methods.
Whatever tutorial you found that in, choose something else.
Pointer 2: Don't use XHTML. Use the HTML5 Doctype. The XHTML one does some very weird things with JavaScript -- IF the file is being served as XHTML.
Lastly: your code works just fine for me. If this is not the exact code that you are using in your tests, look at your console.log to see if you have an error somewhere.
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.
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.
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.
Also, you need to comment out the CDATA so it won't throw a parsing error when it's run:
<script>
//<![CDATA[
alert('Hey!');
//]]>
</script>
1) Comment your CDATA
//<![CDATA[
alert('Hey!');
//]]>
2) add a script type
<script type="text/javascript">
This is such a wierd problem. I have the following extremly simple HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js" />
</head>
<body>
test
</body>
</html>
If I run this page in a web browser, I get nothing at all, just an empty page. If I remove the script reference line entirely, then I get a blank page that displays "test", like it should. This tells me that there is some issue in the jquery.js file, but I have tried 3 different versions of jquery and the one I am using is the latest from the jquery.com website. For the life of me, I can't figure out what I'm doing wrong. I know it will turn out to be simple though.
script tags cannot be self-closing. You need the closing </script> tag:
<script type="text/javascript" src="jquery.js"></script>
Not including the closing tag means the whole content up to and including </html> is treated as the body of the script element. Because the document is then incomplete, your browser closes the script, head and html elements and inserts an empty body element.
you need to close your script tag otherwise it thinks everything after is javascript to be executed...
<script type="text/javascript" src="jquery.js"></script>
The <script> tag is not self-closing, so you'll need a separate </script>:
<script type="text/javascript" src="jquery.js"></script>
See Why don't self-closing script tags work?
You're confusing HTML and XHTML.
In HTML, the script tag is not self closing, so you must write <script src="jquery.js"></script>.
In XHTML, you must set your XML namespace(<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">) and send the document with the correct mime type.
I am trying to make my pages work correctly with IE 8, I found out from here: http://www.masykur.web.id/post/How-to-Make-Our-Website-to-be-Ready-for-IE8.aspx
that, my page has to be XHTML 1.0 compliant and atleast CSS 2.1 compliant, I made my page and CSS compliant with only few warnings, but still window.onload() is not firing. Does anybody encountered this problem?
here is the code snippet:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<title>Testing</title>
<link rel="stylesheet" href="test.css" type="text/css"></link>
<script type="text/javascript" src="login.js"></script>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
window.onload = function()
{
// Not coming here at all on first shot
}
</script>
</head>
<body>
.
.
.
However refreshing the page seems to make it work.
Am I missing something here?
UPDATE:
One of the IE addons created this problem, after disabling its working fine. Thanks for your time and answers :)
For IE try:
window.onload = new function() { alert('hello');};
This is a pretty old thread but I found a solution that might help others.
I was adding a function to window.onload via a dynamically injected script (really to mimic an external script load for reasons which are not important in this context). As stated in this post, on the first load within IE8, the window.onload would not fire, but all subsequent calls would.
I found out that if I put this in the HTML file as an internal script, it would work everytime:
var windowOnload = window.onload || function() {};
window.onload = function() { windowOnload(); };
All the above code does is "initializes" IE8's window.onload unobtrusively. I suspect that IE8 fails to trigger window.onload the first time if it is called from an external script as the onload event isn't attached yet to window (or in tech terms, its typeof is undefined). It seems that the first time that's what IE8 is doing: attaching onload to window without executing it properly.
The above code then becomes quite obvious: We are merely forcing IE8 to recognize the onload event. We don't care what gets executed, or what doesn't, so we simply make sure to pipe on through any existing window.onload code that is already defined (just as a precaution).
It is important to have this as an internal script to the HTML (at least from my testing).
Your HTML would thus look something like this (the relevant parts):
<script type="text/javascript">
var windowOnload=window.onload||function(){};window.onload=function(){windowOnload();};
</script>
<script type="text/javascript" src="script.js">
</script>
From my testing, after clearing cache, and reloading the page, I have gotten window.onload to successfully trigger each time.
I hope this helps.
You could have an error in your JavaScript's, if that happens, any JavaScript after that will not function correctly.
Try to remove the reference to login.js and common.js and try an alert within your problematic function.
I don't have IE8 to personally test, but what does this test do?
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test IE 8</title>
<script type="text/javascript">
/* <![CDATA[ */
window.onload = function(){alert('Good morning!');}
/* ]]> */
</script>
</head>
<body>
<h1>Hello</h1>
<body>
</html>
If this test works as expected, try the CDATA bit around your internal JavaScript block.
And then, if that does not work as expected, there is probably something in the external JavaScript above it that prevents your onload from firing. The previous poster mentioned this. At that point, try your error console or debugger to point the way.
onload fires after ALL your content has loaded (including external images etc). It's possible those resources are taking a long time to load on the first go (before they are cached). Another possibility is an error in your code that only affects IE as is stopping your scripts (but only the first time is odd).
If you are getting different results using Apache vs. another web server (IIS?) and comparing the end result using IE8, then the differrence must be in the content type header being sent. Get the wget utility for your platform and see the headers that are produced. If you are on Windows, then the Portable Apps version of the GUI wget is pretty nice.
The following code works for me. When I load the page in Firefox I see the alert instantly. When I first load the page in IE 8 it warns me about active content. If I allow the blocked content it asks me to confirm, which I do. Then the alert appears as expected. If this does not work for you, try IE 8 on a different computer or start eliminating code in your page to check for errors. You could do a binary search: comment out the first half of the page and see if the alert appears; if it still does not, then uncomment out the first half and comment out the second half. Repeat as needed until you've narrowed it down to the offending code. Incidentally you don't need XHTML for IE8 compliance. HTML works fine and actually has some advantages.
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function() { alert('hello');};
</script>
</head>
<body>
</body>
</html>
I know this is kinda old question, but I just faced the same thing.
window.onload=function() { alert('hello');};
is treated differently than
window.onload= new function() { alert('hello');};
The keyword here is new.
My JS was terminating whenever it reaches (onload=) part until I added the word'new' before 'function'. Even though it worked fine without 'new' in my localhost, but once I put it online, it doesn't work until I add 'new'.
Old question but I had the same issue but it turned out to be another problem. My problem was that I did <script type="application/javascript"> which <IE9 does not understand or try to run even. For it to work for older browsers you still have to use text/javascript even though this isn't technically the correct type...