비동기적으로 로드된 스크립트의 실행 제한 사항: document.write() 제한 이해

비동기적으로 로드된 스크립트에서 문서에 쓰려고 하면 다음이 발생합니다. "'문서'에서 '쓰기'를 실행하지 못했습니다. 명시적으로 열지 않는 한 비동기적으로 로드된 외부 스크립트에서 문서에 쓸 수 없습니다."라는 콘솔 메시지가 표시됩니다. 이 메시지는 예상되는 스크립트 동작에도 불구하고 나타날 수 있으므로 개발자는 당황하게 됩니다.

제한이 존재하는 이유

비동기적으로 로드된 스크립트는 문서가 구문 분석되고 실행된 후에 실행되는 경우가 많습니다. 닫은. 결과적으로, 그러한 스크립트에서 document.write()를 사용하는 것은 문서가 더 이상 쓰기 위해 열려 있지 않기 때문에 문제가 됩니다.

해결책: 명시적 DOM 조작

문서를 사용하는 대신 .write()를 사용하려면 개발자가 비동기적으로 로드된 스크립트에서 DOM을 명시적으로 조작해야 합니다. 여기에는 DOM 요소를 생성하고 .appendChild(), .insertBefore()와 같은 메서드를 사용하거나 .innerHTML을 설정하여 원하는 상위 요소에 삽입하는 작업이 포함됩니다.

예: DOM 조작

설명하기 위해 다음 인라인 스크립트를 고려하십시오.

비동기적으로 로드된 스크립트에서 이 코드는 다음으로 대체될 수 있습니다.

var container = document.getElementById("container");
var content = document.createElement("span");
content.style.color = "red";
content.innerHTML = "Hello";
container.appendChild(content);

또는 컨테이너가 비어 있으므로 다음과 같은 단순화된 코드를 사용할 수 있습니다.

var container = document.getElementById("container");
container.innerHTML = 'Hello';

이러한 DOM 조작 기술을 채택함으로써 개발자는 제한을 피하면서 비동기적으로 로드된 스크립트에서 문서에 효과적으로 쓸 수 있습니다. document.write().