If i add the Js Script above This Line <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Then CSS Is not working. Is There is any way to solve this issue
<script type="text/javascript">
<?php $data3 = getmaildata(); ?>
var collection = [<?php echo $data3; ?>];
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>.:: sample ::.</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
A script element can appear in the head or in the body, it can't appear before the Doctype and no element can appear outside the root element (<html>).
If the Doctype (with a couple of provisos which don't apply in this case) isn't the very first thing in a document then browsers will enter Quirks mode (and emulate bugs seen in older browsers with CSS and DOM handling).
There is no way around this (that is well supported by browsers), so just write valid code and don't try to put a script element somewhere that it isn't allowed.
<script> tags are usually placed in <head> or just before </body>, I don't know if it's related but your code is still invalid.
What happens if you put the SCRIPT element in its proper place, inside the HEAD section or in the BODY?
Also, I don't know what $data3 contains, but if it's a string and not an integer for instance, then it should be encapsulated in quotation marks.
The doctype declaration should be the very first thing in an HTML document, before the tag.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.
http://www.w3schools.com/tags/tag_DOCTYPE.asp
Related
This is not a duplicate question for these reasons:
I am asking about how to replace the entire HTML document with JavaScript without jQuery or any other fancy extensions to JavaScript. Some of the other questions that are similar to this question deal with specific things like AJAX or jQuery.
I am NOT asking about why document.write() only appends to the page. Perhaps the pure JavaScript solution I am looking for may incorporate that function, but it cannot only be that since it is inadequate by itself.
What I am looking to do is overwrite a webpage as it is displayed in the browser with only HTML. The function document.write() only appends whatever argument is passed to it to the document's body. The property document.documentElement.outerHTML can be read from, but unlike when it is used on a page's child elements, cannot be written to, and even if it could, it would leave the DOCTYPE untouched.
I am working on a bookmarklet, so this JavaScript would not run in the page, meaning there is no problem with the script being overwritten while it is running. It could also be run in the browser's developer tools.
As an example, suppose I have about:blank opened in my browser. The contents of the DOM would look like this:
<html>
<head></head>
<body></body>
</html>
I want to be able to overwrite it with whatever string I want. So, for instance, I could make it look like this:
<!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>Example</title>
</head>
<body>
<p>This is an example.</p>
</body>
</html>
How can I achieve that sort of overwrite of a document?
Try this:
function one() {
document.write('<html><body><pre>the first html</pre></body></html>');
document.close(); // this makes the difference
}
function two() {
document.write('<html><body><pre>the second html</pre></body></html>');
document.close();
}
Refer to linstantnoodles' answer in question document.write() overwriting the document?, the document.open is implicitly called before the document.write is called, but the document.close doesn't, and
document.write() when document is closed = rewrite the document;
document.write() when document is open = append to the document.
You can use document.implementation.createDocumentType to rewrite the doctype and document.getElementsByTagName to get the DOM elements, then rewrite with innerHTML and setAttribute.
var newDoctype = document.implementation.createDocumentType('html','-//W3C//DTD XHTML 1.0 Transitional//EN','http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdd');
document.doctype.parentNode.replaceChild(newDoctype,document.doctype);
document.getElementsByTagName('html')[0].setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
var doc = document.getElementsByTagName('html')[0];
doc.getElementsByTagName('head')[0].innerHTML = '<title>Example</title>';
doc.getElementsByTagName('body')[0].innerHTML = '<p>This is an example.</p>';
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Edit:
Updated to include comments by Xweque and xmlns attribute.
document.write('Some Text')
document.write rewrites the page's code.
I have a web page that generates HTML via JavaScript.
When validating using HTML validator 0.9.5.1 in Firefox 22, I get an error: 'document type does not allow element "span" here'
I am using this JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...<body>...
<script type='text/javascript'>
var someHtml = '<span>Hello world!</span>';
var e;
e = window.document.createElement('div');
e.innerHTML = someHtml;
window.document.body.appendChild(e);
</script>
Obviously the parser assumes that <span> is nested inside <script>
How should i rewrite the JavaScript to pass HTML validation? I would prefer a solution that does not require me to create HTML elements.
Note: The answers in Avoiding HTML-in-string / html() in a jQuery script do not help me since I know that the code works. I want to reformat to avoid validation errors.
the pre element is for preformatted text, not more HTML.
HTML Tidy's objection is that you are putting something that it believes you expect the browser to render as HTML, you need to scape the entities (replacing < and > with < and >) so that it is interpretted as text.
UPDATE IN RESPONSE TO COMMENT:
With an XHTML doctype, the document must be wellformed XML. So, you need CDATA marks inside your script tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hello world</title>
</head>
<body>
<script type='text/javascript'>
//<![CDATA[
var someHtml = "<div>Hello world!</div>";
var e;
e = window.document.createElement('div');
e.innerHTML = someHtml;
window.document.body.appendChild(e);
//]]>
</script>
</body>
</html>
You can't put <div> inside <pre>. <pre> can contain phrasing content only, where <div> is not.
Also you should wrap your script with <![CDATA[ ... ]]> section since doctype is XHTML.
I'm generating a KML document in Javascript and i'm trying to use XMLSerializer to generate the XML file but it's generating all lower case tags even though i create the tags in capital in the DOM.
Is it the DOM that mangles the capitalization or the XMLSerializer? Is there any way to get around it or am I missing something? I've tried this in both Chrome and Firefox.
The KML document is to be imported into Google Earth and it seems it doesn't accept lower case tags.
Based on testing in FF4, the following will work:
Use document.createElementNS ("http://www.opengis.net/kml/2.2", elementName) instead of document.createElement(elementName).
Use elt.appendChild (document.createTextNode (text)) instead of elt.innerHTML = text.
The following works for me (preserving case) in FF 5 beta in an XHTML page:
<!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>test</title>
<script type="text/javascript">
function test() {
var kml = document.getElementsByTagName("kml").item(0);
window.alert (new XMLSerializer().serializeToString(kml));
}
</script>
</head>
<body onload="test()">
<kml id="kml" xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>KML Samples</name>
<open>1</open>
<description>samples</description>
<Style id="downArrowIcon">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal4/icon28.png</href>
</Icon>
</IconStyle>
</Style>
</Document>
</kml>
</body>
</html>
It doesn't matter if you add elements with capital letters, the DOM manages them always in lower case. Just check it with firebug, you won't see uppercase tags.
In case your doctype is set to XHTML it even breaks standard compliance.
in XHTML attributes and elements must be all lower-case
UPDATE: just checked following:
var test = document.createElement("DIV");
// test.outerHTML returns "<div></div>"
So already when you create the element, it's being parsed and converted to lowercase.
I have been playing around with Scala/Lift/Comet/Ajax etc. recently. I came across a problem which boils down to this:
Summary
I want to update a specific div (by id) when a certain event occurs. If the div does not exist yet, it must be created and appended to the HTML body.
Currently I cannot get this to work when using the Lift framework.
Source File
LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html:
<?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">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
updateOrCreateMouseDiv('123', 'coords')
});
function updateOrCreateMouseDiv(uniqueId, coords) {
if ($('#mouse_'+uniqueId).length == 0) {
$('body').append('<div id=' + uniqueId + '>' + coords + '</div>');
}
$('#mouse_'+uniqueId).html(coords)
}
// ]]>
</script>
</head>
<body></body>
</html>
The Error
If I open the above file directly in a browser (file:///LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html) it works i.e. a new div is created.
But if I run it through Lift/Jetty (http://localhost:8080/static/mouseViewTest) I get the following JavaScript error:
Chrome:
Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7
Firefox (Firebug):
An invalid or illegal string was specified" code: "12
Comparing the Sources in Browser
When comparing the page sources in the browser, I can see only one difference, namely: Lift adds the following JavaScript just before the closing </body> tag:
<script type="text/javascript" src="/ajax_request/liftAjax.js"></script>
<script type="text/javascript">
// <![CDATA[
var lift_page = "F320717045475W3A";
// ]]>
</script>
Questions
Does anyone have an idea why this happens?
If I would want to move the JavaScript code into the Scala file (using Lift's JavaScript and jQuery support), what would the code look like?
Please note: When I used Jq("body") ~> JqAppend() to create new divs, it worked. I just didn't know how to check whether the div id already existed. Thats why I moved the code into the template, planning on using Lift's Call function to execute the JS function. And thats when these problems started...
Thanks!
I recently ran into a similar problem and, from what I've gathered, the problem is because the page when served by lift is served as XHTML and there are some issues when writing to the DOM if the page is XHTML vs. HTML. I don't know whether this is a bug with jQuery or Safari or if it's just something that's not possible in XHTML, but a quick way to fix it is to modify your Boot.scala to tell Lift to not use XHTML as the mime type with this line:
LiftRules.useXhtmlMimeType = false
Okay - this is the dumbest glitch I have seen in a while:
<!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 type='text/javascript'>
var data = "</script>";
</script>
</head>
<body>
This should break!
</body>
</html>
This causes syntax errors because the JavaScript parser is actually reading the contents of the string. How stupid!
How can I put </script> in my code. Is there any way?
Is there a valid reason for this behavior?
Within X(HT)ML (when actually treated as such), scripts are required to be escaped as CDATA for precisely this reason. http://www.w3.org/TR/xhtml1/diffs.html#h-4.8
In XHTML, the script and style elements are declared as having #PCDATA content. As a result, < and & will be treated as the start of markup, and entities such as < and & will be recognized as entity references by the XML processor to < and & respectively. Wrapping the content of the script or style element within a CDATA marked section avoids the expansion of these entities.
<script type="text/javascript">
<![CDATA[
... unescaped script content ...
]]>
</script>
If your XHTML document is just served as text/html and treated as tag soup, that doesn't apply and you'll just have to "escape" the string like '</scr' + 'ipt>'.
It's not a glitch - this is normal expected behaviour and quite rightly so if you think about it. HTML specs do not define scripting languages, so all the engine should see is plain text up until </script>, which closes the tag. There are a couple of options, other than the ones already outlined:
// escape the / character, changing the format of the "closing" tag
var data = "<\/script>";
// break up the string
var data = "</"+"script>";
The first method works because HTML doesn't use \ for escaping, it's treated as a literal character, and of course <\/script> isn't a valid closing tag. The second one works for more obvious reasons, but I've been told by someone else here that it shouldn't be used (and I never quite understood why).
Write it this way:
<!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 type='text/javascript'>
<!--
var data = "</script>";
-->
</script>
</head>
<body>
This should break!
</body>
</html>
The reason is simply that HTML is parsed before executing javascript and the <!-- and --> make the parser ignore all tags that appear in this section.
If you can believe the HTML4 standard, the script content
ends at the first ETAGO ("</") delimiter followed by a name start character ([a-zA-Z])
So, the JavaScript parser is not reading the contents of the string as you describe; the JavaScript parser never gets anything after var data = ", which obviously isn't a valid script.
The simplest way to avoid accidentally ending your JavaScript early is to use Andy E's first suggestion:
var data = "<\/script>";
This way the HTML parser doesn't see </ so the script content doesn't end, and \/ is equivalent to / in a JavaScript string literal, so the results are correct. This is also the method shown for JavaScript in the standard.