javascript - Saya ingin bertanya bagaimana untuk mengimport semua fail css dan js ke dalam fail HTML supaya fail HTML lain tidak perlu diimport lagi?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-06-30 09:56:18
0
7
1506

Sama seperti ini adalah common.html saya, maka fail HTML lain tidak perlu diimport. . . . .

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

membalas semua(7)
仅有的幸福

Anda hanya boleh merujuk fail JS, dan kemudian memuatkan CSS untuk dimuatkan secara dinamik.

// 动态加载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");
曾经蜡笔没有小新

Jika tiada penyelesaian hanya menggunakan HTML, anda boleh menggunakan fungsi pewarisan templat dalam enjin templat templat Terdapat banyak perpustakaan dengan fungsi ini Anda boleh cuba menggunakan jed, yang nampaknya telah dinamakan semula sebagai pug.

Templat warisan

三叔

Gunakan beberapa rangka kerja untuk aplikasi satu halaman

洪涛

Apa yang anda mahukan ialah SPA, bingkai yang sama, cuma tukar komponen yang diletakkan dalam bingkai

代言

Ya, ia bergantung pada senario Penyelesaian untuk senario yang berbeza juga sangat berbeza

曾经蜡笔没有小新

Berikut adalah contoh mudah untuk rujukan sahaja

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

Adalah disyorkan untuk menggunakan alat pembungkusan Saya membina perancah tidak lama dahulu dan ia mempunyai fungsi ini. https://github.com/JakeLaoyu/...

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan