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样式linear-gradient的使用实例
Jan 16 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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入门小知识
2008/03/24 PHP
php2html php生成静态页函数
2008/12/08 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
第四章 php数学运算
2011/12/30 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
python实现图像识别功能
2018/01/29 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
数学系个人求职信范文
2014/01/30 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
城管大队整治方案
2014/05/06 职场文书
信访工作经验交流材料
2014/05/23 职场文书
测绘工程专业求职信
2014/07/15 职场文书
银行给客户的感谢信
2015/01/23 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
收银员岗位职责范本
2015/04/07 职场文书
学校食堂管理制度
2015/08/04 职场文书