집 > 기사 > 웹 프론트엔드 > JS에서 document.write() 사용법(자세한 튜토리얼)

JS에서 document.write() 사용법(자세한 튜토리얼)

亚连원래의: 2018-06-22 17:17:138542검색

이 글은 주로 JS에서의 document.write() 사용법과 클리어 이유에 대한 간략한 분석을 소개합니다. 필요한 친구들은 참고하면 됩니다.

아마도 많은 친구들이 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() 함수가 그 안에 있기 때문입니다. 즉, 이 함수가 실행될 때 문서 스트림이 닫히지 않습니다. 지금은 새 문서 스트림을 생성하기 위해 호출되므로 다루지 않습니다. 어떤 친구들은 왜 다음 방법이 작동하지 않느냐고 물을 수 있습니다. 코드는 다음과 같습니다:

<!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>

　위의 document.close()를 사용하여 문서 흐름을 닫았는데, 안타깝게도 문서를 덮어쓸 수 없는 이유는 무엇입니까? 흐름은 허가 없이 수동으로 생성되고 닫히므로 document.close() 함수는 document.open() 함수에 의해 생성된 문서 스트림만 닫을 수 있습니다. 다음 코드 예제를 보세요:

<!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>

　 document.open()에 의해 생성된 문서 스트림은 document.close()에 의해 닫힐 수 있으며, 두 번째 document.write()에 의해 출력된 콘텐츠는 첫 번째 document.write()에 의해 출력된 콘텐츠를 덮어씁니다. .

외부 JavaScript를 비동기적으로 참조하는 경우 먼저 document.open()을 실행하여 문서를 지운 다음 document.write()를 실행해야 합니다. 매개변수는 본문 내용 시작 부분에 작성됩니다.

　 document.open()을 먼저 실행하지 않고 document.write()를 직접 실행하면 유효하지 않으며 Chrome에 다음 메시지가 표시됩니다.

JS에서 document.write() 사용법(자세한 튜토리얼)

// asyncWrite.js
document.open();
document.write(&#39;<p>test</p>&#39;);
document.close();
<!-- asyncWrite.html -->
<!-- 运行前 -->
<body>
  <script src="asyncWrite.js" async></script>
</body>
<!-- 运行后 -->
<body>
  <p>test</p>
</body>

　 Document.write()는 다음을 포함하는 문자열을 쓸 수도 있습니다. script 태그를 삭제해야 합니다. 스크립트 태그에 작성된 내용은 정상적으로 실행됩니다.

<!-- 运行前 -->
<script>
  document.write(&#39;<script>document.write("<p>test</p>");<\/script>&#39;);
</script>
<!-- 运行后 -->
<script>
  document.write(&#39;<script>document.write("<p>test</p>");<\/script>&#39;);
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>

document.write()는 여러 매개변수를 전달할 수 있습니다.

<!-- 运行前 -->
<body>
  <script>
    document.write(&#39;<h2>multiArgument</h2>&#39;,&#39;<p>test</p>&#39;);
  </script>
</body>
<!-- 运行后 -->
<body>
  <script>
    document.write(&#39;<h2>multiArgument</h2>&#39;,&#39;<p>test</p>&#39;);
  </script>
  <h2>multiArgument</h2>
  <p>test</p>
</body>

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

JS에서 document.write() 사용법(자세한 튜토리얼)

관련 기사