jquery实现静态页面include

最新推荐文章于 2021-08-05 20:33:53 发布

weixin_33893473

最新推荐文章于 2021-08-05 20:33:53 发布

阅读量694

点赞数

文章标签： javascript php ViewUI

原文链接：https://segmentfault.com/a/1190000013254088

版权

最近在写一套前端页面，发现每个页面都复制一遍公共头、尾，十分不方便。于是就想能否也像PHP模板引擎一样，使用include引入公共文件，这便是接下来这段代码的意义。
我们先来总结一下需求：

1.可以像使用函数一样来使用include.
2.可以在页面中任何地方使用，在哪调用就文件插入到页面中哪个位置。
3.可以加载任意的静态文件，也就是说我们希望可以将要加载的文件名称传给这个函数

接下来，我们来说下每条需求对应的解决思路：

1.如何像函数一样来使用呢？
    1> 写个公共函数，每个页面都加上。
    2> 对于jquery来说，我们可以写成个插件。
    在这里呢，我们选择了第2种，原因你懂的……
2.对于插入位置，这个应该是最不好办的了，你可能用说有啥不好办的，弄个div，放里边呗！
  但是，为了用这个函数我们需要写个script标签，如果再用个div占位会非常乱。
  于是我们想，如果能用script定位就好了。能吗？答案当然是肯定的。
3.至于加载任意文件，传个参数就好了。

最后，我们把写好的插件代码放上，使用前一定要先引入jquery.

JS -- jquery.include.js

jQuery.fn.extend({
    include: function (path) {
        var _this = $(this);
        
        $.get(path, function (html) {
            _this.replaceWith(html);
        });

        return 0;
    }
});

HTML -- index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.incloud.js"></script>
</head>
<body>

<script type="text/javascript" id="Header">
    $("#Header").include("inc_header.html");
</script>


</body>
</html>

weixin_33893473

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现静态页面include

最近在写一套前端页面，发现每个页面都复制一遍公共头、尾，十分不方便。于是就想能否也像PHP模板引擎一样，使用include引入公共文件，这便是接下来这段代码的意义。我们先来总结一下需求：1.可以像使用函数一样来使用include.2.可以在页面中任何地方使用，在哪调用就文件插入到页面中哪个位置。3.可以加载任意的静态文件，也就是说我...
复制链接

扫一扫