Grails - 在脚本方法之后调用主体加载答案

【问题标题】：Grails - body onload being called after script methodGrails - 在脚本方法之后调用主体加载
【发布时间】：2012-10-08 19:41:48
【问题描述】：

不确定是什么原因造成的，或者它是否与 Grails 有关。

我有一个方法，我想先调用身体负荷。然后是脚本标记中的第二个方法。我一直认为 body 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>

【问题讨论】：

标签： javascript jquery html grails

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

最好的选择是将所有的 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>

一些JSFile.js：

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

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

【讨论】：

【解决方案3】：

onload 事件在页面加载后立即触发。当网页完全加载所有内容时触发。

一旦解析器遇到它，脚本标签内的那个就会被触发。

所以警报触发的顺序是完全正常的。

【讨论】：