如何执行一个js函数onload？答案

【问题标题】：How to execute a js function onload?如何执行一个js函数onload？
【发布时间】：2017-08-21 00:56:33
【问题描述】：

下面是一个功能齐全的工作代码。当我将其复制粘贴到文本文件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>

【问题讨论】：

<body onload="initViz();selectCollege('Engineering');> -> <body onload="initViz();selectCollege('Engineering');">（请注意您给出的示例中缺少的"）
为什么不在initViz函数末尾添加selectCollege('Engineering')
取决于你想要在 dom 渲染之前还是之后。您可以在没有 init 的情况下运行命令
@PatrickRoberts 是的；是问题中的错字。在我的文件中，我有quote 我使用颜色编码编辑器。所以报价在那里，但仍然不起作用
好吧，我还注意到 sheet 直到 onFirstInteractive() 被调用时才被初始化，所以你请求的可能是不可能的。当您尝试我的建议时，错误日志会说什么？我的猜测是它说Uncaught TypeError: Cannot read property 'selectMarksAsync' of undefined

标签： javascript initialization tableau-api onload

【解决方案1】：

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

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

根据this forum，onFirstInteractive() 将在您的tableau.Viz 实例首次渲染时被调用一次。

【讨论】：

非常感谢。这是唯一有效的答案

【解决方案2】：

创建一个新函数

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

然后调用init函数

window.onload = init;

【讨论】：

这将使函数并行运行，而不是在第一个函数之后
有趣的是，我刚查了一下，window.onload 的效果与body onload 相同，但there are good reasons to prefer the first。
@Frankusky 该声明完全无效。 JavaScript 是单线程的，这确实会依次调用 initViz() 和 selectCollege()。

【解决方案3】：

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

这样使用

【讨论】：

【解决方案4】：

这对我有用

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

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

</body>
</html>

【讨论】：

【解决方案5】：

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

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

在脚本标签内关闭正文之前调用您的函数。

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

【讨论】：