在网页中与 timeonsitetracker.js API 集成时如何获取实时

Question

我在网页中集成了 JS timeonsite 库timeonsitetracker.js，如文档中所示，<script type="text/javascript">var Tos;(function(d, s, id, file) {    var js, fjs = d.getElementsByTagName(s)[0];    if (d.getElementById(id)) return;    js = d.createElement(s);    js.id = id;    js.onload = function() {        var config = {            trackBy: 'seconds',            developerMode: true        };        if(TimeOnSiteTracker) {            Tos = new TimeOnSiteTracker(config);        }    };    js.src = file;fjs.parentNode.insertBefore(js, fjs); } (document, 'script', 'TimeOnSiteTracker', '//cdn.jsdelivr.net/gh/saleemkce/timeonsite@1.1.0/timeonsitetracker.min.js'));</script>调用 Tos 对象后，Tos.getTimeOnPage();{    TOSId: 13650383319214852    TOSSessionKey: "6606159448467693493359"    TOSUserId: "anonymous"    URL: "https://localhost/index.html"    currentTime: "2020-07-11 16:25:17.908"    entryTime: "2020-07-11 16:24:36.911"    timeOnPage: 41    timeOnPageByDuration: "0d 00h 00m 41s"    timeOnPageTrackedBy: "second"    timeOnSite: 0    timeOnSiteByDuration: "0d 00h 00m 00s"    title: "real-time demo"    trackingType: "tos"}在调用Tos.getTimeOnPage() API 时，我看到“ timeOnSite ”始终为“0”，但 timeOnPage 会定期更新。但是在刷新页面时，我得到了更新的timeOnPage，timeOnSite在 DB 中由跟踪器自动保存。有没有办法在页面上获取实时“ timeonsite ”参数而不刷新演示页面中给出的整个页面？

Answer 1

在演示页面中，他们所做的基本上是：

$(document).ready(function() {

   

    setInterval(function() {

    

    $('#timeOnSiteDuration').html(Tos.secondToDuration((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage));

                    

   }, 1000);

}

他们在 document.ready 中设置了 1 秒的间隔，以使用现场计算时间更新 id='timeOnSiteDuration' 的 'div'。

我认为您可以做的解决方案是这样的：使用 setInterval 并计算现场时间：

Tos.secondToDuration((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage)

您可以将此 calc 设置为变量或像演示页面一样，直接在 html 中显示。

Answer 2

除了 Luis 的回答之外，我还可以通过键入以下内容从浏览器控制台获取实时的现场参数：

console.log((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage);

---

61（秒）

---

console.log(Tos.secondToDuration((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage));

---

0d 00h 01m 01s（1 分 1 秒）

---

但是，它应该包含在 1 秒的setInterval()中，以便实时获取站点数据的美好时光。

浏览演示代码后，我知道这仅适用于非 IOS 浏览器，因为 IOS 似乎不支持window.unload事件。

对于 IOS 设备，以下代码块非常适合获取实时现场数据。

$(document).ready(function() {

//Timer module data binding

setInterval(function() {

    /*for IOS demo only */

    var isIOSDeviceInst = true;  // In case it's an IOS browser; set this value dynamically

    var IOSPeriodicData;

    var dateObj = (new Date());

    var currentDayKey = 'TOS_' + (dateObj.getMonth() + 1) + '_' + dateObj.getDate() + '_' + dateObj.getFullYear();

    var dataItem = localStorage.getItem(currentDayKey);

    if (dataItem) {

        IOSPeriodicData = JSON.parse(dataItem);

    }

    var timeOnSiteIOS;

    /*for IOS demo only */

    

    if (isIOSDeviceInst && IOSPeriodicData) {

        // > v1.2.0

        var timeOnSiteInitIOSDynamic = (Tos.getTimeOnPage()).timeOnSite;

        timeOnSiteIOS = (timeOnSiteInitIOSDynamic < Tos.getTimeOnPage().timeOnPage) ? Tos.getTimeOnPage().timeOnPage : timeOnSiteInitIOSDynamic;

        $('#timeOnSiteRaw').html(timeOnSiteIOS);

        // v1.1.0

        // $('#timeOnSiteRaw').html(IOSPeriodicData[0].timeOnSite);

    } else {

        $('#timeOnSiteRaw').html((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage);

    }

    if (isIOSDeviceInst && IOSPeriodicData) {

        // > v1.2.0

        $('#timeOnSiteDuration').html(Tos.secondToDuration(timeOnSiteIOS));

        //v1.1.0

        // $('#timeOnSiteDuration').html(Tos.secondToDuration(IOSPeriodicData[0].timeOnSite));

    } else {

        $('#timeOnSiteDuration').html(Tos.secondToDuration((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage));

    }

}, 1000);