如何为js和CSS嵌入html文件

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 个解决方案

解决方案1
0 2018-02-20 07:39:53

解决方案2
0 2018-02-20 08:26:32

如何为js和CSS嵌入html文件

问题描述

2 个解决方案

解决方案1 0 2018-02-20 07:39:53

解决方案2 0 2018-02-20 08:26:32

解决方案1
0 2018-02-20 07:39:53

解决方案2
0 2018-02-20 08:26:32