[英]How to embed the html files for js and css
I want to make my project's structure better and easier to manage. 我想使我的项目结构更好,更易于管理。 My project is only js and css now, no php.
我的项目现在只有js和CSS,没有php。 Here is my project before:
这是我之前的项目:
File A 文件A
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="index.css">
<script src="main.js"></script>
</head>
<body>
blah blah blah
</body>
</html>
File B 文件B
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="index.css">
<script src="main.js"></script>
</head>
<body>
hello hello hello
</body>
</html>
Can I make the files like this 我可以制作这样的文件吗
setting.html setting.html
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="index.css">
<script src="main.js"></script>
File A and B 文件A和B
<html>
<head>
embed setting
</head>
<body>
blah blah
</body>
</html>
How can I do this? 我怎样才能做到这一点? Do any frameworks or library do this ?
是否有任何框架或库这样做?
You can try following way by jQuery: 您可以通过jQuery尝试以下方式:
<!DOCTYPE html>
<html lang="en">
<head data-include="settings.html"></head>
<body>
blah blah
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(function(){
$('[data-include]').each(function(){
$(this).load($(this).attr('data-include'));
})
})
</script>
</body>
</html>
settings.html: settings.html:
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="index.css">
<script src="main.js"></script>
You can do this using Js. 您可以使用Js执行此操作。
Like below. 像下面。
<html>
<head id="includedHeader">
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedHeader").load("setting.html");
});
</script>
</head>
<body>
blah blah
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.