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 相关文章推荐
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 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 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
解析vue中的$mount
2017/12/21 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
OpenCV 模板匹配
2019/07/10 Python
Python实现最常见加密方式详解
2019/07/13 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
np.random.seed() 的使用详解
2020/01/14 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
赡养老人协议书
2014/04/21 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
专项资金申请报告
2015/05/15 职场文书
订货会主持词
2015/07/01 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL