IE8 DOM은 JS 변경 사항을 반영하지 않습니다.

Question

페이지가 제공 될 때 이미 존재하는 HTML 요소 (예 : div 요소의 배경 이미지 변경, ID 추가 등)에 대해 javascript를 사용하여 간단한 변경 작업을하고 있습니다. 이것은 물론 모든 브라우저에서 IE8을 제외하고는 잘 동작합니다. 변경 사항이 DOM에 반영되지 않는 것 같습니다. 그래서 JS가 실행 된 후에 DOM을 구문 분석하면 원하는 요소를 찾을 수 없습니다. 페이지는 헤더에 2 개의 자바 스크립트 파일로 구성되어 있습니다. 1은 제어 할 수없는 외부 제 3 자 스크립트이지만 ID와 배경 이미지를 추가하는 스크립트입니다. 두 번째는 첫 번째 이후에 호출되고 새로운 ID로 특정 요소를 찾는 문서를 구문 분석하는 것입니다. 둘 다 외부 스크립트이며 HTML 소스에서 인라인되지 않습니다. 내가 무엇을 말할 수에서

그 중 하나

경쟁 조건은,이 외부 Javascript를 1이 버튼을 변경하고 ID를 추가하고, 다른 하나는 특정 요소와 같이 찾고 DOM을 구문 분석되어 실행

• 그들이 동시에 실행 다시 '두 번째 변화는
을 만들어 한 후 제대로 DOM을 갱신하지 않습니다
• IE8 요소를 발견하지

이 있다고 가정 할 수 있도록

내 JS 머리의 첫 번째 JS 후라고 차단은 c가 아닐 것이다. 내 코드 앞에 DOM의 새로 고침을 강제로 몸에 클래스를 추가하려고했습니다

• : 내 JS 내가 해봤

  사항을 실행하기 전에 ause 경쟁 조건과 요소를 사용할 것 실행

• IE8 개발자 도구를 사용했지만 ID와 요소가 없지만 몇 번 새로 고침하면 마술처럼 나타납니다 (페이지가 이미이 시점에 완전히로드되어 있고 완전히 상호 작용할 수 있음)

아이디어가 있으십니까?

감사합니다.

Answer 1

여러 개의 <script> 태그를 여러 개 만들면로드 순서와 빌드 방식에 따라 태그가 생성되는 즉시 처리되기 시작합니다. 짐을 실은. 그래서

, 당신은 같은 하나 개의 로컬 파일과 CDN에 하나 개의 파일을 포함하는 경우 :

<script type="text/javascript" 
     src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> 
</script> 
<script type="text/javascript" src="/js/my_script.js"></script> 

을 당신은 CDN 파일 호스팅 파일보다 배달 훨씬 빠른 종종 것을 고려해야 . 위의 경우에는 스크립트가 적용되기 전에 jQuery이 페이지에로드되어 있기 때문에 좋은 방법 일 수 있습니다. DOM에있는 특정 요소에 의존하는 다른 타사 스크립트를로드하는 경우 귀하의 스크립트 작성에 대한 책임은 귀하의 스크립트가 제 시간에 생성하지 못할 수 있습니다.

이 시나리오를 상상해 :

<script type="text/javascript" src="https://someurl/somelib.js"> 
    // This script parses the DOM and applies alterations to certain items 
</script> 
<script type="text/javascript" src="/js/my_script.js"> 
    // This script creates the DOM elements the other script is supposed to alter 
</script> 

귀하의 페이지에만 작동합니다 경우 로컬 파일, /js/my_script.js, 처음로드 - 다른 파일 전용 CDN에서 제공되고 있기 때문에 않을 수 있습니다.두 파일은 같은 로컬로 제공하는 경우

이 더 악화입니다 :이 경우

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

, 모든 로컬 웹 서버가 무슨 결정하기 위해 HTTP 요청을 처리하기 위해 발생 방법에 따라 달라집니다 어떤 순서로.

그래서 - 솔루션에게 :

1) 스크립트가 모든 발사 할 수있는 document의 onready 이벤트를 기다려야합니다. 이 이벤트는 문서가 완전히로드 된 후에 만 ​​발생하므로 (스크립트, 이미지 등 요소를 완전히로드하는 데 필요한 다른 HTTP 요청을 포함하여) 전체 DOM이 완료 될 때까지 스크립트가 최소한 기다릴 수 있습니다. 짐을 실은.

2) 트리거 이벤트를 기다리는 하위 스크립트를 만듭니다. 같은 인라인의 CSS로 (위의 변환이 매우 끔찍한, 그리고 무언가가 당신이 원하는 것 명심 -

// Script #1 
$(document).bind('ready', function() { 
    $('#NeedsBackground').css({ background: 'url(/gfx/bg.png)' }); 

    var $wrapper = $('<div />').addClass('wrapper'); 
    $('#NeedsWrapper').wrap($wrapper); 

    // Here's the magic that enforces loading. 
    $(document).trigger('Script1Finished'); 
}); 

// Script #2 
$(document).bind('Script1Finished', function() { 
    $('.wrapper').css({ border: '1px solid #000' }); 
}); 

지금 : jQuery로

, 예는 다음과 같은 것을 수 있습니다 그리고 일반적으로) - 그러나 그들은 예를 든다. Script #2은 실행 전에 .wrapper 요소가 있어야하므로 Script #1이 발생한 후에 발생해야합니다.

이 경우 문서의 맞춤 이벤트를 trigger 처리하여 처리 할 수 ​​있습니다.이 이벤트는 응답 할 수 있으며 DOM이 올바른 상태가 된 후에 만 ​​해당 이벤트가 실행됩니다.