192

I want home.html to load in <div id="content">.

<div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div>
<div id ="content"> </div>
<script>
      function load_home(){
            document.getElementById("content").innerHTML='<object type="type/html" data="home.html" ></object>';
  }
</script>

This works fine when I use Firefox. When I use Google Chrome, it asks for plug-in. How do I get it working in Google Chrome?

5
  • 1
    And remember to return false as in load_home(); return false
    – mplungjan
    Jul 14, 2013 at 4:37
  • 2
    Not too easy without libraries. Might be better off loading into an iFrame. Check this post out: stackoverflow.com/questions/14470135/…
    – sgeddes
    Jul 14, 2013 at 4:41
  • 1
    home.html is a simple web page, I just named it home. @jayharris
    – Giliweed
    Jul 14, 2013 at 4:46
  • And you're trying to load everything on that page into the content element, or just place a link to the page in the content element ?
    – adeneo
    Jul 14, 2013 at 4:47
  • 1
    I'm trying to load everything on that page into the content element. I edited the question. @adeneo
    – Giliweed
    Jul 14, 2013 at 5:08

17 Answers 17

241

I finally found the answer to my problem. The solution is

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
8
  • 3
    Even though this is elegant and clean, I suppose it would be better if you actually created the object element through the DOM api.
    – David
    Jan 21, 2015 at 19:13
  • 4
    This is slow and insecure to attack - see my answer below (was too long to fit in comment)
    – Sam Redway
    Sep 19, 2015 at 17:38
  • 1
    @DavidMaes what do you suggest ? can you show a sample ?
    – Xsmael
    Nov 24, 2016 at 13:12
  • 2
    While this may be insecure, if you're doing a simple "local within a folder on your desktop" development this is fine -- not everyone is running a bank website with clients handling bank account information and running into a XSS attack. Thanks for the solution, for my needs I ended up having to go another route and requiring a python server and using the regular Jquery load() function for external dynamically loaded html. But this was helpful for getting me along in my issue
    – rwarner
    Apr 7, 2017 at 16:07
  • 2
    @KamilKiełczewski type="type/html" is changed to type="text/html"
    – Shayan
    Apr 25, 2019 at 19:01
72

You can use the jQuery load function:

<div id="topBar">
    <a href ="#" id="load_home"> HOME </a>
</div>
<div id ="content">        
</div>

<script>
$(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("content.html");
    });
});
</script>

Sorry. Edited for the on click instead of on load.

1
72

Fetch API

function load_home (e) {
    (e || window.event).preventDefault();

    fetch("http://www.yoursite.com/home.html" /*, options */)
    .then((response) => response.text())
    .then((html) => {
        document.getElementById("content").innerHTML = html;
    })
    .catch((error) => {
        console.warn(error);
    });
} 

XHR API

function load_home (e) {
  (e || window.event).preventDefault();
  var con = document.getElementById('content')
  ,   xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function (e) { 
    if (xhr.readyState == 4 && xhr.status == 200) {
      con.innerHTML = xhr.responseText;
    }
  }

  xhr.open("GET", "http://www.yoursite.com/home.html", true);
  xhr.setRequestHeader('Content-type', 'text/html');
  xhr.send();
}

based on your constraints you should use ajax and make sure that your javascript is loaded before the markup that calls the load_home() function

Reference - davidwalsh

MDN - Using Fetch

JSFIDDLE demo

4
  • thanks. but my code relates to a part of a project. and sorry to say I'm not suppose to use iframe in the project work. I edited the question. have a look @jay harris
    – Giliweed
    Jul 14, 2013 at 5:12
  • 1
    @Jay Harris : What about the same origin policy ?
    – ArunRaj
    Apr 29, 2014 at 12:49
  • 1
    @ArunRaj you can't load a page that comes from another website within javascript bc it's a security concern. but you can load a script from your server, that will in turn load that other page and echo it back to javascript via ajax.
    – Jay Harris
    Apr 29, 2014 at 19:56
  • 1
    Adding a Content-Type header to a GET request makes no sense - I think you meant setRequestHeader("Accept", "text/html") ? Jan 8, 2019 at 13:27
42

Fetching HTML the modern Javascript way

This approach makes use of modern Javascript features like async/await and the fetch API. It downloads HTML as text and then feeds it to the innerHTML of your container element.

/**
  * @param {String} url - address for the HTML to fetch
  * @return {String} the resulting HTML string fragment
  */
async function fetchHtmlAsText(url) {
    return await (await fetch(url)).text();
}

// this is your `load_home() function`
async function loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}

The await (await fetch(url)).text() may seem a bit tricky, but it's easy to explain. It has two asynchronous steps and you could rewrite that function like this:

async function fetchHtmlAsText(url) {
    const response = await fetch(url);
    return await response.text();
}

See the fetch API documentation for more details.

7
  • 1
    For those that are having problems using this, make sure that the functions are written outside of the "window.onload" function.
    – Mae Cana
    Jun 3, 2020 at 12:13
  • Show de bola é o que eu queria. Jun 16, 2021 at 2:49
  • I've put the fetchHtmlAsText() and loadHome() functions in /reusable/js/test.js file. How do I call this function from /index.html and /article/sample.html to be able to load a common header located in /reusable/header.html? Jul 18, 2022 at 14:07
  • Tried to do this.. <body><content onload="loadHome()"></content></body> failed :( Jul 18, 2022 at 14:12
  • async function fetchHtmlAsText(url) { return await (await fetch(url)).text(); } // this is your load_home() function async function loadHeader() { const contentDiv = document.getElementById("headercontent"); contentDiv.innerHTML = await fetchHtmlAsText("/reusable/header.html"); } async function loadFooter() { const contentDiv = document.getElementById("footercontent"); contentDiv.innerHTML = await fetchHtmlAsText("/reusable/footer.html"); } async function loadHeaderfooter() { loadHeader(); loadFooter(); } window.onload = loadHeaderfooter(); Jul 18, 2022 at 14:50
21

I saw this and thought it looked quite nice so I ran some tests on it.

It may seem like a clean approach, but in terms of performance it is lagging by 50% compared by the time it took to load a page with jQuery load function or using the vanilla javascript approach of XMLHttpRequest which were roughly similar to each other.

I imagine this is because under the hood it gets the page in the exact same fashion but it also has to deal with constructing a whole new HTMLElement object as well.

In summary I suggest using jQuery. The syntax is about as easy to use as it can be and it has a nicely structured call back for you to use. It is also relatively fast. The vanilla approach may be faster by an unnoticeable few milliseconds, but the syntax is confusing. I would only use this in an environment where I didn't have access to jQuery.

Here is the code I used to test - it is fairly rudimentary but the times came back very consistent across multiple tries so I would say precise to around +- 5ms in each case. Tests were run in Chrome from my own home server:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        /**
        * Test harness to find out the best method for dynamically loading a
        * html page into your app.
        */
        var test_times  = {};
        var test_page   = 'testpage.htm';
        var content_div = document.getElementById('content');

        // TEST 1 = use jQuery to load in testpage.htm and time it.
        /*
        function test_()
        {
            var start = new Date().getTime();
            $(content_div).load(test_page, function() {
                alert(new Date().getTime() - start);
            });
        }

        // 1044
        */

        // TEST 2 = use <object> to load in testpage.htm and time it.
        /*
        function test_()
        {
            start = new Date().getTime();
            content_div.innerHTML = '<object type="text/html" data="' + test_page +
            '" onload="alert(new Date().getTime() - start)"></object>'
        }

        //1579
        */

        // TEST 3 = use httpObject to load in testpage.htm and time it.
       function test_()
       {
           var xmlHttp = new XMLHttpRequest();

           xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                {
                   content_div.innerHTML = xmlHttp.responseText;
                   alert(new Date().getTime() - start);
                }
            };

            start = new Date().getTime();

            xmlHttp.open("GET", test_page, true); // true for asynchronous
            xmlHttp.send(null);

            // 1039
        }

        // Main - run tests
        test_();
    </script>
</body>
</html>
2
  • 1
    I think instead of "accurate" you mean "precise."
    – pulse0ne
    Sep 19, 2015 at 18:26
  • I mean I ran it many times and there was only a swing of a few milliseconds each time. So the times given are accurate to +- 5ms or something close to that. Sorry I may not have been entirely clear there.
    – Sam Redway
    Sep 19, 2015 at 18:50
9

try

async function load_home(){
  content.innerHTML = await (await fetch('home.html')).text();
}

async function load_home() {
  let url = 'https://kamil-kielczewski.github.io/fractals/mandelbulb.html'

  content.innerHTML = await (await fetch(url)).text();
}
<div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div>
<div id="content"> </div>

5

When using

$("#content").load("content.html");

Then remember that you can not "debug" in chrome locally, because XMLHttpRequest cannot load -- This does NOT mean that it does not work, it just means that you need to test your code on same domain aka. your server

1
  • 11
    "jQuery" != "javascript" || jQuery < javascript || OP.indexOf("jQuery") < 1 Dec 15, 2015 at 9:05
5

You can use the jQuery :

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});
3
  • 5
    Please explain your answer. Also this looks like jQuery which the OP did not mention in the question.
    – David
    May 22, 2015 at 10:37
  • 2
    sir here some more answers is in jquery
    – Anup
    May 22, 2015 at 10:45
  • 2
    jQuery is pretty standard to do such Ajax calls; so I find the answer concise and appropriate.
    – Luca
    Mar 2, 2017 at 8:26
4
$("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

or

document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';
1
<script>
var insertHtml = function (selector, argHtml) {
$(document).ready(function(){

    $(selector).load(argHtml);
 
});
var targetElem = document.querySelector(selector);
    targetElem.innerHTML = html;
};

var sliderHtml="snippets/slider.html";//url of slider html
var items="snippets/menuItems.html";
insertHtml("#main",sliderHtml);
insertHtml("#main2",items);
</script>

this one worked for me when I tried to add a snippet of HTML to my main.html. Please don't forget to add ajax in your code pass class or id as a selector and the link to the HTML snippet as argHtml

0

There is this plugin on github that load content into an element. Here is the repo

https://github.com/abdi0987/ViaJS

0

I use jquery, I found it easier

$(function() {
    $("#navigation").load("navbar.html");
});

in a separate file and then load javascript file on html page

0
  • load html form a remote page ( where we have CORS access )
  • parse the result-html for a specific portion of the page
  • insert that part of the page in a div on current-page

//load page via jquery-ajax
$.ajax({
   url: "https://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript",
   context: document.body
}).done(function(data) {

//the previous request fails beceaus we dont have CORS on this url.... just for illlustration...

   //get a list of DOM-Nodes 
   var dom_nodes = $($.parseHTML(data));

  //find the question-header
   var content = dom_nodes.find('#question-header');

  //create a new div and set the question-header as it's content 
   var newEl = document.createElement("div");
  $(newEl).html(content.html());
   
  //on our page, insert it in div with id 'inserthere'
  $("[id$='inserthere']").append(newEl);
});
                               
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>part-result from other page:</p>
<div id="inserthere"></div>

-1

Use this simple code

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```
2
  • w3.includeHTML() is not defined Feb 24, 2020 at 15:28
  • 2
    For those wondering, w3-include-HTML is part of W3Schools.com's W3.JS script library (available here: w3schools.com/w3js/default.asp ). I want to point out that W3Schools (and w3.js, and w3.includeHTML()) are not in any way affiliated with the W3 Consortium (one of the two main groups that define the HTML+CSS+DOM standards (the other group being WHATWG).
    – Dai
    Apr 4, 2020 at 12:28
-1

This is usually needed when you want to include header.php or whatever page.

In Javascript it's easy especially if you have HTML page and don't want to use php include function but at all you should write php function and add it as Javascript function in script tag.

In this case you should write it without function followed by name Just. Script rage the function word and start the include header.php i.e convert the php include function to Javascript function in script tag and place all your content in that included file.

-4

showhide.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript">
        function showHide(switchTextDiv, showHideDiv)
        {
          var std = document.getElementById(switchTextDiv);
          var shd = document.getElementById(showHideDiv);
          if (shd.style.display == "block")
          {
            shd.style.display = "none";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Show</span>"; 
          }
          else
          {
            if (shd.innerHTML.length <= 0)
            {
              shd.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"showhide_embedded.html\"></object>";
            }
            shd.style.display = "block";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Hide</span>";
          }
        }
      </script>
    </head>
    <body>
      <a id="switchTextDiv1" href="javascript:showHide('switchTextDiv1', 'showHideDiv1')">
        <span style="display: block; background-color: yellow">Show</span>
      </a>
      <div id="showHideDiv1" style="display: none; width: 100%; height: 300px"></div>
    </body>
</html>

showhide_embedded.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript"> 
        function load()
        {
          var ts = document.getElementById("theString");
          ts.scrollIntoView(true);
        }
      </script>
    </head>
    <body onload="load()">
      <pre>
        some text 1
        some text 2
        some text 3
        some text 4
        some text 5
        <span id="theString" style="background-color: yellow">some text 6 highlight</span>
        some text 7
        some text 8
        some text 9
      </pre>
    </body>
</html>
1
  • 2
    Answering with an answer that doesn't correspond to the question, also its already been answered by the same person who asked it
    – Katler
    Dec 3, 2014 at 14:45
-4

If your html file resides locally then go for iframe instead of the tag. tags do not work cross-browser, and are mostly used for Flash

For ex : <iframe src="home.html" width="100" height="100"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.