在计时器上引用多个URL
Referencing Multiple URLs on a Timer
我有一个引用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>
更新：由于您想循环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>
然后，您可以更新initialize方法以获取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();
}
然后，您可以根据适用于viz:的任何间隔来刷新它们
setInterval(function () { refreshViz(viz); }, 30000);
setInterval(function () { refreshViz(viz1); }, 20000);
setInterval(function () { refreshViz(viz2); }, 10000);
相关文章：
- 在计时器上引用多个URL
- 是 Angular JS 的本地安装或引用 URL 之间的差异
- 如何设置javascript中引用的文档的URL
- 不能在 QUnit 测试中使用从 http url 引用的 jQuery
- 未捕获的引用错误: 未定义 url
- 页面重定向，在表单提交时传递引用 URL
- 如何使用jQuery根据引用/当前URL重定向页面
- 如何传递动态生成的 xml，该 xml 引用到 javascript 中的 url
- 如何获取当前页面 URL 并将其放入 JavaScript 中的新 URL 引用中
- 使用 JavaScript 引用 URL 来播放声音
- Windows脚本主机文件大小限制无法检索引用的URL异常
- 重定向那些没有任何引用URL的URL
- 如何使用JS重定向到具有哈希值的引用URL
- 如何在从某个页面重定向到另一个页面时获得引用URL
- 为慢速URL引用设置计时器/限制的任何方法
- 无法设置属性'URL'的未定义引用或null引用
- 如何解析一个字符串在背景图像url引用html,javascript
- 如何使用filereader API获取BLOB url引用并正确读取它?
- 如何在CodeIgniter中删除双foreach中的双URL引用
- 如何在url引用脚本中添加5秒等待
