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


Posted in HTML / CSS onJune 30, 2020

在网站制作中有很多部分的代码是相同的,如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这款编辑器,在运行时会创建服务器环境,并且在局域网中在别的手机或电脑上预览。

到此这篇关于HTML5公共页面提取作为公用代码的方法的文章就介绍到这了,更多相关HTML5公共页面提取为公用代码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
HTML中的表单元素介绍
Feb 28 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 #HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 #HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 #HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 #HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 #HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 #HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 #HTML / CSS
You might like
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP教程 变量定义
2009/10/23 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
几种响应式文字详解
2017/05/19 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
python中解析json格式文件的方法示例
2017/05/03 Python
pandas.cut具体使用总结
2019/06/24 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
django教程如何自学
2020/07/31 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
校园标语大全
2014/06/19 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
超市创业计划书
2014/09/15 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
公司员工体检通知
2015/04/21 职场文书
python中pycryto实现数据加密
2022/04/29 Python