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

标签: HBuilder 前端 提取公用代码 $().load()
38人阅读 评论(0) 收藏 举报
分类:

在网站制作中有很多部分的代码是相同的,如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这样的路径,否则在大部分的浏览器上都无法使用。

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


查看评论

项目实战持续集成之代码扫描

主要讲解持续集成的代码扫描部分,把项目代码中的不合理部分扫描出来,帮助程序开发人员提高代码质量。在项目管理当中代码的质量非常重要。
  • 2017年02月24日 09:55

html如何公用布局模块

如何在HTML不同的页面中,共用头部与尾部? 一、asp语言和PHP语言 首先制作一个头部文件head.asp,或者一个底部文件foot.asp。如主页是index.asp,调...
  • xiaozhenzhenlaopo
  • xiaozhenzhenlaopo
  • 2017-11-07 15:59:18
  • 547

引入公共html页面的几种方法

很多人问有什么方法不用模板引擎在普通静态html页面导入公共的html页面,比如header.html, footer.html, 在这里我是这样做的,自己写了一个include.js inc...
  • zhangwenwu2
  • zhangwenwu2
  • 2017-02-27 18:02:26
  • 8717

html静态页面引入公共html页面

很多人问有什么方法不用模板引擎在普通静态html页面导入公共的html页面,比如header.html, footer.html, 在这里我是这样做的,自己写了一个include.js inclu...
  • u010957390
  • u010957390
  • 2016-01-14 10:19:54
  • 39123

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

在网站制作中有很多部分的代码是相同的,如footer部分,可以把这段代码提取出来,在别的页面调用。index.html&amp;lt;!-- 底部加载外部文件 --&amp;gt; &amp;...
  • s_666666
  • s_666666
  • 2018-04-15 18:49:26
  • 38

html中有一段公用的代码。在多个页面用到。是否可以将他做成公用代码?怎么调用?

查看收藏夹
  • waj89757
  • waj89757
  • 2013-01-13 22:01:37
  • 715

html页面显示html代码

http://www.myexception.cn/HTML-CSS/858757.html在html页面中显示html代码,可以用textarea(效果不好看)、xmp(已经被取消了)转换后可以用s...
  • wanglj7525
  • wanglj7525
  • 2015-02-02 15:09:12
  • 3071

【html】【一个简单的用户登录页面代码】

结果代码&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;...
  • qq_27501261
  • qq_27501261
  • 2018-03-15 15:52:49
  • 259

html代码打包封装成APP教程

lbuilder是一个在线打包网站的平台,可以非常方便的把一个手机网站做成APP,也可以直接打包h5代码,免费使用!下面介绍如何使用lbuilder打包html代码分七步进行1、注册lbuilder平...
  • xxw888
  • xxw888
  • 2018-04-09 15:17:38
  • 161

在HTML中的静态包含(HTML中提取公共代码HTML)

先拿我这个目录来说:要从user_list.html中提取出公共代码header.html。 但是问题是:要如何在user_list.html中引入header.html文件。 ...
  • feipo_zhm
  • feipo_zhm
  • 2017-10-21 10:51:36
  • 175
    个人资料
    等级:
    访问量: 39
    积分: 10
    排名: 215万+
    文章分类
    文章存档