引用定時器上的多個URL

我有一個引用URL的基本HTML/JavaScript查詢。我不想引用單個URL，而是引用3，並讓它們在計時器上循環。引用定時器上的多個URL

例如：

目前我有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>

來源

2015-03-30 Calbruin

查看上面的最新編輯 – Calbruin 2015-03-31 20:23:47

更新：既然你要循環的div內容我可能會創建三個的div和顯示/隱藏他們（因爲重建一個tableauSoftware.Viz可能是更多的開銷）：

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

然後你就可以更新你的初始化方法取div名稱，返回的對象。這使得有可能創建一個簡單的數組，保存所有可見的對象，那麼你可以通過它們旋轉切換的知名度和更新你要顯示的一個：

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();  
}

然後你可以根據任何間隔爲的作品刷新他們：

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

來源

2015-03-30 19:51:01 pherris

感謝您的協助！我只是嘗試了這套代碼，雖然它發揮了第一個Viz，但它並沒有循環進入第二個Viz。這段代碼的目的是讓它遍歷所有三個Viz並返回到第一個Viz，再次開始循環。 – Calbruin 2015-03-30 20:13:03

啊，他們應該共享相同的div？ – pherris 2015-03-30 20:20:51

是的，共享相同的div。 – Calbruin 2015-03-30 20:21:52

引用定時器上的多個URL

回答

相關問題