Question

不确定导致这种情况的原因，或者它与Grails有什么关系。

我有一个方法，我想先调用身体负荷。然后是脚本标记中的第二个方法。我总是假设身体onload方法调用会先行 - 我想我错了。

警报的顺序是3，然后是1，然后是2。

有什么想法吗？

<html>
<head>
    <title>${cname} Organization Chart</title>

    <link rel="stylesheet" href="${resource(dir: 'css', file: 'custom.css')}" type="text/css"/> 
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.jOrgChart.css')}" type="text/css"/>   
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap.min.css')}" type="text/css"/>  
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'prettify.css')}" type="text/css"/>   

    <g:javascript src="prettify.js" />
    <g:javascript src="jquery.jOrgChart.js" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

    <script>
        alert('3');
        jQuery(document).ready(function() {
            $("#org").jOrgChart({
                chartElement : '#chart',
                dragAndDrop  : true
            });
        });
    </script>

<body onload="alert('1');prettyPrint();alert('2');">

    <ul id='org' style='display:none'></ul>

    <div id="chart"></div>
</body>
</html>

Answer 1

<body onload=...>实际上（奇怪地）设置window.onload事件，该事件在所有最初请求的外部资源（图像，脚本等）之后调用已完成加载。

您可能应该使用jQuery的$(document).ready()处理程序或内联脚本，具体取决于您的需求。

Answer 2

页面加载后会立即触发

onload 事件。当网页完全加载所有内容时会触发此事件。

解析器遇到脚本标记内的那个内容就会被触发。

因此，警报触发的顺序完全正常。

Answer 3

最好的选择是将所有javascript放在javascript文件中，而不是从HTML中执行任何操作。

HTML：

<html>
    <head>
        <title>${cname} Organization Chart</title>
        ... snip ...
        <script type="text/javascript" src="someJSFile.js" />
    </head>
    <body>
        <ul id='org' style='display:none'></ul>
        <div id="chart"></div>
    </body>
</html>

someJSFile.js：

$(document).ready(function() {
    prettyPrint();

    $("#org").jOrgChart({
        chartElement: '#chart',
        dragAndDrop: true
    });
});

Grails - 在脚本方法之后调用body onload

3 个答案: