HTML 頁面內如何引入抽取出來的HTML JS CSS
阿新 • • 發佈：2018-11-05
- 在頁面引入頭部JS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" charset="UTF-8" src="js/header_leadin_core.js"></script>
<title>首頁</title>
</head>
<body>
</body>
</html>
- header_leadin_core.js檔案
/** * 引用JS和CSS標頭檔案 */ var rootPath = getRootPath(); //專案路徑 /** * 動態載入CSS和JS檔案 */ var dynamicLoading = { meta : function(){ document.write('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'); }, css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required!'); } document.write('<link rel="stylesheet" type="text/css" href="' + path + '">'); }, js: function(path, charset){ if(!path || path.length === 0){ throw new Error('argument "path" is required!'); } document.write('<script charset="' + (charset ? charset : "utf-8") + '" src="' + path + '"></script>'); } }; /** * 取得專案路徑 * @author wul */ function getRootPath() { //取得當前URL var path = window.document.location.href; //取得主機地址後的目錄 var pathName = window.document.location.pathname; var post = path.indexOf(pathName); //取得主機地址 var hostPath = path.substring(0, post); //取得專案名 var name = pathName.substring(0, pathName.substr(1).indexOf("/") + 1); return hostPath + name + "/"; } //動態生成meta dynamicLoading.meta(); //動態載入專案 JS檔案 //底部 結束 dynamicLoading.js(rootPath + "js/.....js", "utf-8"); dynamicLoading.js(rootPath + "js/.....js", "utf-8"); dynamicLoading.js(rootPath + "js/.....js", "utf-8"); dynamicLoading.js(rootPath + "js/.....js", "utf-8"); dynamicLoading.js(rootPath + "js/.....js", "utf-8"); //底部模板呼叫 結束 //動態載入專案 CSS檔案 dynamicLoading.css(rootPath + "css/.....css"); dynamicLoading.css(rootPath + "css/.....css"); dynamicLoading.css(rootPath + "css/.....css"); //載入 html檔案 $(function(){ $(".container").append('<div id="header"></div>'); $("#header").load(getRootPath() + "header.html"); });
- header.html檔案
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁</title> </head> <body> 這是要引入的html </body> </html>