简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

javascript - I would like to ask how to import all css and js files into an HTML file so that other HTML files do not need to be imported again?

Just like this is my common.html, then other HTML files do not need to be imported. Please find a method. . . . . 

    <meta name="description" content="Dashboard" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--Basic Styles-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link id="bootstrap-rtl-link" href="" rel="stylesheet" />
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="assets/css/weather-icons.min.css" rel="stylesheet" />

    <!--Fonts-->
    <link href="assets/css/fonts-google.css" type="text/css" rel="stylesheet">
    
    <!--Beyond styles-->
    <link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/demo.min.css" rel="stylesheet" />
    <link href="assets/css/typicons.min.css" rel="stylesheet" />
    <link href="assets/css/animate.min.css" rel="stylesheet" />
    <link id="skin-link" href="" rel="stylesheet" type="text/css" />
    
    <!--Page Related styles-->
    <link href="assets/css/dataTables.bootstrap.css" rel="stylesheet" />

    <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
    <script src="assets/js/skins.min.js"></script>
曾经蜡笔没有小新曾经蜡笔没有小新2668 days ago1462

reply all(7)I'll reply

  • 仅有的幸福

    仅有的幸福2017-06-30 09:58:18

    You can only reference a JS file, and then dynamically load the CSS to be loaded. 

    // 动态加载js脚本文件
function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}
// 测试
loadCss("assets/css/dataTables.bootstrap.css");

    reply
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-06-30 09:58:18

    If there is no solution using only HTML, you can use the template inheritance function in the template template engine. There are many libraries with this function. You can try using jade, which seems to have been renamed pug now.

    Template inheritance

    reply
    0
  • 三叔

    三叔2017-06-30 09:58:18

    Use some framework for single-page applications

    reply
    0
  • PHP中文网

    PHP中文网2017-06-30 09:58:18

    What you want is SPA, the same frame, just change the components placed in the frame

    reply
    0
  • 代言

    代言2017-06-30 09:58:18

    Yes, it depends on the scenario. The solutions for different scenarios are also very different

    reply
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-06-30 09:58:18

    The following is a simple example for reference only

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>测试页面</title>
</head>

<body>
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
  var headHTML = $('head').html();//保存原来的head内容
  $("head").load("common.html",function(){
    $(this).prepend(headHTML); //common.html载入到head后将原来head内容添加回去
  });
  </script>
</body>

</html>

    reply
    0
  • PHP中文网

    PHP中文网2017-06-30 09:58:18

    It is recommended to use a packaging tool. I built a scaffolding not long ago and it has this function. You can try it. https://github.com/JakeLaoyu/...

    reply
    0
  • Cancelreply