Load an xhtml file to a div element using CORS and javascript
Question
I want to load a page from another domain to a div element in my page. I'm using CORS and it works since it shows the file is loaded in console log but I cannot manage to add it to my div. Here's my code to make it 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 do I display the loaded page in theader div?
UPDATE I found out that this happens in firefox and chrome because I use localhost. It works in ie but it only loads the text without css and images. Any idea how can I load the whole page into the div? I guess my question now will be does the page load with all resources in CORS like it does with iframe? If so how?
1 answers
solution1
0 2014-04-20 10:12:44
A div element is meant to contain only certain HTML elements: in a nutshell the elements that you can find in the body . But not all HTML elements, and in particular not a html or head element. This is why your code does not work.
To solve your problem you either need to use an iframe (but from your question it seems this is not what you want), or put the content of the body element in the div and parse the head and load it in the current head.
Something like that (not tested):
var hpage = document.createElement("html");
hpage.innerHtml = request.responseText;
//Below you might want to write more robust code
//depending on the content of the response and how much you trust it
var head = hpage.getElementsByTagName("head")[0];
var body = hpage.getElementsByTagName("body")[0];
document.getElementById("theader").innerHTML = body.innerHTML;
//Now iterates over the children of head to find
//the script and style elements, and you can append them to the head of the document
var currentHead = document.getElementsByTagName("head")[0];
var scripts = head.getElementsByTagName("script");
for (var i=0; i<scripts.length; i++) {
currentHead.appendChild(scripts[i]);
}
//same thing for style elements,
//you could even do that for all elements
//depending on what the response may contain
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.