Question

我想让我的项目结构更好，更容易管理。我的项目现在只有js和css，没有php。以下是我的项目：

档案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>

档案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>

我可以制作这样的文件

setting.html

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

文件A和B

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

我该怎么做？任何框架或库都可以这样做吗？

Answer 1

您可以通过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>

Answer 2

您可以使用Js。

执行此操作

如下所示。

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

  <body> 
     blah blah
  </body> 
</html>

如何嵌入js和css的html文件

2 个答案: