如何执行一个js函数onload？

Question

下面是一个功能齐全的工作代码。当我将它复制粘贴到一个文本文件 testFile.html 然后用浏览器打开它时它工作正常。

但我希望 selectCollege 函数在 initViz 函数之后立即执行

我试过了

<body onload="initViz();selectCollege('Engineering');"> . . .

但是没有用。如何使 selectCollege 函数在 initViz 之后立即执行？

<!DOCTYPE html>
<html>

<head>
    <title>Select Marks</title>

    <script type="text/javascript" 
        src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

    <script type="text/javascript">
        var viz, sheet;

        function initViz() {
            var containerDiv = document.getElementById("vizContainer"),
                url = "http://public.tableau.com/views/RegionalSampleWorkbook/College",
                options = {
                    "Academic Year": "",
                    hideTabs: true,
                    onFirstInteractive: function () {
                        sheet = viz.getWorkbook().getActiveSheet();
                    }
                };

            viz = new tableau.Viz(containerDiv, url, options);
        }

        function selectCollege(college_name) {
            sheet.selectMarksAsync("College", college_name, tableau.SelectionUpdateType.REPLACE);
        }

     </script>
</head>

<body onload="initViz();">
    <div id="vizContainer"></div>
    <br />    
    <button onclick="selectCollege('Engineering');">Select a value</button>

</body>

</html>

Answer 1

创建新函数

function init(){
  initViz();
  selectCollege('Engineering');
}

然后调用初始化函数

window.onload = init;

Answer 2

 function initViz(college_name) {
 //your code

            viz = new tableau.Viz(containerDiv, url, options);
            
            //then
            selectCollege('engineering');
        }

        function selectCollege(college_name) {
            sheet.selectMarksAsync("College", college_name, tableau.SelectionUpdateType.REPLACE);
        }

这样使用

Answer 3

这对我有用

function bar() {
  alert("bar");
}
function foo() {
  alert("foo");
}

<!DOCTYPE html>
<html>
<body onload="bar();foo();">

</body>
</html>

Answer 4

...
<body>
... All other tags..
<script>
//just before closing body
function(){

}()
</script>
</body>
....

在脚本标记内关闭主体之前调用您的函数。

HTML 树按顺序解释。这就是我为 SPA 添加加载消息的方式。

Answer 5

在 selectCollege() 中，您正试图在 sheet 在 tableau.Viz options 对象的回调函数中定义之前访问它，即 onFirstInteractive()。为了解决这个问题，你可以在那个函数中定义sheet之后调用函数：

options = {
  ...
  onFirstInteractive: function () {
    sheet = viz.getWorkbook().getActiveSheet();
    selectCollege('Engineering');
  }
};

并且根据 this forum，当您的 tableau.Viz 实例首次呈现时，onFirstInteractive() 将被调用一次。

如何执行一个js函数onload？

How to execute a js function onload?

javascript

initialization

onload

tableau-api