1

I want to make my project's structure better and easier to manage. My project is only js and css now, no php. Here is my project before:

File A

<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery.min.js"></script>
        <link rel="stylesheet" href="index.css">
        <script src="main.js"></script>
    </head>
    <body>
    blah blah blah
    </body>
</html>

File B

<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery.min.js"></script>
        <link rel="stylesheet" href="index.css">
        <script src="main.js"></script>
    </head>
    <body>
     hello hello hello
    </body>
</html>

Can I make the files like this

setting.html

<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="index.css">
<script src="main.js"></script>

File A and B

<html>
    <head>
        embed setting
    </head>
    <body>
        blah blah
    </body>
</html>

How can I do this? Do any frameworks or library do this ?

Korn1699
  • 67
  • 1
  • 8
Pete
  • 148
  • 8
  • Duplication. Importing html files. [How to import Html file into Html using JQuery](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) – Kamil Feb 20 '18 at 03:28
  • Possible duplicate of [Split html source into multiple files](https://stackoverflow.com/questions/43038935/split-html-source-into-multiple-files) – Vivek Feb 20 '18 at 03:30
  • Checkout Nunjucks or Pug for templating tools. – Seno Feb 20 '18 at 03:33
  • 1
    This is a **very** broad topic. There are many ways of doing this. Some good some bad. Server-side is often the best option but without know more details it is hard to provide any solid advice. – Jon P Feb 20 '18 at 04:18

2 Answers2

0

You can try following way by jQuery:

<!DOCTYPE html>
<html lang="en">
<head data-include="settings.html"></head>

<body>
    blah blah

    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        $(function(){
            $('[data-include]').each(function(){
                $(this).load($(this).attr('data-include'));
            })
        })
    </script>
 </body>
 </html>

settings.html:

<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="index.css">
<script src="main.js"></script>
Hanif
  • 3,469
  • 1
  • 9
  • 15
  • Link only answers are discouraged: https://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers. As a minimum the relevant part of the article should be summarised and applied to the question as asked. – Jon P Feb 20 '18 at 07:47
0

You can do this using Js.

Like below.

<html> 
  <head id="includedHeader"> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedHeader").load("setting.html"); 
    });
    </script> 
  </head> 

  <body> 
     blah blah
  </body> 
</html>
Pravin Vavadiya
  • 2,996
  • 1
  • 13
  • 32