搜尋

首頁  >  問答  >  主體

javascript - 想問下怎麼將一個HTML檔案裡把所有的css、js檔案引入後,其他的HTML檔案不需要再引入了?

就好比這是我的common.html,然後其他的HTML檔案就不需要在進行引入了,求方法。 。 。 。 。

    <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>
曾经蜡笔没有小新曾经蜡笔没有小新2750 天前1524

全部回覆(7)我來回復

  • 仅有的幸福

    仅有的幸福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");

    回覆
    0
  • 曾经蜡笔没有小新

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

    如果只用html是沒有辦法的,可以藉助template模板引擎中的模板繼承功能實現,具有該功能的庫比較多,可以嘗試用jade,現在好像改名叫pug了。

    模板繼承

    回覆
    0
  • 三叔

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

    用一些做單頁應用的框架吧

    回覆
    0
  • PHP中文网

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

    你想要的就是SPA,同一個框框,只變換框框中安插那些組件

    回覆
    0
  • 代言

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

    能是能,看在什麼場景了,不同的場景解決方案也是千差萬別

    回覆
    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>
    

    回覆
    0
  • PHP中文网

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

    建議使用打包工具,前短時間弄了個 腳手架,裡面有這個功能,可以試試。 https://github.com/JakeLaoyu/...

    回覆
    0
  • 取消回覆