Jump to content

External document as document?


Agantacroxi

Recommended Posts

Hello,I have a question: how do you define the document object to be not the current one, but an external one? Even with AJAX?What I want to do is take the content of a certain ID, located in an external file.Like

var varname = document.getElementByID("idname").innerHTML

but document is not the current document.Is it possible? :blink:Thanks,Agantacroxi

Link to comment
Share on other sites

You can load data from XML files. Though getElementById() is only from HTML, you would need to access XML nodes with getElementsByTagName(), childNodes, nextSibling, previousSibling, parentNode and other tree navigation properties. If you want to get data from another HTML file, you need to open it with window.open() and then access it using the window's reference.

var n = window.open("file.html");var el = n.document.getElementById("id");

Link to comment
Share on other sites

Thanks for your quick response.I need to load the data from an HTML file. Your script strangely doesn't work for me, it opens a tab with the file and stops.Here is how I wrote my script:

function useexternal(){var n = window.open("file.html");var el = n.document.getElementById("idname").innerHTML;document.getElementById("idname2").innerHTML = el}

In the document:

<p id="idname2">Lorem ipsum</p><form> <input type="button" value="Click me" onclick="loadfile()" /></form>

It just opens the file without changing "Lorem ipsum" into the content of the idname id in file.html... What did I do wrong?And is it possible to perform this task without opening file.html each time? Thanks! :)

Edited by Agantacroxi
Link to comment
Share on other sites

It's possible that you have to wait for the file to load. Another important thing is that the file has to be on the same domain, and may not work from within the Windows filesystem.

var n = window.open("file.html");n.onload = function() {    var data = n.document.getElementById("idname").innerHTML;    document.getElementById("idname2").innerHTML = data;}

It is required to open the HTML document in a window if you want to access its DOM tree.

Link to comment
Share on other sites

Hm, it strangely doesn't work...Insert this text in the Try it Editor:

<!DOCTYPE html><html><head><script>function getIDext(){window.open("default.asp");n.onload = function() {	var data = n.document.getElementById("translate_link").innerHTML;	document.getElementById("idname2").innerHTML = data;}}</script></head><body> <h1 id="idname2">Try</h1><form><input type="button" value="click" onclick="getIDext()" /></form></body></html>

Edited by Agantacroxi
Link to comment
Share on other sites

And why not...

var url = "the url of the page containing the source you want";var http_request = false;if (window.XMLHttpRequest) { // Mozilla, Safari, and othershttp_request = new XMLHttpRequest();if (http_request.overrideMimeType) {http_request.overrideMimeType('text/xml'); //Mozilla browsers}} else if (window.ActiveXObject) { // IEtry {http_request = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {http_request = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {}}}else {// Code to execute if the browser doesn't support XMLHttpRequest}if (!http_request) {// Code to execute if http_request is false (meaning it hasn't transformed in XMLHttpRequest nor in ActiveXObject)return false;}http_request.onreadystatechange = function() { functiontoexecute(http_request); };http_request.open('GET', url , true);http_request.responseType = "document" //necessary when it is not an XML document but a HTML one.http_request.send(null);function functiontoexecute(http_request) {if (http_request.readyState == 4) {if (http_request.status == 200) { //Example function if everything goes wellvar htmldoc = http_request.responseXML;var alertcontent = htmldoc.getElementById('idname').innerHTML;alert(alertcontent);} else {// Code if there has been an error (404 or other)}}}

The only real problem is that this is not very compatible. Chrome 18+, IE 10+, Firefox 11+, no Opera, no Safari, Firefox Mobile 11+, no other mobile browsers... Source: https://developer.mo..._XMLHttpRequest

Edited by Agantacroxi
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...