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 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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 print EOF实现方法
2009/05/21 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
使javascript也能包含文件
2006/10/26 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
js实现移动端轮播图
2020/12/21 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
python tkinter窗口最大化的实现
2019/07/15 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
python中如何对多变量连续赋值
2021/06/03 Python
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL