순서가 다른 여러 자바 스크립트 블록

Google지도 API를 사용하는 asp.net 페이지를 만들고 있습니다. 페이지는 Google지도 초기화 작업을 포함하는 head 태그에 GoogleMap.js를로드합니다. 그리고 코드 뒤에, Page.ClientScript.RegisterClientScriptBlock()을 사용하여 더 많은 자바 스크립트 코드를 주입 할 것입니다. (또한 RegisterStartupScript()를 시도했습니다). 이 함수는 추가 태그를 body 태그 내부의 스크립트 블록 (GoogleMap.js 스크립트 아래)에 배치합니다. 지금 자바 스크립트를 디버그하기 위해 크롬 개발자 창을 사용하고 있습니다. 실행 순서를 확인하기 위해 몇 가지 중단 점을 던지면 본문의 스크립트 블록이 스크립트의 앞부분에서 실행됩니다. 따라서 HTML 페이지의 맨 위에서 맨 아래로 순서대로 진행하지 않아야한다고 생각했습니다. 무슨 일이야??? 어떻게 해결할 수 있습니까? 그리고 조직을 위해서, 내 페이지의 모든 자바 스크립트에 RegisterClientScriptBlock()을 사용하지 않을 것입니다.순서가 다른 여러 자바 스크립트 블록

body 태그가 먼저 실행되고 "map"변수가 어떤 객체 가든 Google지도에 할당되지 않았기 때문에 마커가 추가되지 않습니다. 여기

는

</title><link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" /><link href="../css/master.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="../js/bootstrap.min.js"></script> 




    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 



    <script type="text/javascript"> 
     var map; 

     function initialize() { 
      var chicago = new google.maps.LatLng(41.879535, -87.624333); 

      var mapOptions = { 
       zoom: 4, 
       center: chicago, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

      var marker = new google.maps.Marker({ 
       position: chicago, 
       map: map, 
       title: "Hello World!" 
      }); 

      $('#Debug').html(CountryDropDownList.children("option").filter(":selected").text().trim()); 
     } 

     $(document).ready(function() { 
      initialize(); 
     }); 
    </script> 

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

    <!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
    <![endif]--> 
<style type="text/css"> 
    .ctl00_MainMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; } 
    .ctl00_MainMenu_1 { text-decoration:none; } 
    .ctl00_MainMenu_2 { } 
    .ctl00_MainMenu_3 { font-size:12pt; } 
    .ctl00_MainMenu_4 { padding:0px 10px 0px 10px; } 

</style></head> 
<body> 
    <form name="aspnetForm" method="post" action="HertzMap.aspx" id="aspnetForm"> 
<div> 
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" /> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="VIEWSTATE_CRAP" /> 
</div> 

<script type="text/javascript"> 
//<![CDATA[ 
var theForm = document.forms['aspnetForm']; 
if (!theForm) { 
    theForm = document.aspnetForm; 
} 
function __doPostBack(eventTarget, eventArgument) { 
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
     theForm.__EVENTTARGET.value = eventTarget; 
     theForm.__EVENTARGUMENT.value = eventArgument; 
     theForm.submit(); 
    } 
} 
//]]> 
</script> 


<script type="text/javascript"> 
var marker1 = new google.maps.Marker({ 
    position: new google.maps.LatLng(41.79068,-77.26577), 
    map: map, 
    title: "WHEEL LOADER/3YD/GEN BKT/DSL   " 
}); 
var marker2 = new google.maps.Marker({ 
    position: new google.maps.LatLng(41.72962,-76.12181), 
    map: map, 
    title: "CRAWLER LOADER/3/4 YD/GENERAL/DSL  " 
}); 
</script>

출처

2012-06-20 Theo

실제 코드를 제공해 주시겠습니까? 도움이 될 것입니다. – jsalonen

몇 가지 코드를 추가했습니다. 전체 페이지가 아니지만 충분하다고 생각합니다. 상단에 Google지도 초기화와지도에 아이콘 (또는 아이콘)을 추가하려고하는 본문 스크립트가 모두 표시됩니다. – Theo

감사합니다. 지금 : 스크립트의 어느 부분이 무엇 이후에 실행되며 원하는 순서는 무엇입니까? – jsalonen

$(document).ready(function() { 
    initialize(); 
});

은 문서가 완전히로드 될 때까지 jQuery를이 initialize의 실행을 지연된다는 것을 의미합니다.

그러나 코드를 script 요소 안에 넣으면 바로 실행됩니다. 실제로 마커를 사용하여 수행 한 작업입니다. 실제 map 개체를 사용하기 전에 초기화되므로 바람직하지 않은 결과가 발생합니다.

initialize의 끝에 또는 $(document).ready 내에서 스크립트 초기화를 호출하십시오.

출처

2012-06-20 20:46:31 jsalonen

네 말이 맞아. 고맙습니다. – Theo

기능 initialize() 머리에 선언 ... 생성하고 클라이언트 브라우저에 반환 무엇 asp.net의 일부 코드이다하지만 당신은 준비 이벤트를 호출하고, 그 페이지 이후의 (모든 파싱 및 스크립트가 순차적으로 실행 됨)로드되었습니다. 따라서 본문에서 호출 된 코드가 먼저 실행됩니다.

initialize()을 머리 속에 직접 실행하려면 머리 속에 직접 넣으십시오.

이 경우 신체에 정의 된 요소에 액세스하고 있기 때문에 문제가 발생할 수 있습니다. 따라서 모든 것을 시작점으로 onReady를 사용해야합니다. 먼저 initialize를 실행 한 다음 본문의 스크립트를 초기화/실행합니다. 보면

출처

2012-06-20 20:46:10 Ixx

고마워요! (스택 오버플로가 더 많은 문자를 원합니다.) – Theo

순서가 다른 여러 자바 스크립트 블록

답변

관련 문제