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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
jquery操作select option 的代码小结
2011/06/21 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
3分钟学会一个Python小技巧
2018/11/23 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
应用数学自荐书范文
2013/11/24 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
初婚未育证明样本
2015/06/18 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android