Load HTML File Contents to Div [without the use of iframes]

by

Wow, from all the framework-promotional answers you’d think this was something JavaScript made incredibly difficult. It isn’t really.

var xhr= new XMLHttpRequest();
xhr.open('GET', 'x.html', true);
xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;
    if (this.status!==200) return; // or whatever error handling you want
    document.getElementById('y').innerHTML= this.responseText;
};
xhr.send();

If you need IE<8 compatibility, do this first to bring those browsers up to speed:

if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
    window.XMLHttpRequest= function() {
        return new ActiveXObject('MSXML2.XMLHttp');
    };
}

Note that loading content into the page with scripts will make that content invisible to clients without JavaScript available, such as search engines. Use with care, and consider server-side includes if all you want is to put data in a common shared file.

More Related Contents:

  1. Get one element title and add this to another div in jquery
  2. Set cookie and get cookie with JavaScript [duplicate]
  3. contenteditable, set caret at the end of the text (cross-browser)
  4. All About…. Z-Index?
  5. How to calculate the XPath position of an element using Javascript?
  6. How to disable scroll without hiding it?
  7. how to show alternate image if source image is not found? (onerror working in IE but not in mozilla) [duplicate]
  8. Uncaught Error: SECURITY_ERR: DOM Exception 18 when I try to set a cookie
  9. How to start automatic download of a file in Internet Explorer?
  10. Coordinates of selected text in browser page
  11. canvas2d toDataURL() different output on different browser
  12. How can I execute a python script from an html button?
  13. jquery select option click handler
  14. How to get old Value with onchange() event in text box
  15. How to stop a requestAnimationFrame recursion/loop?
  16. How to wrap part of a text in a node with JavaScript
  17. Increment a number in a string in with regex
  18. Is there a best practice for generating html with javascript
  19. How to capture generated audio from window.speechSynthesis.speak() call?
  20. how validate file size using HTML and Javascript on client side
  21. Error message “DevTools failed to load SourceMap: Could not load content for chrome-extension://…”
  22. How to disable JavaScript function calls from the browser console?
  23. How to get the value of a selected radio button
  24. clearing circular regions from HTML5 Canvas
  25. How to check if HTML5 audio has reached different errors
  26. Detect if dropdown navigation would go off screen and reposition it
  27. Converting sanitised html back to displayable html
  28. Creating a Clickable Grid in a Web Browser
  29. Rename Object Key in an array using javascript
  30. converting a javascript string to a html object [duplicate]

Leave a Comment