HTML5公共页面提取作为公用代码的方法

  发布时间:2020-06-30 15:33:44   作者:yunxiang.su   我要评论
这篇文章主要介绍了HTML5公共页面提取作为公用代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在网站制作中有很多部分的代码是相同的,如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公共页面提取为公用代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • HTML5开发动态音频图的实现

    这篇文章主要介绍了HTML5开发动态音频图的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
    2020-07-02
  • HTML5公共页面提取作为公用代码的方法

    这篇文章主要介绍了HTML5公共页面提取作为公用代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2020-06-30
  • HTML5中在title标题标签里设置小图标的方法

    这篇文章主要为大家介绍了HTML5中在title标题标签里设置小图标的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随
    2020-06-23
  • Canvas 文本填充线性渐变的使用详解

    这篇文章主要介绍了Canvas 文本填充线性渐变的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2020-06-22
  • HTML5播放实现rtmp流直播

    这篇文章主要介绍了HTML5播放实现rtmp流直播,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-16
  • HTML5实现应用程序缓存(Application Cache)

    这篇文章主要介绍了HTML5实现应用程序缓存(Application Cache),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编
    2020-06-16
  • html5实现九宫格抽奖可固定抽中某项奖品

    这篇文章主要介绍了html5实现九宫格抽奖可固定抽中某项奖品,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来
    2020-06-15
  • HTML5页面无缝闪开的问题及解决方案

    这篇文章主要介绍了HTML5页面无缝闪开方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-11
  • Html5导航栏吸顶方案原理与对比实现

    这篇文章主要介绍了Html5导航栏吸顶方案原理与对比实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2020-06-10
  • 浅析图片上传及canvas压缩的流程

    这篇文章主要介绍了浅析图片上传及canvas压缩的流程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-10

最新评论