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 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 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二维数组的去重问题解析
2011/07/17 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Python中for循环详解
2014/01/17 Python
python去除扩展名的实例讲解
2018/04/23 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
django 模版关闭转义方式
2020/05/14 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
python实现视频压缩功能
2020/12/18 Python
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
营业经理岗位职责
2013/11/10 职场文书
幼儿园家长评语
2014/02/10 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS