recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Je voudrais demander comment importer tous les fichiers CSS et JS dans un fichier HTML afin que d'autres fichiers HTML n'aient pas besoin d'être réimportés?

Tout comme il s'agit de mon fichier common.html, les autres fichiers HTML n'ont pas besoin d'être importés. Veuillez trouver une méthode. . . . . 

    <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>
曾经蜡笔没有小新曾经蜡笔没有小新2712 Il y a quelques jours1491

répondre à tous(7)je répondrai

  • 仅有的幸福

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

    Vous pouvez uniquement référencer un fichier JS, puis charger dynamiquement le CSS à charger. 

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

    répondre
    0
  • 曾经蜡笔没有小新

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

    S'il n'y a pas de solution utilisant uniquement HTML, vous pouvez utiliser la fonction d'héritage de modèle dans le moteur de modèle de modèle. Il existe de nombreuses bibliothèques avec cette fonction. Vous pouvez essayer d'utiliser jade, qui semble avoir été renommé pug.

    Héritage de modèles

    répondre
    0
  • 三叔

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

    Utilisez un framework pour les applications d'une seule page

    répondre
    0
  • PHP中文网

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

    Ce que vous voulez c'est SPA, le même cadre, il suffit de changer les composants placés dans le cadre

    répondre
    0
  • 代言

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

    Oui, cela dépend du scénario. Les solutions pour différents scénarios sont également très différentes

    répondre
    0
  • 曾经蜡笔没有小新

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

    Ce qui suit est un exemple simple à titre de référence uniquement

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

    répondre
    0
  • PHP中文网

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

    Il est recommandé d'utiliser un outil d'emballage. J'ai construit un échafaudage il n'y a pas longtemps et il a cette fonction. https://github.com/JakeLaoyu/...

    répondre
    0
  • Annulerrépondre