简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Fragen und Antworten  >  Hauptteil

javascript - Ich würde gerne fragen, wie man alle CSS- und JS-Dateien in eine HTML-Datei importiert, damit andere HTML-Dateien nicht erneut importiert werden müssen?

So wie dies meine common.html ist, müssen keine anderen HTML-Dateien importiert werden. Bitte finden Sie eine Methode. . . . . 

    <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 Tage vor1461

Antworte allen(7)Ich werde antworten

  • 仅有的幸福

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

    可以只引用一个 JS 文件，然后把要加载的 CSS 做动态的加载。

    // 动态加载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");

    Antwort
    0
  • 曾经蜡笔没有小新

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

    如果只用html是没有办法的，可以借助template模板引擎中的模板继承功能实现，具有该功能的库比较多，可以尝试用jade，现在好像改名叫pug了。

    模板继承

    Antwort
    0
  • 三叔

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

    用一些做单页面应用的框架吧

    Antwort
    0
  • PHP中文网

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

    你想要的就是SPA，同一个框框，只变换框框中安插那些组件

    Antwort
    0
  • 代言

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

    能是能，看在什么场景了，不同的场景解决方案也是千差万别

    Antwort
    0
  • 曾经蜡笔没有小新

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

    下面一个简单的例子，仅供参考

    <!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>

    Antwort
    0
  • PHP中文网

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

    建议使用打包工具,前短时间弄了个 脚手架，里面有这个功能，可以试试。https://github.com/JakeLaoyu/...

    Antwort
    0
  • StornierenAntwort