2012-10-08 22 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 
    }); 
});