2012-10-08 27 views
1

不确定是什么导致了这一点,或者它是否与Grails有关。Grails - 在脚本方法之后调用body onload

我有一个方法,我想调用身体负荷第一。然后在第二个脚本标记中使用一个方法。我总是认为身体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> 

回答

3

<body onload=...>实际上(和奇怪)设置window.onload事件,这是所有的最初请求外部资源(图片,脚本等)完成后加载调用。

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

1

的onload事件被触发后立即页面已经loaded.This被触发时,网页已经完全加载的所有内容。

解析器遇到脚本标记内的脚本标记。

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

1

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