JS统计页面访问次数并传递可选参数

  • Post author:
  • Post category:其他


主题 概要
JS 用JS统计网站页面的访问次数,并传递可选参数

编辑

时间
新建 20171218

序号

参考资料
1

网站有些页面需要统计用户的访问次数,下面是一个简单的JS,引用在需要统计的页面类。

网站上有个Handler处理提交来的信息,只是简单的入库处理,用户每访问或者刷新一次,就有一条记录插入库中。

JS如下:

/** 
 * 统计页面访问次数
 * 依赖于jquery
 * 使用方法:
 * 在页面添加引用 <script src="../../Scripts/PageVisit.js" type="text/javascript"></script>
 * 支持两个参数:  rootUrl:门户服务器地址,默认为空串
 *               visiter:访客名,默认为'anonymous'
 * 门户页面引用可以不传递参数,直接使用相对路径
 * 传递参数方法:
 *      <script src="../../Scripts/PageVisit.js?rootUrl=http://127.0.0.1:28099&visiter=test" type="text/javascript"></script>
 * 注意:rootUrl最后不应有'/'
*/

(function (root, factory) {
    //--root is window
    factory(root.jQuery, root);

})(this, function ($, window) {

    function PageVisit() {

        this.parseOption();
        this.recordLog();
    }

    PageVisit.defaults = {
        visiter: 'anonymous',
        rootUrl: ''
    };

    /**
     * 解析选项,如果未设置选项,则用默认选项
     */
    PageVisit.prototype.parseOption = function () {
        var params = new Map();
        var document = window.document;
        var js = document.getElementsByTagName("script");
        for (var i = 0; i < js.length; i++) {
            if (js[i].src.indexOf("PageVisit.js") >= 0) {
                var arraytemp = new Array();
                arraytemp = js[i].src.split('?');
                if (arraytemp.length > 1) {
                    var paramsArray = arraytemp[1].split('&');
                    paramsArray.forEach(element => {
                        paramsArray = element.split('=');
                        params.set(paramsArray[0], paramsArray[1])
                    });
                }
            }
        }

        var parsedOption={rootUrl:params.get('rootUrl'),visiter:params.get('visiter')}
        this.options = $.extend({}, this.constructor.defaults,parsedOption);
    }

    PageVisit.prototype.recordLog = function (options) {       
        var self = this;
        var pathname = window.location.pathname;
        var hostname = window.location.hostname + ':' + window.location.port;
        var search = window.location.search.split('?')[1];
        var href = window.location.href.split('?')[0];

        var reqUrl = "/Modules/SYS/PageVisitHandler.ashx";
        if (self.options.rootUrl !== undefined && self.options.rootUrl !== '') {
            reqUrl = self.options.rootUrl + reqUrl;
        }

        $.ajax({
            type: "Post",
            url: reqUrl,
            data: { pathName: pathname, domainName: hostname, url: href, params: search, visiter: self.options.visiter },
            success: function (data) {
            }
        });
    }

    return new PageVisit();
});

两种使用方式:

1.如果页面与后台Handler是同一个站点,则直接引用

<script src="../../Scripts/PageVisit.js" type="text/javascript"></script>

2.如果页面与后台Handler不是同一个站点,如是APP中的页面,则要传递Handler所在服务器的地址,如:

<script src="../../Scripts/PageVisit.js?rootUrl=http://127.0.0.1:28099&visiter=test" type="text/javascript"></script>



版权声明:本文为shaozhenged原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。