html - Load an xhtml file to a div element using CORS and javascript -
i want load page domain div element in page. i'm using cors , works since shows file loaded in console log cannot manage add div. here's code make more clear:
<script type="text/javascript"> function createcorsrequest(method, url){ var xhr = new xmlhttprequest(); if ("withcredentials" in xhr){ xhr.open(method, url, true); } else if (typeof xdomainrequest !== "undefined"){ xhr = new xdomainrequest(); xhr.open(method, url); } else { xhr = null; } return xhr; } var request = createcorsrequest("get", "http://localhost:8080/test/header.xhtml"); if (request){ request.onreadystatechange = function() { if (request.readystate === 4) { if (request.status >= 200 && request.status < 400) { var hpage = request.responsetext; document.getelementbyid("theader").innerhtml = hpage; } else { alert("an error occured! request status: +"request.status); } } }; request.send(); } </script> <body> <div id="theader"></div> </body> how display loaded page in theader div?
update found out happens in firefox , chrome because use localhost. works in ie loads text without css , images. idea how can load whole page div? guess question page load resources in cors iframe? if how?
a div element meant contain html elements: in nutshell elements can find in body. not html elements, , in particular not html or head element. why code not work.
to solve problem either need use iframe (but question seems not want), or put content of body element in div , parse head , load in current head.
something (not tested):
var hpage = document.createelement("html"); hpage.innerhtml = request.responsetext; //below might want write more robust code //depending on content of response , how trust var head = hpage.getelementsbytagname("head")[0]; var body = hpage.getelementsbytagname("body")[0]; document.getelementbyid("theader").innerhtml = body.innerhtml; //now iterates on children of head find //the script , style elements, , can append them head of document var currenthead = document.getelementsbytagname("head")[0]; var scripts = head.getelementsbytagname("script"); (var i=0; i<scripts.length; i++) { currenthead.appendchild(scripts[i]); } //same thing style elements, //you elements //depending on response may contain 
Comments
Post a Comment