집 > 기사 > 웹 프론트엔드 > JS에서 document.write() 사용법과 삭제 이유에 대한 간략한 분석

JS에서 document.write() 사용법과 삭제 이유에 대한 간략한 분석

小云云원래의: 2017-12-06 11:26:292867검색

가끔 그런 상황이 발생합니다. 즉, 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()은 지금은 호출되지 않습니다. 이 함수는 새 문서 스트림을 생성하므로 덮어쓰지 않습니다. 일부 친구는 다음 방법이 여전히 작동하지 않는 이유를 물을 수 있습니다. 코드는 다음과 같습니다.

위의 document.close()를 사용하면 문서 흐름이 닫힙니다. 안타깝게도 문서 스트림은 브라우저에 의해 생성되며 허가 없이는 수동으로 닫을 수 없습니다. document.close() 함수는 document.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>

document.open()으로 생성된 문서 스트림은 document.close()로 닫힐 수 있으며, 두 번째 document.write()로 출력되는 콘텐츠는 다음과 같습니다. 덮어쓰기 첫 번째 출력 내용입니다.

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

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

JS에서 document.write() 사용법과 삭제 이유에 대한 간략한 분석

<!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.write() can 또한 스크립트 태그의 문자열을 포함하는 파일을 작성하지만 이스케이프해야 합니다. 스크립트 태그에 작성된 내용은 정상적으로 실행됩니다.

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

위 내용은 JS에서 document.write()의 사용법과 이를 삭제하는 이유에 대한 간략한 분석입니다. 모두에게 도움이 되기를 바랍니다.

먼저 권장 사항:

js document.write() 사용법 소개_javascript 기술

document.write() 및 출력 콘텐츠 스타일 및 위치 control_javascript 기술

코드 생성기 문서 write()_javascript 기술

document.open() 및 document.write()_기본 지식

document.write() 및 HTML4.01의 짝이 없는 태그에 대한 자세한 설명_기본 지식

위 내용은 JS에서 document.write() 사용법과 삭제 이유에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：비동기 이미지 업로드 방법의 자바스크립트 구현 예다음 기사：비동기 이미지 업로드 방법의 자바스크립트 구현 예