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='http://www.gepszalag.com/wenda/assets/css/bootstrap.min.css' rel='stylesheet' /> <link href='http://www.gepszalag.com/wenda/4798.html' rel='stylesheet' /> <link href='http://www.gepszalag.com/wenda/assets/css/font-awesome.min.css' rel='stylesheet' /> <link href='http://www.gepszalag.com/wenda/assets/css/weather-icons.min.css' rel='stylesheet' /> <!--Fonts--> <link href='http://www.gepszalag.com/wenda/assets/css/fonts-google.css' type='text/css' rel='stylesheet'><!--Beyond styles--> <link href='http://www.gepszalag.com/wenda/assets/css/beyond.min.css' rel='stylesheet' type='text/css' /> <link href='http://www.gepszalag.com/wenda/assets/css/demo.min.css' rel='stylesheet' /> <link href='http://www.gepszalag.com/wenda/assets/css/typicons.min.css' rel='stylesheet' /> <link href='http://www.gepszalag.com/wenda/assets/css/animate.min.css' rel='stylesheet' /> <link href='http://www.gepszalag.com/wenda/4798.html' rel='stylesheet' type='text/css' /><!--Page Related styles--> <link href='http://www.gepszalag.com/wenda/assets/css/dataTables.bootstrap.css' rel='stylesheet' /> <!--Skin Script: Place this script in head to load scripts for skins and rtl support--> <script src='http://www.gepszalag.com/wenda/assets/js/skins.min.js'></script>
問題解答
回答1：可以只引用一個 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');回答2：
如果只用html是沒有辦法的，可以借助template模板引擎中的模板繼承功能實現，具有該功能的庫比較多，可以嘗試用jade，現在好像改名叫pug了。
模板繼承
回答3：用一些做單頁面應用的框架吧
回答4：你想要的就是SPA，同一個框框，只變換框框中安插那些組件
回答5：能是能，看在什么場景了，不同的場景解決方案也是千差萬別
回答6：下面一個簡單的例子，僅供參考
<!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>回答7：
建議使用打包工具,前短時間弄了個 腳手架，里面有這個功能，可以試試。https://github.com/JakeLaoyu/...
網公網安備