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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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高级OOP技术演示
2009/08/27 PHP
php中session与cookie的比较
2015/01/27 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python配置文件写入过程详解
2019/10/19 Python
python的range和linspace使用详解
2019/11/27 Python
Python 音频生成器的实现示例
2019/12/24 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
Shell编程面试题
2016/05/29 面试题
记帐员岗位责任制
2014/02/08 职场文书
单位授权委托书范文
2014/08/02 职场文书
奖学金感谢信
2015/01/21 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL