javascript - 想問(wèn)下怎樣將一個(gè)HTML文件里把所有的css、js文件引入后，其他的HTML文件不需要再引入了？
問(wèn)題描述
就好比這是我的common.html,然后其他的HTML文件就不需要在進(jìn)行引入了，求方法。。。。。
<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.cgvv.com.cn/wenda/assets/css/bootstrap.min.css' rel='stylesheet' /> <link href='http://www.cgvv.com.cn/wenda/4798.html' rel='stylesheet' /> <link href='http://www.cgvv.com.cn/wenda/assets/css/font-awesome.min.css' rel='stylesheet' /> <link href='http://www.cgvv.com.cn/wenda/assets/css/weather-icons.min.css' rel='stylesheet' /> <!--Fonts--> <link href='http://www.cgvv.com.cn/wenda/assets/css/fonts-google.css' type='text/css' rel='stylesheet'><!--Beyond styles--> <link href='http://www.cgvv.com.cn/wenda/assets/css/beyond.min.css' rel='stylesheet' type='text/css' /> <link href='http://www.cgvv.com.cn/wenda/assets/css/demo.min.css' rel='stylesheet' /> <link href='http://www.cgvv.com.cn/wenda/assets/css/typicons.min.css' rel='stylesheet' /> <link href='http://www.cgvv.com.cn/wenda/assets/css/animate.min.css' rel='stylesheet' /> <link href='http://www.cgvv.com.cn/wenda/4798.html' rel='stylesheet' type='text/css' /><!--Page Related styles--> <link href='http://www.cgvv.com.cn/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.cgvv.com.cn/wenda/assets/js/skins.min.js'></script>
問(wèn)題解答
回答1：可以只引用一個(gè) JS 文件，然后把要加載的 CSS 做動(dòng)態(tài)的加載。
// 動(dòng)態(tài)加載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);}// 測(cè)試loadCss('assets/css/dataTables.bootstrap.css');回答2：
如果只用html是沒(méi)有辦法的，可以借助template模板引擎中的模板繼承功能實(shí)現(xiàn)，具有該功能的庫(kù)比較多，可以嘗試用jade，現(xiàn)在好像改名叫pug了。
模板繼承
回答3：用一些做單頁(yè)面應(yīng)用的框架吧
回答4：你想要的就是SPA，同一個(gè)框框，只變換框框中安插那些組件
回答5：能是能，看在什么場(chǎng)景了，不同的場(chǎng)景解決方案也是千差萬(wàn)別
回答6：下面一個(gè)簡(jiǎn)單的例子，僅供參考
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>測(cè)試頁(yè)面</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();//保存原來(lái)的head內(nèi)容 $('head').load('common.html',function(){ $(this).prepend(headHTML); //common.html載入到head后將原來(lái)head內(nèi)容添加回去 }); </script></body></html>回答7：
建議使用打包工具,前短時(shí)間弄了個(gè) 腳手架，里面有這個(gè)功能，可以試試。https://github.com/JakeLaoyu/...
網(wǎng)公網(wǎng)安備