비동기식으로 로드된 스크립트에서 document.write()가 제한되는 이유는 무엇입니까?

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

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

제한이 존재하는 이유

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

해결책: 명시적 DOM 조작

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

예: DOM 조작

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

<div id="container">
<script>
  document.write('<span style="color:red;">Hello</span>');
</script>
</div>

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

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 = '<span style="color:red;">Hello</span>';

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

위 내용은 비동기식으로 로드된 스크립트에서 document.write()가 제한되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!