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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 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判断文件夹是否存在不存在则创建
2015/04/09 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
Python中__call__用法实例
2014/08/29 Python
浅谈Python中数据解析
2015/05/05 Python
Python实现大文件排序的方法
2015/07/10 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Numpy 多维数据数组的实现
2020/06/18 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
公司接待方案
2014/03/08 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
商铺租赁意向书
2014/04/01 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
体育比赛口号
2014/06/09 职场文书
525心理活动总结
2014/07/04 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android