비동기 스크립트 로딩에서 document.write() 제한을 재정의하는 방법은 무엇입니까?

비동기 스크립트 로드: document.write() 제한 이해

스크립트를 비동기적으로 실행할 때 초기 페이지 로드 후에는 다음 사항이 필수적입니다. 문서 조작에 대한 제한 사항을 알고 있습니다. 콘솔 메시지에 명시된 바와 같이, "명시적으로 열리지 않는 한 비동기적으로 로드된 외부 스크립트에서 문서에 쓸 수 없습니다."

이는 해당 외부 스크립트 내에서 document.write()를 사용한다는 의미입니다. 스크립트 자체가 성공적으로 로드되더라도 로드된 스크립트는 문서에 효과적으로 쓰지 않습니다. 그 이유는 문서가 구문 분석되고 닫힌 후에 비동기 스크립트가 실행된다는 사실에 있습니다.

이 문제를 해결하려면 document.write()를 명시적인 DOM 조작으로 대체해야 합니다. 문서에 직접 작성하는 대신, 원하는 DOM 요소를 생성하고appendChild(), insertBefore()와 같은 메서드를 사용하거나 innerHTML 속성을 설정하여 문서에 추가하세요.

예를 들어 document를 사용하는 대신 인라인 스크립트의 .write():

<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);

또는 컨테이너에 다른 콘텐츠가 없는 경우 , innerHTML 속성을 직접 설정할 수 있습니다.

var container = document.getElementById("container");
container.innerHTML = '<span style="color:red;">Hello</span>';

이 지침을 따르면 "'문서'에서 '쓰기'를 실행하지 못했습니다" 오류가 발생하지 않고 비동기적으로 로드된 스크립트에서 DOM을 효과적으로 조작할 수 있습니다.

위 내용은 비동기 스크립트 로딩에서 document.write() 제한을 재정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!