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强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 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使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python实现log日志的示例代码
2018/04/28 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
学习标兵获奖感言
2014/02/20 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
任长霞观后感
2015/06/16 职场文书
新教师教学工作总结
2015/08/14 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL