Search code examples
javascriptinclude

JQuery .load() function doesn’t work because file loaded contains small JS

Two html files are being included into another html file, following advice from this post: (Include another HTML file in a HTML file). A JavaScript is being used to achieve that, but one of the files loads perfectly and the other doesn't because it contains a small JavaScript. I wonder if there’s a way to fix that without having to use a method different from JavaScript for the includes. Please help me.

I have tested the JS with other includes and it works like a charm. When I remove the small JS from the include it works, but the JS needs to be in the include. Google and StackOverflow don't have a solution to the problem.

This is the include (footer.html) that is being loaded through JS, which doesn't load:

                    <p>
                        Copyright &copy;
                        <script>
                            document.write(new Date().getFullYear());
                        </script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
                    </p>

As you see there's a small JS which prevent's the file from loading.

And this is the html file where the footer.html is being loaded through JS:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>This is a Webpage</title>
    <SCRIPT src="js/jquery-3.2.1.min.js"></SCRIPT>
<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = '/en/inc/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>
</head>
<body>
<div data-include="menu"></div>
<BR><BR><BR>
Content goes here
<BR><BR><BR>
<div data-include="footer"></div>
</body>
</html>

The complete webpage gets blocked. That means you only see the number "2019" instead of the webpage.

Solution

  • The other page will be inserted after the script completes and the document is loaded, so the document.write will replace the current page.

    Don't use document.write - use DOM methods to select and insert text instead, for example:

    <p id="rights"></p>
<script>
  document.querySelector('#rights').innerHTML = `Copyright &copy; ${new Date().getFullYear()}
  All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>`;
</script>

    (if all pages which include this subpage also use jQuery, you can use it instead of document.querySelector)