引用定时器上的多个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>
答
更新： 既然你要循环的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);
查看上面的最新编辑 – Calbruin 2015-03-31 20:23:47