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中Media Queries的相关使用
Jul 17 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
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文件上传的简单实例
2013/10/19 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
jquery 笔记 事件
2011/11/02 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
探讨Vue.js的组件和模板
2017/10/27 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
JSON Web Tokens的实现原理
2017/04/02 Python
python 连接sqlite及简单操作
2017/06/30 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
秘书行业自我鉴定范文
2013/12/30 职场文书
销售主管竞聘书
2014/03/31 职场文书
酒店端午节活动方案
2014/08/26 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
个人售房合同协议书
2016/03/21 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
golang 语言中错误处理机制
2021/08/30 Golang
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL