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的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 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
初探PHP5
2006/10/09 PHP
php下MYSQL limit的优化
2008/01/10 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python实现高效求解素数代码实例
2015/06/30 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
庆祝儿童节标语
2014/10/09 职场文书
党员民主评议个人总结
2014/10/20 职场文书
党员公开承诺书2016
2016/03/24 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android