html中的公共部分怎么处理
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中的公共部分怎么处理相关的知识，希望对你有一定的参考价值。
可以单独写成一块html，用ajax来异步加载，或者用iframe 内嵌框架加载。每次公用部分只需要引用就行 参考技术A在网站制作中有很多部分的代码是相同的，如footer部分，可以把这段代码提取出来，在别的页面调用。
index.html
<!-- 底部加载外部文件 --><footer class="footer">
</footer>
<script>
$('.footer').load('conment/foot.html',function(responseTxt,statusTxt,xhr)
console.log('responseTxt,statusTxt,xhr')
// console.log(responseTxt)
// console.log(statusTxt)
// console.log(xhr)
)
</script>
foot.html
<html lang="en"><head>
<title>Document</title>
<link rel="stylesheet" href="css/foot.css"></link>
</head>
<body>
...
</body>
</html>
重点：
$('.footer').load()调用时必须在服务器环境中打开HTML文件才能成功，不能直接双击打开
打开后浏览器的路径应该是http://127.0.0.1:8020/index.html，
而不是file:///G:/html/index.html这样的路径，否则在大部分的浏览器上都无法使用。
网站公共部分的复用
一个网站的公共部分因为是一样的，可以通过公共部分的复用来减少代码的重复，同时也利于代码的后期维护。
关于公共部分复用的方法有很多，这里提供一些方法（持续更新）
利用ajax请求组件（单个HTML）实现简单的复用
var utils = { render(selector, url) { bodyContent = $.ajax({ url: url, type: "GET", dataType: "html", async: false, success: function (data) { selector.html(data); } }) }, }
封装一个工具类，然后再需要相应的共享页面时，通过调用util.render方法实现复用
utils.render($(‘#myFooter‘), ‘pages/component/footer.html‘)
以上是关于html中的公共部分怎么处理的主要内容，如果未能解决你的问题，请参考以下文章