google.setOnLoadCallback()无法从单独的JS文件中运行

Question

我想使用谷歌api在我的网站绘制图表.但是,我的google.setOnLoadCallback功能有问题.这是我的代码(简化):

ATTEMPT 1 :(工作正常)

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/styling.js"></script>
<script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(helloWorld);

    function helloWorld() {
        alert("Hello World");
    }

</script>

ATTEMPT 2 :(工作正常)

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/styling.js"></script>
<script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(helloWorld);

</script>

在styling.js中我写道:

function helloWorld() {
    alert("Hello World");
}

在这种情况下,一切都很好.

但是...尝试3(失败!)

<script type="text/javascript" src="js/styling.js"></script>

在styling.js中我写道:

 window.onload = function() {
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(helloWorld);
}   

function helloWorld() {
    alert("Hello World");
}

这个不起作用.似乎helloWorld()根本没有被调用.

为什么？

Answer 1

我想说该setOnLoadCallback事件根本没有被触发，因为您在页面加载事件已经被触发时定义了它的回调。

只需将其保留google.setOnLoadCallback(helloWorld);在 function helloWorld() {...}页面加载的回调上下文之外（两者都保留，否则您会遇到上下文问题）。