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中的clip-path使用攻略
Aug 03 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
node的process以及child_process模块学习笔记
2018/03/06 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Python用户自定义异常的实现
2020/12/25 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
文秘专业大学生求职信
2013/11/10 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
作弊检讨书范文
2015/05/06 职场文书
黄埔军校观后感
2015/06/10 职场文书
安全生产培训心得体会
2016/01/18 职场文书
python如何在word中存储本地图片
2021/04/07 Python
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技