I'm developing a chrome extension that reads html comments from a page and render them in an action popup.
However, I don't know how to (and if it's possible) to fetch some comments that are before and after the <html> tag. For example:
<!-- test test test -->
<DOCTYPE html>
<html>
...
</html>
In jQuery, $("html").before() and $("html").after() both returns the same as $("html").
Is it possible do fetch those types of comments using either jQuery or pure Javascript?
Edit: the page with the comments looks like this:
<!-- Comment I'd like to fetch -->
<!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-us" lang="en-us" >
<head>
<title>Featured Designers for WOMEN</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
With this document:
<!-- comment 1 -->
<!DOCTYPE html>
<!-- comment 2 -->
<html>
<body>
hello world
</body>
</html>
You get the first comment like this:
document.firstChild.nodeValue
The second comment is found like this:
document.childNodes[2].nodeValue
To get all comments underneath document:
var nodes = document.childNodes;
for (var i = 0, len = nodes.length; i !== len; ++i) {
if (nodes[i].nodeType === 8) {
console.log('Found comment' + nodes[i].nodeValue);
}
}
document.firstChild should do it.
$("html").siblings(); This will return all the dom object elements at the same level as the html tag I believe. I wanted to confirm by using JSfiddle but I'm receviing Javascript errors on their website using IE8 right now. I can confirm later when I get home if it doesn't work for you in your testing.
Related
I am working on a project which i need to convert it in Arabic. i am using codeigniter. when I write the Arabic in html it show me that (?????) for Arabic.
This is my HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<meta name="" content="">
</head>
<body>
<h1 dir='rtl'
lang='ar'>checking</h1>
<p dir="rtl" lang="ar" style="color:#e0e0e0;font-size:20px;">رَبٍّ زِدْنٍي عِلمًا</p>
</body>
</html>
it shows me text like that:
As i can see you are using some html5 based attributes like dir so you need to convert the html4 document to html5 doctype and use lang attribute on html tag and meta tag:
<!DOCTYPE HTML>
<html lang="ar">
<head>
<meta charset="utf-8">
A sample demo is below:
<h1 dir='rtl' lang='ar'>checking</h1>
<p dir="rtl" lang="ar" style="color:#e0e0e0;font-size:20px;">رَبٍّ زِدْنٍي عِلمًا</p>
the view source of this snippet looks something like this:
Try with adding meta charset for arabic at the begning
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-6">
or
Displaying Arabic text using PHP
Don't use the short tags . Use the full tags
Remove the quotes and semicolon from the first line and others that are outside the php tags
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">";
Close the span tag <span lang='ar-kw'
Make sure save the file with utf-8 encoding. You might be saving it with another coding.
Use the below as your startup file, it is HTML5, also with this <html lang="ar" dir="rtl"> you won't need to repeat it in every single element. use this and you're fine.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- your HTML structure -->
</body>
</html>
Concerning your issue: JS Fiddle 1 and JS Fiddle 2 -no need for lang attribute
In charset value, instead of using utf-8, use windows-1256
Add in you php connection code just:
$conn = new mysqli($host,$db_user,$db_password,$db_name);
$conn->set_charset("utf8");
And in you dislay php data code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
be sure if your file encoding is utf-8 to make this open your file in notebad then save as then you can see this below to select utf-8:
if you use eclipse you can update the files default encoding through windows-> preferences then from left side you can expand general and select content types, and by selecting the file type you can assign its default encoding then click update like the image below, also you can find the way for each editor to update default encoding:
script tag doesnt execute if i put it in head tag but works fine if i put it in body tag ..can anybody tell me the reason behind this?? here's my code
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
</body>
</html>
That's because HTML is parsed from top to bottom. That means that when you try to get the element demo it is not yet created.
To make it work in the head tag you should add a listener that will fire when the page is fully loaded.
document.addEventListener("DOMContentLoaded", function() {
// Here the DOM elements are loaded, and you can get them with .getElementById.
document.getElementById("demo").innerHTML = Date();
});
The <head> is for including other files and libraries and such (you can also include them in the body). But if you want to actually write JS code to manipulate the body, you have to place it in the body.
Ok, so i have this HTML web page with nothing fancy on it right? The problem is that when I try to place an image on the screen without using CSS (with the traditional < img > tag), I get this error in FireFox:
Use of attributes' nodeValue attribute is deprecated. Use value instead.
The image display is simple, just the tag and the src.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="administration/stylesheet.css">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<img src="administration/graphics/textlogo.png">
</body>
</html>
I hope someone knows what to do, cause I can't seem to find a solution.
Cheers!
I have following 2 files as below:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
function init(){
document.getElementById("mytest").innerHTML= "Results after rendering...";
}
</script>
<body onload="init();"><div id="mytest">OK</div>
</body>
</html>
The second page usually give the alert popup all source code of first 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
xmlhttp.open("GET", "test.html",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText)
}
}
xmlhttp.send(null)
</script>
<body>
</body>
</html>
All I want to do is I would like to get ONLY source code after rendering. How can get all code after rendering instead of getting all original code. So i can read < div id="mytest">Results after rendering...< / div> when I try with XMLHTTP. How can I do how to get the code which are already render for page, I want only with classic Javascript or DOM, I don't want with Jquery, JSON, Mootool at all. thanks in advance.
Instead of loading the page with ajax, use your browser's iframe support to your advantage.
Change the second file that alerts the HTML source to something 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
function displayAlert()
{
alert(document.getElementById('iframe').contentDocument.body.innerHTML);
}
</script>
<body onload="displayAlert()">
<iframe src="test.html" id="iframe" style="display:none;"></iframe>
</body>
</html>
This will load test.html in an invisible iframe. Your browser will automatically render test.html inside the iframe and will call displayAlert() when it is done. displayAlert() will grab the the source code inside the iframe and alert it. However, this solution will only work if test.html is on the same server as the script above. If test.html is on a completely different server, this solution will not work because the permission to access the iframe will be denied. If this is the case, I can let you know of another solution that will bypass this.
I'm not sure I know what you're really asking, but why not just get:
alert(document.body.innerHTML);
to get the actual rendered body HTML with any changes that have been made by scripts upon loading.
Note: even unmodified parts of innerHTML will not always compare exactly to the original source HTML because in some cases browsers are reconstituting the innerHTML from some other parsed data form so attributes may not have the same quoting or be in the same order and capitalization may not be the same.
If you have something like the code below, it is impossible to access any node type below the head tag. I am guessing the reason is the JavaScript code executed before the rest of the document was created. But is there a way to access these nodes from the head tag. I want to access them from the head tag because I like my JavaScript code to be in one location if possible. I know jquery uses $(document).ready(). Is there something similar to that?
<!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>
<script type="text/javascript">
var div = document.getElementById('myDiv')
alert(div)
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id='myDiv'></div>
</body>
</html>
The simplest analog to jQuery's $(document).ready() is window.onload:
<!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>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById('myDiv')
alert(div)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id='myDiv'></div>
</body>
</html>
It is not as good because it will wait until all images are downloaded before it fires. If you must have the equivalent, you could use a microlib such as this one.
"I like my JavaScript code to be in one location if possible"
Yes: An external js file. It is bad practice to write js in the head. In the same way that writing styles in the head is poor. Hopefully you are using jquery for more than just the ready event, but it is an invaluable initializer even if you aren't. Write your js in a separate file, hopefully in some type of a container so you don't clutter the global namespace, and initialize it with $(document).ready();
You must wait for the 'onload' DOM event. jquery $(document).ready() is a wrapper for setting event handlers for onload.
Without jQuery you might try:
<!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>
<script type="text/javascript">
function do_onload() {
var div = document.getElementById('myDiv')
alert(div)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload='do_onload()'>
<div id='myDiv'>I am here</div>
</body>
</html>
Well as a general rule i tend to put all inline js at the end of the document anyway, only externals do i usually put in the head. However, you can use the same methods jquery uses. I dunno exactly what the jq source looks like but something like this should work (untested):
window.onDomReady = function (fn) {
if(document.addEventListener) {
document.addEventListener("DOMContentLoaded", func, false);
} else {
document.onreadystatechange = function(func){
if(document.readyState == "interactive") {
fn(func);
}
}
}
};
And then you would use it like:
window.onDomReady(function(){
// do your stuff
});
I dunno if thats completely cross browser compatible either... that would be on of the benefits of using something like jQuery instead of writing your own.