Ajax: responsetext doesn't include the <head></head> section in internet explorer.

Factual Questions
1

edit: I have tried googling this (as usual) but it is very hard to find the answer in the plethora of not-quite relevant results.

I have a bit of Ajax code that simply plonks the contents of a html page into a div…



<html><head>
<script>

function getpage(element,page)
{
	if (window.XMLHttpRequest)
	{
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
  
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById(element).innerHTML= xmlhttp.responseText
			
			//alert(xmlhttp.responseXML.xml);
		}
	}
	xmlhttp.open("GET",page,true);
	xmlhttp.setRequestHeader("Content-type","text/plain");
	xmlhttp.send(null);
}

</script>
</head>
<body onload="getpage('adiv','rotas/rota.htm')">

<div  id="adiv"></div>

</body>
</html>

The script works fine in Firefox. But when I run it in Internet Explorer (8) it ignores everything outside the body tags in the page being inserted (in the example above: rota.htm)
I realize this is logically correct behaviour as it avoids duplicating the head section in the calling page. But is there any way to force it to retreive the head section?

I am losing all the styling of the page being called because of this.

Modifying the page being called is not an option as it’s a microsoft excel generated htm file.

2

I’m sure this is a silly question, but why are you using ajax for this? The entire file is the contents of the thing you want to load, and the thing you want to load resides on the same server. Why can’t you just load the rota.html directly? Or, at worst, include it via PHP or something, so you’re not forcing the browser to make an extra request and adding a bunch of javascript complexity…

3

Well it doesn’t strictly need to be ajax. It’s just that the xmlhttprequest happens to be the only way I know (so far) of getting the contents of a page into a variable on the client side which can then be copied to the ‘innerHTML’ property of a page element. I am in the middle of learning ajax and decided to try and use it to achieve something else I’ve been working on…

Basically I want to load the rota only when the calling page has fully loaded so as to speed up the calling page’s load time. The rota is a microsoft excel generated file so it contains a gazillion lines of unnecesary code. Much of that code generates errors in non-ie browsers - slowing down the load time even further.

So I guess I could simplify the OP question…

Is there a way of loading the entire text of a html file into a variable, using javascript, for insertion into a div element.

4

Yes; that is in fact exactly what you’re doing already. :slight_smile:

The problem isn’t that the non-body parts are being omitted from the response text – I just tried it myself with IE8, and the value of xmlhttp.responseText is the complete contents of the requested page. What’s happening is that IE8 isn’t rendering the result the same way that Firefox does. And this isn’t really surprising, since what you’re giving it is basically a massively malformed document. It’s just plain invalid to put a <html> element inside the body (even in tag soup I don’t think that’s ever been considered allowed), nor <head> elements or stylesheets.

Since what you want is basically to include an entirely separate HTML document, it might be a better idea to load the external document in an <iframe>; that would be valid and should render as expected in all browsers. And you can control the loading of the iframe with a client-side script easily enough, with no AJAX required.

5

I tried to use an iframe but I got close to tearing my hair out trying to get the iframe to resize to its src page. It simply refused to cooperate.

I also was checking the ‘view->source->dom(page)’ in ie (ie’s equivalent of the ‘view generated source’ in the firefox developer thing’) and it was actually showing the contents of the div as being everythign inside the body tag, and nothing else.

So according to the dom(page) source IE isn’t just rendering it differently, it actually doesn’t have the head stuff to render.
Anyway, if it’s true that responseText does actually contain the entire page, then in theory I should be able to un ‘malform’ it myself right? (i.e. remove the html,head, and body tags, so the stuff inside the head tag still appears, and so does the stuff inside the body tag) to give it a better chance of displaying correctly in ie.

6

Managed to do it…


<html><head>
<script type="text/javascript" language="javascript">
function include(lyr,url)
{
   if (document.all)
   {
      try {
      var xml = new ActiveXObject("Microsoft.XMLHTTP");
      xml.Open( "GET", url, false );
      xml.Send()

       }
      catch (e) {
      var xml = new ActiveXObject("MSXML2.XMLHTTP.4.0");
      xml.Open( "GET", url, false );
      xml.Send()
      }
   }
   else
   {
            var xml=new XMLHttpRequest();
            xml.open("GET",url,false);
            xml.send(null);
   }

   text = xml.responseText;
   text = text.replace("<html>","");
   text = text.replace("</html>","");
   text = text.replace("<head>","");
   text = text.replace("</head>","");
   text = text.replace("<body>","");
   text = text.replace("</body>","");
   splittext = text.split("<style type=\"text/css\">");
   splittext = splittext[1].split("</style>");
   css = splittext[0];
   everythingelse = splittext[1];
   
   addCss(css);
   document.getElementById(lyr).innerHTML=everythingelse;   
   
}

function addCss(cssCode) {
var styleElement = document.createElement("style");
  styleElement.type = "text/css";
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssCode;
  } else {
    styleElement.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName("head")[0].appendChild(styleElement);
}
</script>
</head>
<body onload="include('adiv','test.htm')">
<div id="adiv">sdfgboui hsdguhwruh o ikuy </div>
</body>
</html>
7

That makes my head hurt :wink:

8

I’m not really surprised :slight_smile: I’m the type of person who will end up with the worst code in the world. I tend to start improving it after I get it working.

9

Yeah, I suppose that works, but it’s not the sort of solution I’d use unless I were physically forced to. :wink:

Is there no way to get your generated document in a more convenient form? E.g., with separate stylesheet files? Then you could just link in the stylesheets easily enough.

10

It’s a microsoft excel generated file so all the css is embedded.

11

Turns out the strategy doesn’t make a blind bit of difference to the page load time (scores 88 with yslow plugin for firefox)

But a useful learning exercise none the less.

12

So why not use an Excel CSV file?

13

Lose formatting.

14

If I had to do something like this (and I’d probably try to avoid it at all costs), I’d be inclined to write a separate script that takes the Excel HTML file and reformats it into something more useful while retaining the formatting you need. I have a strong suspicion that the HTML Excel puts out is pretty horrible and includes a bunch of crap you don’t need anyway.

15

Only if the CSV file contains only data. You can embed HTML, CSS, whatever in the CSV file.