window.onload 또는 스크립트 블록을 사용해야 합니까?

Question

DOM이 호출될 때 DOM을 조작하는(CSS 클래스 추가 등) 자바스크립트 함수가 있습니다.이는 사용자가 양식의 일부 값을 변경할 때 호출됩니다.문서가 처음 로드될 때 이 함수를 호출하여 초기 상태를 준비하고 싶습니다(이 경우 서버 측에서 DOM을 올바른 초기 상태로 설정하는 것보다 간단합니다).

이 기능을 수행하려면 window.onload를 사용하는 것이 더 낫습니까, 아니면 수정해야 하는 DOM 요소 뒤에 스크립트 블록을 두는 것이 더 낫습니까?두 경우 모두 왜 더 나은가요?

예를 들어:

function updateDOM(id) {
    // updates the id element based on form state
}

다음을 통해 호출해야 하나요?

window.onload = function() { updateDOM("myElement"); };

또는:

<div id="myElement">...</div>
<script language="javascript">
    updateDOM("myElement");
</script>

전자가 이를 수행하는 표준 방법인 것 같지만 후자도 마찬가지로 좋은 것 같습니다. 스크립트가 적중되자마자 요소를 업데이트하고 요소 뒤에 배치되는 한 그것에 문제가 있다고 보지 마십시오.

이견있는 사람?한 버전이 다른 버전보다 정말 나은가요?

Answer 1

꼭 사용하세요 onload.스크립트를 페이지와 별도로 보관하세요. 그렇지 않으면 나중에 스크립트를 풀려고 애쓰다가 미칠 것입니다.

Answer 2

onload 이벤트는 이를 수행하는 적절한 방법으로 간주되지만, javascript 라이브러리를 사용해도 괜찮다면 jQuery의 $(document).ready()가 더 좋습니다.

$(document).ready(function(){
  // manipulate the DOM all you want here
});

장점은 다음과 같습니다.

1. 실행할 추가 코드를 등록하려는 횟수만큼 $(document).ready()를 호출합니다. window.onload는 한 번만 설정할 수 있습니다.
2. $(document).ready() 작업은 DOM이 완료되자마자 발생합니다. window.onload는 이미지 등을 기다려야 합니다.

나는 모든 JavaScript 질문에 대해 jQuery를 제안하는 사람이 되지 않기를 바라지만 정말 훌륭합니다.

Answer 3

나는 많은 Javascript를 작성했으며 window.onload는 끔찍한 그것을하는 방법.부서지기 쉽고 때까지 기다립니다. 모든 페이지의 자산이 로드되었습니다.따라서 하나의 이미지가 오래 걸리거나 리소스가 30초까지 시간 초과되지 않으면 사용자가 페이지를 보거나 조작할 수 있기 전에 코드가 실행되지 않습니다.

또한 Javascript의 다른 부분이 window.onload = function() {}을 사용하기로 결정하면 코드가 날아갈 것입니다.

페이지가 준비되었을 때 코드를 실행하는 적절한 방법은 변경해야 하는 요소가 준비/사용 가능해질 때까지 기다리는 것입니다.많은 JS 라이브러리에는 이 기능이 내장되어 있습니다.

확인해 보세요:

• http://docs.jquery.com/Events/ready#fn
• http://developer.yahoo.com/yui/event/#onavailable

Answer 4

다음과 같은 일부 JavaScript 프레임워크 무툴, "domready"라는 특별 이벤트에 대한 액세스를 제공합니다.

DOM이 로드되면 실행되는 창 이벤트 'domready'를 포함합니다.DOM 요소에 액세스하려는 코드가 실행될 때 DOM 요소가 존재하도록 하려면 해당 요소를 'domready' 이벤트 내에 배치해야 합니다.

window.addEvent('domready', function() {
  alert("The DOM is ready.");
});

Answer 5

IE의 window.onload는 바이너리 정보도 로드되기를 기다립니다."DOM이 로드되는 시기"에 대한 엄격한 정의는 아닙니다.따라서 페이지가 로드된 것으로 인식되는 시점과 스크립트가 실행되는 시점 사이에 상당한 지연이 있을 수 있습니다.이 때문에 나는 당신을 위해 무거운 작업을 처리하기 위해 풍부한 JS 프레임워크(프로토타입/jQuery) 중 하나를 살펴보는 것이 좋습니다.

Answer 6

이 주제에 관한 아주 좋은 기사는 다음과 같습니다.

http://mattberseth.com/blog/2008/08/when_is_it_safe_to_modify_the.html

Answer 7

@괴짜

사용자가 IE에서 뒤로 버튼을 누르면 window.onload가 다시 호출되지만 Firefox에서는 다시 호출되지 않을 것이라고 확신합니다.(최근에 변경하지 않는 한).

파이어폭스에서는 onload 페이지 탐색 방법에 관계없이 DOM 로드가 완료되면 호출됩니다.

Answer 8

가능한 경우 깨끗한 코드를 위해 window.onload를 사용하는 것에 대해 다른 사람들의 의견에 동의하지만 사용자가 IE에서 뒤로 버튼을 누르면 window.onload가 다시 호출되지만 Firefox에서는 다시 호출되지 않을 것이라고 확신합니다.(최근에 변경하지 않는 한).

편집하다:나는 그것을 거꾸로 가질 수 있습니다.

어떤 경우에는 사용자가 다른 페이지에서 뒤로 버튼을 눌러 해당 페이지로 돌아갈 때 스크립트를 평가하려면 인라인 스크립트를 사용해야 합니다.

이 답변에 대한 수정이나 추가를 환영합니다...저는 자바스크립트 전문가가 아닙니다.

Answer 9

내 생각은 window.onload 함수가 1개만 있을 수 있고 인라인 스크립트 블록에는 N 숫자.

Answer 10

onLoad를 사용하면 실행할 수 있는 스크립트 태그를 찾기 위해 수많은 HTML을 읽어야 하는 것보다 페이지가 로드될 때 어떤 코드가 실행되는지 확인하는 것이 훨씬 쉽기 때문입니다.