在计时器上引用多个 URL

Question

我有一个引用 URL 的基本 HTML/JavaScript 查询。我不想引用单个 URL，而是引用 3，并让它们在计时器上循环。

例如：

目前我有 URL1 = Dashboard1，我希望有一个 URL2 = Dashboard2 和 URL3 = Dashboard3。

这是我的脚本：

<html>

<head></head>

<body>

<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript"> 






  function initializeViz() {

   var placeholderDiv = document.getElementById("tableauViz");

        var url1 = "http://ccapptabdev01/t/Gas/views/ERXCommissioningDashboard/Dashboard1";

     var options = {

         width: 2000,

         height: 1200,

         hideTabs: true,

         hideToolbar: false,

        onFirstInteractive: function () {

        workbook = viz.getWorkbook();

        activeSheet = workbook.getActiveSheet();

        }


    };



    viz = new tableauSoftware.Viz(placeholderDiv, url1, options);

  }  

  $(initializeViz);



</script>



<script type="text/javascript"> 



  function RefreshViz(){  

    //alert("test");

    viz.refreshDataAsync();    



     }



  if (document.addEventListener) {

    window.addEventListener("load", RefreshViz, false);

    } else if (document.attachEvent) {

      window.attachEvent("onload", RefreshViz);

    } 



    setInterval(RefreshViz, 30000); 



</script>



<div id="tableauViz">  

</div>



</body>

</html>

谢谢！编辑了我的脚本，但是当运行它只播放三个中的第一个 URL。这是编辑后的脚本：

<html>
<head></head>
<body>

<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript"> 



var vizs = [];
    vizs.push(initializeViz('tableauViz1', "http://ccapptabdev01/t/Gas/views/SCADA_SERVER_DASHBOARD/Dashboard1"));
    vizs.push(initializeViz('tableauViz2', "http://ccapptabdev01/t/Gas/views/ERXTrendingTool/Dashboard1"));
    vizs.push(initializeViz('tableauViz3', "http://ccapptabdev01/t/Gas/views/ERXTrendingTool/Dashboard1"));

    function initializeViz(div, url) {

         var placeholderDiv = document.getElementById(div);
         var options = {
         width: 2000,
         height: 1200,
         hideTabs: true,
         hideToolbar: false,
         onFirstInteractive: function () {
             workbook = viz.getWorkbook();
             activeSheet = workbook.getActiveSheet();

         }
    };

    return {div: placeholderDiv, vis: new tableauSoftware.Viz(placeholderDiv, url, options)};

}

</script>

<script type="text/javascript"> 

    var visible = 0; //0, 1 or 2 - maintains state
        function rotate() {
         visible++;
            if (visible+1 > vizs.length()) {
            visible = 0;
         }

        //hide all
     vizs.forEach(function(vis, index, array) {
        vis.placeholderDiv.style.display === 'none';
        });

     //show and update
     vizs[visible].placeholderDiv.style.display = 'block';
     vizs[visible].viz.refreshDataAsync();

    }
    setInterval(rotate, 15000);


</script>

    <div id="tableauViz1">  

    </div>

    <div id="tableauViz2" style="display:none;">  

    </div>

    <div id="tableauViz3" style="display:none;">  

    </div>
</body>
</html>

其他编辑：

<html>
<head></head>
<body>

<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript"> 



var vizs = [];
    vizs.push(initializeViz('tableauViz1', "http://ccapptabdev01/t/Gas/views/SCADA_SERVER_DASHBOARD/Dashboard1"));
    vizs.push(initializeViz('tableauViz2', "http://ccapptabdev01/t/Gas/views/ERXTrendingTool/Dashboard1"));
    vizs.push(initializeViz('tableauViz3', "http://ccapptabdev01/t/Gas/views/ERXTrendingTool/Dashboard1"));

    function initializeViz(div, url) {

         var placeholderDiv = document.getElementById(div);
         var options = {
         width: 2000,
         height: 1200,
         hideTabs: true,
         hideToolbar: false,
         onFirstInteractive: function () {
             workbook = viz.getWorkbook();
             activeSheet = workbook.getActiveSheet();

         }
    };

    return {div: placeholderDiv, viz: new tableauSoftware.Viz(placeholderDiv, url, options)};

}


</script>

<script type="text/javascript"> 

    var visible = 0; //0, 1 or 2 - maintains state
        function rotate() {
         visible++;
            if (visible+1 > vizs.length()) {
            visible = 0;
         }

        //hide all
     vizs.forEach(function(viz, index, array) {
        viz.placeholderDiv.style.display === 'none';
        });

     //show and update
     vizs[visible].placeholderDiv.style.display = 'block';
     vizs[visible].viz.refreshDataAsync();

    }
    setInterval(rotate, 15000);


</script>


<div id="tableauViz1">  
</div>
<div id="tableauViz2" style="display:none;">  
</div>
<div id="tableauViz3" style="display:none;">  
</div>
</body>
</html>

Answer 1

更新：由于您想循环 div 中的内容，我可能会创建三个 div 和 show/hide 它们（因为重新创建 tableauSoftware.Viz 可能会产生更多开销）：

<div id="tableauViz1">0</div>
<div id="tableauViz2" style="display:none;">1</div>
<div id="tableauViz3" style="display:none;">2</div>

然后您可以更新初始化方法以获取 div 名称和 return 对象。这使得创建一个包含所有 vis 对象的简单数组成为可能，然后您可以旋转它们以切换可见性并更新您想要显示的对象：

function initializeViz(div, url) {

    var placeholderDiv = document.getElementById(div);
    var options = {
        width: 2000,
        height: 1200,
        hideTabs: true,
        hideToolbar: false,
        onFirstInteractive: function () {
            workbook = viz.getWorkbook();
            activeSheet = workbook.getActiveSheet();

        }
    };
    return {
        div: placeholderDiv,
        viz: {
            refreshDataAsync: function (div, divNo) {
                div.innerHTML = divNo + ' updated: ' + new Date();
            }
        }
    };
}

var vizs = [];
vizs.push(initializeViz('tableauViz1', "http://ccapptabdev01/t/Gas/views/SCADA_SERVER_DASHBOARD/Dashboard1"));
vizs.push(initializeViz('tableauViz2', "http://ccapptabdev01/t/Gas/views/ERXTrendingTool/Dashboard1"));
vizs.push(initializeViz('tableauViz3', "http://ccapptabdev01/t/Gas/views/ERXTrendingTool/Dashboard1"));


rotate = function() {
    this.value = 0;
    return function() {
        this.value++
        if (this.value >= vizs.length) {
            this.value = 0;
        }

        //hide all
        vizs.forEach(function (viz, index, array) {
            viz.div.style.display = 'none';
        });

        //show and update
        vizs[this.value].div.style.display = 'block';
        vizs[this.value].viz.refreshDataAsync(vizs[this.value].div, this.value);
    }
};
setInterval(rotate(), 1000);

https://jsfiddle.net/39eo3to2/

原文：一种选择是创建多个 new tableauSoftware.Viz 对象并将它们传递到您的刷新方法中：

function refreshViz(myViz){  
   myViz.refreshDataAsync();    
}

然后你可以根据适用的任何时间间隔刷新它们 viz:

setInterval(function () { refreshViz(viz); }, 30000);
setInterval(function () { refreshViz(viz1); }, 20000);
setInterval(function () { refreshViz(viz2); }, 10000);

在计时器上引用多个 URL

Referencing Multiple URLs on a Timer

html

javascript

tableau-api