Load html content to html page

Question

Before someone mark this question as duplicate, I did a lot of investigation on this matter and I couldn't found the solution to my problem yet. So, I have these header.html and footer.html files, and I want to load their contents into a new html page (trying to not repeat code). I Know that I can do these in php in a very easy way, but I'm trying to do it with JQuery (just started to dig into it). This is my code so far:

<!DOCTYPE html>
<html>

    <head>
            <link rel="stylesheet" type="text/css" href="./style.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

             <script> 
                $(function(){
                    $('#filename').load("footer.html");
                });
            </script>       
    </head>

    <body>

        <div id="filename"></div>

    </body>
</html>

I am getting the following error:

jquery.min.js:5 XMLHttpRequest cannot load file:///C:/Users/...../footer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.send @ jquery.min.js:5ajax @ jquery.min.js:5b.fn.load @ jquery.min.js:5(anonymous function) @ index.html:10c @ jquery.min.js:3fireWith @ jquery.min.js:3ready @ jquery.min.js:3H @ jquery.min.js:3

You really shouldn't be loading headers and footers this way; It's only increasing the number of requests your page has to make. What you should have is the header and footer in a "base" page which imports the content pages. — Soviut, Sep 11 '16 at 02:04
What's the exact cross-origin error you're getting? Can you show us the response headers for the `footer.html` request? — Brad, Sep 11 '16 at 02:07
Depending on the structure of your site, if you want static pages but built in a way where you use a common template, you might consider a bundler like Webpack. It's a way to crank out static HTML with the full page (so you can easily host on any CDN) but by only having to maintain a common template. — Brad, Sep 11 '16 at 02:09

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

You can't make AJAX requests to your local drive... there's no HTTP server, therefore no HTTP request can be made. The cross-origin error you're getting is slightly misleading.

Put your page on a server.

See also: https://stackoverflow.com/a/20578692/362536

edited May 23 '17 at 12:16

Community

1
1

answered Sep 11 '16 at 02:15

Brad

159,648
54
349
530

score -1 · Answer 2 · answered Sep 11 '16 at 02:03

-1

The reason why your code was not working is because you've placed the Jquery before the element has been loaded into the site causing it to not work.

You could use something like this to fix it:

$( document ).ready(function() {
    $('#filename').load("footer.html");
});

This will wait until the page's elements have already been loaded into the page and then it will load the footer.html content into the element with the ID of filename.

answered Sep 11 '16 at 02:03

FluxCoder

1,266
11
22

2

This is wrong. The code in the question already does this. – Brad Sep 11 '16 at 02:06

Load html content to html page

2 Answers2