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 相关文章推荐
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
HTML5基础学习之文本标签控制
Mar 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简单定时执行任务的实现方法
2015/02/23 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
PHP实现倒计时功能
2020/11/16 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
JS实现购物车特效
2017/02/02 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python指定写入文件时的编码格式方法
2018/06/07 Python
Python3实现转换Image图片格式
2018/06/21 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
往来会计岗位职责
2013/12/19 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
音乐教师求职信
2014/06/28 职场文书
检察院起诉意见书
2015/05/20 职场文书
投诉信范文
2015/07/02 职场文书
回复函格式及范文
2015/07/14 职场文书