가끔 그런 상황이 발생합니다. 즉, document.write() 함수를 사용하여 웹 페이지에 내용을 쓸 때 문서의 원본 내용이 지워지는 경우가 있습니다. 이것이 초보자에게 문제가 되는 이유는 다음과 같습니다. 이러한 상황이 발생하며, 물론 이러한 상황이 발생하지 않도록 하는 방법도 알게 될 것입니다.
먼저 코드 예제를 살펴보겠습니다.
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ document.write("重温 JavaScript"); } </script> </head> <body> <p>Hello JavaScript</p> </body> </html>
위 코드에서 document.write() 함수가 원본 문서 내용을 지우는 것을 볼 수 있습니다. 다음은 그 이유에 대한 소개입니다.
window.onload 이벤트는 문서 내용이 완전히 로드된 후 이벤트 처리 기능을 실행하는 것입니다. 물론 이때 document.writ() 함수를 실행하면 자동으로 실행됩니다. document.open() 함수를 호출하여 새 문서 스트림을 생성하고 새 콘텐츠를 작성한 다음 브라우저를 통해 표시하면 원본 콘텐츠를 덮어씁니다. 그러나 많은 친구들은 여전히 다음과 같은 상황에서 원본 웹 페이지의 내용을 덮어쓰지 않는 이유에 대해 질문합니다.
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Document</title> <script type="text/javascript"> document.write("重温 JavaScript"); </script> </head> <body> <p>Hello JavaScript</p> </body> </html>
위 코드에서 원본 문서는 내용을 덮어쓰지 않습니다. 비어 있습니다. 이는 현재 문서 스트림이 브라우저에 의해 생성되고 document.wirte() 함수가 그 안에 있기 때문입니다. 즉, 이 함수가 실행될 때 문서 스트림이 닫히지 않고 문서입니다. open()은 지금은 호출되지 않습니다. 이 함수는 새 문서 스트림을 생성하므로 덮어쓰지 않습니다. 일부 친구는 다음 방법이 여전히 작동하지 않는 이유를 물을 수 있습니다. 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Document</title> <script type="text/javascript"> document.close(); document.write("重温 JavaScript"); </script> </head> <body> <p>Hello JavaScript</p> </body> </html>
외부 JavaScript를 비동기적으로 참조하는 경우 먼저 document.open()을 실행하여 문서를 지운 다음 document.write()를 실행해야 합니다. 매개변수는 본문 내용 시작 부분에 작성됩니다.
document.open()을 먼저 실행하지 않고 document.write()를 직접 실행하면 유효하지 않으며 Chrome에 다음과 같은 프롬프트가 표시됩니다.
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Document</title> <script type="text/javascript"> function create(){ var newWindow=window.open("","Document","_blank"); newWindow.document.write("Hello JavaScript"); newWindow.document.close(); newWindow.document.write("覆盖后的输出"); } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ create(); } } </script> </head> <body> <p id="print">Hello JavaScript</p> <input type="button" id="bt" value="查看效果"/> </body> </html>
// asyncWrite.js document.open(); document.write('<p>test</p>'); document.close(); <!-- asyncWrite.html --> <!-- 运行前 --> <body> <script src="asyncWrite.js" async></script> </body> <!-- 运行后 --> <body> <p>test</p> </body>
<!-- 运行前 --> <script> document.write('<script>document.write("<p>test</p>");<\/script>'); </script> <!-- 运行后 --> <script> document.write('<script>document.write("<p>test</p>");<\/script>'); </script> <script>document.write("<p>test</p>");</script> <p>test</p>
먼저 권장 사항:
document.write() 및 출력 콘텐츠 스타일 및 위치 control_javascript 기술
코드 생성기 문서 write()_javascript 기술
document.open() 및 document.write()_기본 지식
document.write() 및 HTML4.01의 짝이 없는 태그에 대한 자세한 설명_기본 지식
위 내용은 JS에서 document.write() 사용법과 삭제 이유에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!