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 Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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
多文件上载系统完整版
2006/10/09 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
浅析PHP绘图技术
2013/07/03 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python struct.unpack
2008/09/06 Python
Python用GET方法上传文件
2015/03/10 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python文件去除注释的方法
2015/05/25 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
python实现自动解数独小程序
2019/01/21 Python
Python创建数字列表的示例
2019/11/28 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
软件部经理岗位职责范本
2014/02/25 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
《穷人》教学反思
2016/02/19 职场文书