I know it's already discussed here, but there were no solution to get the whole document (including doctype).
$(document).html(); returns null...
This will get you all the HTML:
document.documentElement.outerHTML
Unfortunately it does not return the doctype. But you can use document.doctype to get it and glue the two together.
You can do
new XMLSerializer().serializeToString(document);
for all browsers newer than IE 9
try this.
$("html").html()
document is a variable it dose not represent the html tag.
EDIT
To get the doctype one could use
document.doctype
This is a function which has support in IE6+, it does't use outerHTML for even more support, it adds the doctype and uses a few tricks to get the html tag and its attributes. In order to receive a string with the doctype, and doesn't use outerHTML so it supports every browser. It uses a few tricks to get the html tag. Add this code:
document.fullHTML = function () {
var r = document.documentElement.innerHTML, t = document.documentElement.attributes, i = 0, l = '',
d = '<!DOCTYPE ' + document.doctype.name + (document.doctype.publicId ? ' PUBLIC "' + document.doctype.publicId + '"' : '') + (!document.doctype.publicId && document.doctype.systemId ? ' SYSTEM' : '') + (document.doctype.systemId ? ' "' + document.doctype.systemId + '"' : '') + '>';
for (; i < t.length; i += 1) l += ' ' + t[i].name + '="' + t[i].value + '"';
return d+'\n<html' + l + '>' + r + '</html>';
}
Now, you can run this function:
console.log(document.fullHTML());
This will return the HTML and doctype.
I ran this on example.com, here are the results
document.documentElement.innerHTML
will return you all document markup as string
to get the whole doctype read this
I'm not sure about getting the complete doc.but what you can do is,you can get the content of html tag seprately and doctype seprately.
$('html').html() for content and document.doctype for getting the doctype
I don't think there is a direct access to the whole document (including the doctype), but this works :
$.get(document.location, function(html) {
// use html (which is the complete source code, including the doctype)
});
I have done it on browser's console
document.documentElement;
Related
I have a JSON object that looks like this:
var content = '[{"title":"John Apple","lastname":"Apple"},
{"title":"Kumar Patel","lastname":"Patel"},
{"title":"Michaela Quinn","lastname":"Quinn"},
{"title":"Peyton Manning","lastname":"Manning"},
{"title":"John Doe","lastname":"Doe"},
{"title":"Jane Lee","lastname":"Lee"},
{"title":"Dan McMan","lastname":"McMan"},
{"title":"Yu Win","lastname":"Win"}]';
And I am trying to edit it with jQuery to display in my div tag with the id of content-view
here is my jquery:
$.each(content, function(t, l){
$('#view-content').appendTo('<div id = "' + l + '">' + t + '</div>');
});
For some reason on my jsFiddle, which is right here: http://jsfiddle.net/gAWTV/
It just comes up blank with the result. Does anyone have any ideas? I am stumped...
---EDIT---
What i would like to do is have everything output into its own div tags like this:
<div id="Apple">John Apple</div>
<div id="Patel">Kumar Patel</div>
<div id="Quinn">Michaela Quinn</div>
etc...
Your content is a string, not an array of objects.
You firstly need to store it as an array, so get rid of the single quotations marks.
var content = [{"title":"John Apple","lastname":"Apple"},
{"title":"Kumar Patel","lastname":"Patel"},
{"title":"Michaela Quinn","lastname":"Quinn"},
{"title":"Peyton Manning","lastname":"Manning"},
{"title":"John Doe","lastname":"Doe"},
{"title":"Jane Lee","lastname":"Lee"},
{"title":"Dan McMan","lastname":"McMan"},
{"title":"Yu Win","lastname":"Win"}];
Unless there is a reason you store it as a string? Then you need to parse it.
var content_object = JSON.parse(content);
Then you can run your code. However, I think you want to "stringify" your JSON. If that's the case you also need to swap t with l, because l is the object. Finally, you want to append, not appendTo. The latter appends the subject to the target you specify, not the other way round (so in your case appendTo appends #view-content to your div you've constructed, which doesn't work).
$.each(content, function(t, l){
$('#view-content').append('<div id = "' + t + '">' + JSON.stringify(l) + '</div>');
});
JSFiddle
Final comment, I would use document fragments to build your list instead of appending the new divs to an existing one in the each loop - that improves performance.
After OP edit:
Change the last snippet to:
$.each(content, function(t, l){
$('#view-content').append('<div id = "' + l.lastname + '">' + l.title + '</div>');
});
Updated JSFiddle
Try this:
var content = [{"title":"John Apple","lastname":"Apple"},
{"title":"Kumar Patel","lastname":"Patel"},
{"title":"Michaela Quinn","lastname":"Quinn"},
{"title":"Peyton Manning","lastname":"Manning"},
{"title":"John Doe","lastname":"Doe"},
{"title":"Jane Lee","lastname":"Lee"},
{"title":"Dan McMan","lastname":"McMan"},
{"title":"Yu Win","lastname":"Win"}];
$.each(content, function(t, l){
$('<div/>',{
id: l,
text:t }).appendTo('#view-content');
});
DEMO
I search to detect in a string if the content is just a text or if it's an image URL. I base my detection with the filetype, but I don't know how to detect multiple file types…
var wrapper = (content.indexOf(".jpg", ".jpeg", ".gif", ".png", ".bmp") != -1)
? '<img src="' + content + '" />'
: '<span>' + content + '</span>';
I know this syntax for indexOf is wrong, but in an ideal, that's what I search!
I would go with a cleaner solution - no slice/indexOf or anything like that involved: It tests all elements of the ext array against the content and returns the elements, which match. Since there should be only one match, you just need to check the first element.
var content = "/test.png",
ext = [".jpg", ".jpeg", ".gif", ".png", ".bmp"],
res,wrapper;
res = ext.filter(function(el){return content.match(el)});
wrapper = res[0] ? '<img src="'+content+'" />' : '<span>'+content+'</span>';
See Array.prototype.filter on MDN for more explanation. As with Fabrizio's solution this solution might break too, if you have filenames with several . /test.png.jpg (whatever the reason for that might be).
just use indexOf over an array
var wrapper = ([".jpg", ".jpeg", ".gif", ".png", ".bmp"].indexOf(content.slice(-4)) > -1)
? '<img src="' + content + '" />'
: '<span>' + content + '</span>';
content.slice(-4) return last 4 characters of content
On older browser you will need to use a polyfill for indexOf,
see https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf
I want to find or make a bookmarklet that will validate the html content of a currently viewed page using the W3C HTML 5 validator.
I have found two bookmarklets and am trying to get one to behave a bit like one and a bit like the other, however I am not sure how to do this.
Chris Coyier has an HTML5 validation bookmarklet that works well except it uses the page URI so does not work for locally tested sites:
javascript:(function(){%20function%20fixFileUrl(u)%20{%20var%20windows,u;%20windows%20=%20(navigator.platform.indexOf("Win")%20!=%20-1);%20%20/*%20chop%20off%20file:///,%20unescape%20each%20%hh,%20convert%20/%20to%20\%20and%20|%20to%20:%20*/%20%20u%20=%20u.substr(windows%20?%208%20:%207);%20u%20=%20unescape(u);%20if(windows)%20{%20u%20=%20u.replace(/\//g,"\");%20u%20=%20u.replace(/\|/g,":");%20}%20return%20u;%20}%20/*%20bookmarklet%20body%20*/%20var%20loc,fileloc;%20loc%20=%20document.location.href;%20if%20(loc.length%20>%209%20&&%20loc.substr(0,8)=="file:///")%20{%20fileloc%20=%20fixFileUrl(loc);%20if%20(prompt("Copy%20filename%20to%20clipboard,%20press%20enter,%20paste%20into%20validator%20form",%20fileloc)%20!=%20null)%20{%20document.location.href%20=%20"http://validator.w3.org/file-upload.html"%20}%20}%20else%20document.location.href%20=%20"http://validator.w3.org/check?uri="%20+%20escape(document.location.href);%20void(0);%20})();
I also found this one, which works by grabbing the html of the current page, but I can't figure out how to make it do html5... there is reference to doctype in the code and I have tried changing this to html5, html500 etc, and removing it entirely hoping it would autodetect.. but to no avail:
javascript:(function(){var h=document;var b=h.doctype;var e="<!DOCTYPE "+b.name.toLowerCase()+' PUBLIC "'+b.publicId+'" "'+b.systemId+'">\n';var g=h.documentElement.outerHTML;var f="http://validator.w3.org/check";var i={prefill_doctype:"html401",prefill:0,doctype:"inline",group:0,ss:1,st:1,outline:1,verbose:1,fragment:e+g};var a=h.createElement("form");a.setAttribute("method","post");a.setAttribute("target","_blank");a.setAttribute("action",f);for(var j in i){var c=h.createElement("input");c.setAttribute("type","hidden");c.setAttribute("name",j);c.setAttribute("value",i[j]);a.appendChild(c)}if(navigator.appCodeName=="Mozilla"){h.body.appendChild(a)}a.submit()})();
First, you need an exact copy of the HTML document (including Doctype etc). For this purpose, I have written the following function:
function DOMtoString(document_root) {
var html = '',
node = document_root.firstChild;
while (node) {
switch (node.nodeType) {
case Node.ELEMENT_NODE:
html += node.outerHTML;
break;
case Node.TEXT_NODE:
html += node.nodeValue;
break;
case Node.CDATA_SECTION_NODE:
html += '<![CDATA[' + node.nodeValue + ']]>';
break;
case Node.COMMENT_NODE:
html += '<!--' + node.nodeValue + '-->';
break;
case Node.DOCUMENT_TYPE_NODE:
// (X)HTML documents are identified by public identifiers
html += "<!DOCTYPE "
+ node.name
+ (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
+ (!node.publicId && node.systemId ? ' SYSTEM' : '')
+ (node.systemId ? ' "' + node.systemId + '"' : '')
+ '>\n';
break;
}
node = node.nextSibling;
}
return html;
}
Then, a form has to be created and submitted. After inspecting the form submission to http://validator.w3.org/check, I've created the following function, which submits the significant key-value pairs:
javascript:(function() {
var html_to_validate = DOMtoString(document);
/* Paste the DOMtoString function here */
function append(key, value) {
var input = document.createElement('textarea');
input.name = key;
input.value = value;
form.appendChild(input);
}
var form = document.createElement('form');
form.method = 'POST';
form.action = 'http://validator.w3.org/check';
form.enctype = 'multipart/form-data'; // Required for this validator
form.target = '_blank'; // Open in new tab
append('fragment', html_to_validate); // <-- Code to validate
append('doctype', 'HTML5'); // Validate as HTML 5
append('group', '0');
document.body.appendChild(form);
form.submit();
})();
Bookmarklet
Copy the previous two blocks to Google's closure compiler. Do not forget to prefix javascript: again.
javascript:(function(){function c(a,b){var c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var e=function(a){for(var b="",a=a.firstChild;a;){switch(a.nodeType){case Node.ELEMENT_NODE:b+=a.outerHTML;break;case Node.TEXT_NODE:b+=a.nodeValue;break;case Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE "+a.name+(a.publicId?' PUBLIC "'+a.publicId+'"':"")+(!a.publicId&&a.systemId? " SYSTEM":"")+(a.systemId?' "'+a.systemId+'"':"")+">\n"}a=a.nextSibling}return b}(document),d=document.createElement("form");d.method="POST";d.action="http://validator.w3.org/check";d.enctype="multipart/form-data";d.target="_blank";c("fragment",e);c("doctype","HTML5");c("group","0");document.body.appendChild(d);d.submit()})();
I was also getting the 'Sorry! This document cannot be checked.' error, resolved it by adding an accept-charset "utf-8" to the form attributes.
In the function that creates the form element add the following line: form.acceptCharset = "utf-8";
It worked for me.
Marta's answer helped me out. Here is the updated bookmarklet.
javascript:(function(){function c(a,b){var c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var e=function(a){for(var b="",a=a.firstChild;a;){switch(a.nodeType){case Node.ELEMENT_NODE:b+=a.outerHTML;break;case Node.TEXT_NODE:b+=a.nodeValue;break;case Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE "+a.name+(a.publicId?' PUBLIC "'+a.publicId+'"':"")+(!a.publicId&&a.systemId? " SYSTEM":"")+(a.systemId?' "'+a.systemId+'"':"")+">\n"}a=a.nextSibling}return b}(document),d=document.createElement("form");d.method="POST";d.action="http://validator.w3.org/check";d.enctype="multipart/form-data";d.target="_blank";d.acceptCharset="utf-8";c("fragment",e);c("doctype","HTML5");c("group","0");document.body.appendChild(d);d.submit()})();
The previous answers didn't work form me. I'm using the "Check serialized DOM of Current Page" bookmarklet at https://validator.w3.org/nu/about.html. This seems to work wonderfully, picking up dynamically generated HTML.
I'm trying to add a piece of javascript code to a certain <div>.
I enclosed the code in pre and code tags, but when I actually run this the code gets executed. Obviously, that's not what I want at all.
var code = '<pre><code><script type="text/javascript" src="http://source.com/test.js"><\/script>\n';
code = code + '<script type="text/javascript">\n';
code = code + '\tadimp.id = ' + 1 + ';\n';
code = code + '\tadimp.type = ' + 1 + ';\n';
code = code + '\tadimp.generate();\n';
code = code + '<\/script></code></pre>';
$("#code").html(code);
You should use < and > for < and > in this case. Try this
var code = '<pre><code><script type="text/javascript" src="http://source.com/test.js"><\/script>\n';
code = code + '<script type="text/javascript">\n';
code = code + '\tadimp.id = ' + 1 + ';\n';
code = code + '\tadimp.type = ' + 1 + ';\n';
code = code + '\tadimp.generate();\n';
code = code + '<\/script></code></pre>';
$("#code").html(code);
Surprise! You just manufactured your own XSS vulnerability. Always HTML-encode any data you put into HTML. ("data" is anything you want to appear on screen.)
In the HTML DOM this is thankfully completely automatic. Just use the text property, not the HTML property.
var code = [
'<script type="text/javascript" src="http://source.com/test.js"><\/script>',
'<script type="text/javascript">',
'\tadimp.id = ' + 1 + ';',
'\tadimp.type = ' + 1 + ';',
'\tadimp.generate();',
'<\/script>'
].join('\n');
$('#code').text(code);
// --------^^^^
Live demo: http://jsfiddle.net/6qdBD/3/
Pre tags format the text not necessarily keep what the text within them from being executed as html. Or in this case JavaScript. A better method would be to replace < and > with the html entities < and >.
Instead of using the < and > symbols use < and >
var code = '<script type="text/javascript" src="http://source.com/test.js"></script>\n'
I suggest to just simply replace the < in <script tag to '< and at the end to '>.
Since HTML tags are permitted inside PRE, you cannot just "insert" a text file into an HTML document by slapping <PRE> and </PRE> around them. You have to convert the &, < and > characters into entities first.
From http://htmlhelp.com/reference/wilbur/block/pre.html
I know that I can access to doctype object via document.doctype or document.childNodes[0] but my problem is getting doctype as a string. I can do this in chrome and safari by calling document.doctype which returns <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. However in Firefox, calling document.doctype returns DocumentType object.
Is there a way to get the doctype string in all browsers as in chrome and safari?
Thanks!
In all compliant browsers (including Chrome/Safari), document.doctype also returns a DocumentType object. The following code can be used to generate a valid DOCTYPE string.
var node = document.doctype;
var html = "<!DOCTYPE "
+ node.name
+ (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
+ (!node.publicId && node.systemId ? ' SYSTEM' : '')
+ (node.systemId ? ' "' + node.systemId + '"' : '')
+ '>';
This method returns the correct string for valid (HTML5) doctypes, eg:
<!DOCTYPE html>
<!DOCTYPE html SYSTEM "about:legacy-compat">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
Explanation of the code:
node.name # Holds the name of the root element, eg: HTML / html
node.publicId # If this property is present, then it's a public document type.
#>Prefix PUBLIC
!node.publicId && node.systemId
# If there's no publicId, but a systemId, prefix SYSTEM
node.systemId # Append this if present
You can also use this one liner to get the current doctype. This will work in any modern browser and IE 9 and higher.
new XMLSerializer().serializeToString(document.doctype);
function get_doctype()
{
var doctype =
'<!DOCTYPE ' +
document.doctype.name +
(document.doctype.publicId?' PUBLIC "' + document.doctype.publicId + '"':'') +
(document.doctype.systemId?' "' + document.doctype.systemId + '"':'') + '>';
return doctype;
}
Is that what are you looking for ?
alert(document.doctype.publicId);
Concatenate DocumentType.name, .publicId and .systemId. Something like:
'<!DOCTYPE '+
DocumentType.name+' PUBLIC "'+ //maybe you should check for publicId first
DocumentType.publicId+'" "'+
DocumentType.systemId+'">'