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='https://www.haobala.com/wenda/assets/css/bootstrap.min.css' rel='stylesheet' /> <link href='https://www.haobala.com/wenda/4798.html' rel='stylesheet' /> <link href='https://www.haobala.com/wenda/assets/css/font-awesome.min.css' rel='stylesheet' /> <link href='https://www.haobala.com/wenda/assets/css/weather-icons.min.css' rel='stylesheet' /> <!--Fonts--> <link href='https://www.haobala.com/wenda/assets/css/fonts-google.css' type='text/css' rel='stylesheet'><!--Beyond styles--> <link href='https://www.haobala.com/wenda/assets/css/beyond.min.css' rel='stylesheet' type='text/css' /> <link href='https://www.haobala.com/wenda/assets/css/demo.min.css' rel='stylesheet' /> <link href='https://www.haobala.com/wenda/assets/css/typicons.min.css' rel='stylesheet' /> <link href='https://www.haobala.com/wenda/assets/css/animate.min.css' rel='stylesheet' /> <link href='https://www.haobala.com/wenda/4798.html' rel='stylesheet' type='text/css' /><!--Page Related styles--> <link href='https://www.haobala.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='https://www.haobala.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/...
网公网安备