javascript - viz.dispose() 不起作用

Question

我们正在使用 Tableau API 嵌入两个工作簿。每个工作簿都嵌入在一个 iframe 中。问题是，当我们从一个工作簿转到另一个工作簿时，我们收到错误“tableau-2.0.0.min.js:147 Uncaught Error: Another viz is已经存在于元素'div#iFrameDiv'中。”

简而言之，这就是我们的流程的运行方式。

当用户访问我们的自定义网页时，我们使用以下代码初始化工作簿:

function initializeVizSummary() {
   var placeholderDiv = document.getElementById("iFrameDiv"),

    url = "https://10ay.online.tableau.com/t/site/views/workbook1/Summary",
        options = {
            width: "100%",
            height: 1250,
            hideTabs: true,
            hideToolbar: true,
            onFirstInteractive: function () {
                workbook = viz.getWorkbook();
                activeSheet = workbook.getActiveSheet();                
            }
        };
    viz = new tableau.Viz(placeholderDiv, url, options);
}  

然后用户单击一个链接，使用此函数初始化另一个工作簿:

function initCustomDashboard(){
    var placeholderCustomDiv = document.getElementById("iFrameDiv2");
    var customUrl = "https://10ay.online.tableau.com/t/site/views/workbook2/summary2";
    options = {
            width: "100%",
            height: 1250,
            hideTabs: true,
            hideToolbar: true,
            onFirstInteractive: function () {
                workbook = viz.getWorkbook();                   
        }   
    };

    viz = new tableau.Viz(placeholderCustomDiv, customUrl,options);
}

上述工作正常，但当用户想要转到第一个工作簿时，我们会收到错误“tableau-2.0.0.min.js:147 Uncaught Error: Another viz is已经存在于元素'div#iFrameDiv'中。 ”

浏览文档 ( https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_ref.htm )。看来解决办法是使用dispose方法

所以我在第二次调用initializeVizSummary()之前发出viz.dispose()，但这似乎不起作用，因为当我执行viz.getWorkbook()时。它获取第二个工作簿。

我做错了什么？

谢谢

Answer 1

所以 Dispose 毕竟工作得很好。我的错误是使用两个元素来填充每个工作簿#iFrameDiv #iFrameDiv2。因此，正确的设置是使用一个 DOM 元素来填充工作簿，只需确保在加载工作簿之前发出 viz.dispose()