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 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
html5清空画布方法(三种)
Oct 16 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
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
Python实现的检测网站挂马程序
2014/11/30 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
python如何建立全零数组
2020/07/19 Python
关于Python错误重试方法总结
2021/01/03 Python
What is EJB
2016/07/22 面试题
秦兵马俑教学反思
2014/02/07 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
质量整改通知单
2015/04/21 职场文书
科技活动总结范文
2015/05/11 职场文书
五一放假通知怎么写
2015/08/18 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
Python集合set()使用的方法详解
2022/03/18 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android