HTML5公共页面如何提取作为公用代码？

在网站制作中有很多部分的代码是相同的，如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文件才能成功，不能直接双击打开

打开后浏览器的路径应该是https://127.0.0.1:8020/index.html，

而不是file:///G:/html/index.html这样的路径，否则在大部分的浏览器上都无法使用。

再此建议使用HBuilder这款编辑器，在运行时会创建服务器环境，并且在局域网中在别的手机或电脑上预览。

在网站制作中有很多部分的代码是相同的，如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文件才能成功，不能直接双击打开

打开后浏览器的路径应该是https://127.0.0.1:8020/index.html，

而不是file:///G:/html/index.html这样的路径，否则在大部分的浏览器上都无法使用。

再此建议使用HBuilder这款编辑器，在运行时会创建服务器环境，并且在局域网中在别的手机或电脑上预览。

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！