Given a String which contains HTML for an entire page, I want only the innerHTML of the body. Rather than parse the HTML myself, it seems easier if I could make an element from the String, and then just get the body directly.
I found some things related, but that I couldn't get to work (I can't find the question anymore).
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
var ret = xmlhttp.responseText + "";
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(ret);
}
}
xmlhttp.open("GET", "http://url.php", false);
xmlhttp.send();
Right now I have this ajax request, but I need only the body from the return.
I tried document.createElement(ret).body and new Element(ret).body but they didn't seem to work.
var helper = document.createElement("html");
helper.innerHTML = ret;
body = helper.querySelector("body"); //Or getElementsByTagName("body")[0]
You could use simple_html_dom to do this, and get the HTML of the entire page using PHP, and then get only the contents of the body, like this
$html=file_get_html("url.php");
$body=$html->find("body");
$echo $body->plaintext
Related
I'm trying to write a chrome extension that will get a value from a current page, then use that information to go to another page and pull a specific element from the html response. I can get the html response fine, but I'm unable to parse the html response to get the specific element.
content.js
function getTicketInfo(){
var ticketURI = document.getElementById("p3_lkid").value;
var ticketNumber = document.getElementById("p3_lkold").value;
var xhr = new XMLHttpRequest();
xhr.open('GET',"remotePage.html",true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
function handleResponse(xhr)
}
}
xhr.send();
}
function handleResponse(xhr){
var contactElement = xhr.getElementById("CF00N80000005MAX6_ileinner");
alert(contactElement.clildNodes[0].nodeValue);
}
remotePage.html
<html>
<div id="CF00N80000005MAX6_ileinner">
Text I need!
</div>
</html>
How can I get this value from the external page? Is there a better way to request this information?
Your XHR response is a string, and not a DOM.
With jQuery you'll be able to convert it to a DOM, and query it.
function handleResponse(xhr){
$(xhr.response).find('#CF00N80000005MAX6_ileinner')
}
This is as simple as not parsing the HTML response to a DOM object. According to MDN, this is how you parse XML (Or HTML, and with Vanilla JavaScript):
var parser = new DOMParser();
var doc = parser.parseFromString(xhr, "text/xml");
And then using the new DOM Object doc for accessing elements.
var contactElement = doc.getElementById("CF00N80000005MAX6_ileinner");
alert(contactElement.childNodes[0].nodeValue);
I also noticed you spelled childNodes wrong, but that isn't the main problem.
I want to write a JavaScript to return contents of a webpage when URL is given and enter those contents as a data in table?
The alert pop up is not working.
Return HTML content as a string, given URL. JavaScript function returns a blank screen.
Here is my code:
<html>
<head></head>
<body>
<script type="text/JavaScript"> function httpGet(theUrl) {
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false);
xmlHttp.send(null);
return xmlHttp.responseText;
}
document.write(httpGet("stackoverflow.com/")); </script>
</body>
</html>
You can simply get contents of a webpage by using javascript's ajax
var contents="";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
contents=this.responseText;
}
};
xhttp.open("GET", "webpage.html", true);
xhttp.send();
Although you can also manipulate HTML you should make sure that webpage.html is showing the data in a valid format for you to easily manipulate. Like JSON, xml or anything else so that you can use the data in the contents variable and iterate over it for your insert statements.
The reason because its showing a blank screen is because of the cross origin policy. stackoverflow.com does not allow CORS(cross origin requests).
And one more thing,, Until and unless you are requesting from a relative Url, specify the address with the protocol name.
Like : 'stackoverflow.com' to 'http://stackoverflow.com'
So just change the address to your file and it will work fine. :)
I am using the below JavaScript to try to get a node name from an xml document.
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", "doc.xml", false);
xhttp.send();
xmlDoc = xhttp.responseXML;
alert(xmlDoc.getElementsByTagName("DesignPatterns")[0].childNodes[0].nodeName);
}
The XML document...
<DesignPatterns>
<Composite>Composite</Composite>
</DesignPatterns>
The Alert is outputting '#text'. I expected it to output 'Composite'. Why is this happening, is there some invisible and magical #text node that I am not seeing? I assume its the /n that I see in debug but this just makes no sense to me :(
That is because of the formatting characters (whitespace, newline etc) in your formatted xml. Everything is treated as a node. Any continuous white space becomes a text node. You could use children instead of childNodes. children will not include text nodes.
xmlDoc.getElementsByTagName("DesignPatterns")[0].children[0].nodeName
I'm new to JavaScript and I'm not too familiar with the syntax.
I want to know how the function
{
/*
Data is split into distributions and relations - so append them
*/
//getURLParameters();
/*** Read in and parse the Distributome.xml DB ***/
var xmlhttp=createAjaxRequest();
var xmlDoc, xmlDoc1;
xmlhttp.open("GET","distributome-relations.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
xmlhttp=createAjaxRequest();
xmlhttp.open("GET","distributome-references.xml",false);
xmlhttp.send();
xmlDoc1 = xmlhttp.responseXML;
var node = xmlDoc.importNode(xmlDoc1.getElementsByTagName("references").item(0), true);
xmlDoc.getElementsByTagName("distributome").item(0).appendChild(node);
try{
DistributomeXML_Objects=xmlDoc.documentElement.childNodes;
}catch(error){
DistributomeXML_Objects=xmlDoc.childNodes;
}
traverseXML(false, null, DistributomeXML_Objects, distributome.nodes, distributome.edges, distributome.references, distributomeNodes, referenceNodes);
xmlhttp=createAjaxRequest();
xmlhttp.open("GET","Distributome.xml.pref",false);
xmlhttp.send();
if (!xmlhttp.responseXML.documentElement && xmlhttp.responseStream)
xmlhttp.responseXML.load(xmlhttp.responseStream);
var ontologyOrder = xmlhttp.responseXML;
getOntologyOrderArray(ontologyOrder);
//console.log("firstread: xmlDoc: " xmlDoc);
}
I'm trying to print the contents of xmlDoc so I can examine the contents the next time I assign values to the variable so I know that I am creating a valid document.
For the purposes of clarification - I am using ProtoVis and want to redraw the nodes after I upload an XML file containing some data.
The first issue I need to fix is creating a valid xmlDoc so that I can display newer information and so wanted to view xmlDoc contents so I could compare it to the next time xmlDoc is assigned a value using the file uploaded.
Thanks for your time!
Edit: I realised that the console.log was missing a comma.
Edit: My question is when the function is executed - given as I can't explicitly call it
Your syntax is wrong. You are missing a + to concatenate the strings:
console.log("firstread: xmlDoc: " + xmlDoc);
I want to read text file's comma separated variables in a java script array
right now i have hard coded values like this
var arrUserTags = new Array('{{Name}}','{{Address}}','{{Company}}');
but i want to read it from a text file dynamically on page load
how can i read it?
I am done with below solution but now i am facing 1 more problem.
When i do changes to text file that don't become effective, while the browser takes the old values only? How to sort it out?
You need AJAX to load the file:
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", path, true);
xmlhttp.send();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
parse(xmlhttp.responseText);
}
}
And then Split the text:
function parse (text) {
var array = text.split(",");
//Do something
}
You can not use Javascript (not talking about server-side js such as node.js) to read local file system files due to security reasons, you can do so with some server-side language such as PHP, JSP, etc.