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实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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 memcache扩展的三种安装方法
2009/04/26 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
JS实现图片切换特效
2019/12/23 Javascript
python访问系统环境变量的方法
2015/04/29 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
农业大学毕业生的个人自我评价
2013/10/11 职场文书
会议活动邀请函
2014/01/27 职场文书
聚美优品励志广告词
2014/03/14 职场文书
公证委托书
2014/08/01 职场文书
企业领导对照检查材料
2014/08/20 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
2015年宣传工作总结
2015/04/08 职场文书
干部培训简讯
2015/07/20 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Django框架中模型的用法
2022/06/10 Python