Home|Sitemap|Contact

How can you load an external file into any HTML element without using an iFrame, a Frame or server side code?

Use the XMLHTTP object! [latin.htm] [lincoln.htm] From another domain->[preamble.htm] <-- (older IE only, fixed in later versions)
A text file [emails.txt] or [movies.txt]
Loading...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<title>Load External File In HTML Element Using XMLHTTP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<script type="text/javascript">
//create the Cross-browser XMLHttpRequest object
function getFile(pURL) {
   if (window.XMLHttpRequest) { // code for Mozilla, Safari, etc 
      xmlhttp=new XMLHttpRequest();
      xmlhttp.onreadystatechange=postFileReady;
      xmlhttp.open("GET", pURL, true);
      xmlhttp.send(null);
   } else if (window.ActiveXObject) { //IE 
      xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
      if (xmlhttp) {
         xmlhttp.onreadystatechange=postFileReady;
         xmlhttp.open('GET', pURL, true);
         xmlhttp.send();
      }
   }
}

// function to handle asynchronous call
function postFileReady() {
   if (xmlhttp.readyState==4) { 
      if (xmlhttp.status==200) { 
         document.getElementById('theExample').innerHTML=xmlhttp.responseText;
      }
   }
}

</script>
</head>

<body onload="getFile('http://www.rodsdot.com/ee/latin.htm');">
  <p>[<a href="javascript:void(0);" onclick="getFile('http://www.rodsdot.com/ee/latin.htm');">latin.htm</a>] [<a href="javascript:void(0);" onclick="getFile('http://www.rodsdot.com/ee/lincoln.htm');">lincoln.htm</a>]</p>
  <div id="theExample">Loading...</div>
</body>

</html>