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实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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日期处理函数 整型日期格式
2011/01/12 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
Vue实现购物车功能
2017/04/27 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
python如何构建mock接口服务
2021/01/28 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
荷叶圆圆教学反思
2014/02/01 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
三十年同学聚会感言
2015/07/30 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书