js_basic 지식의 document.write에 관한 것
- WBOY원래의
- 2016-05-16 16:27:281611검색
페이지가 로드된 후 브라우저 출력 스트림이 자동으로 닫힙니다. 그런 다음 현재 페이지에서 작동하는 document.write() 메서드는 새 출력 스트림을 열어 현재 페이지 내용(소스 문서의 모든 변수 또는 값 포함)을 지웁니다. 따라서 현재 페이지를 스크립트에서 생성된 HTML로 바꾸려면 HTML 콘텐츠를 연결하여 변수에 할당하고 document.write() 메서드를 사용하여 쓰기 작업을 완료해야 합니다. 문서를 지우고 새 데이터 스트림을 여는 대신 단일 document.write() 호출로 모든 작업을 수행할 수 있습니다.
document.write() 메서드에 대해 주목해야 할 또 다른 사항은 관련 메서드 document.close()입니다. 스크립트가 창(이 창이든 다른 창이든)에 콘텐츠 쓰기를 마친 후에는 출력 스트림을 닫아야 합니다. 지연 스크립트의 마지막 document.write() 메서드 뒤에 document.close() 메서드가 포함되어 있는지 확인해야 합니다. 그렇지 않으면 이미지와 양식을 표시할 수 없습니다. 또한 document.write() 메서드에 대한 후속 호출은 페이지에 내용을 추가하기만 하고 새 값을 쓰기 위해 기존 내용을 지우지는 않습니다. document.write() 메서드를 시연하기 위해 동일한 애플리케이션의 두 가지 버전을 제공합니다. 하나는 스크립트가 포함된 문서에 쓰고, 다른 하나는 별도의 창에 씁니다. 텍스트 편집기에 각 문서를 입력하고 .html 파일 확장자로 저장한 다음 브라우저에서 문서를 엽니다.
예제 1에서는 새 문서 제목의 HTML 태그와 태그의 색상 속성을 포함하여 문서의 새 HTML 콘텐츠를 조합하는 버튼을 만듭니다. 예제에는 독자에게 생소한 = 연산자가 있습니다. 오른쪽의 문자열을 왼쪽의 변수에 추가하는 것입니다. 이 변수는 문자열을 저장하는 데 사용됩니다. 이 연산자는 여러 개의 개별 명령문을 쉽게 결합할 수 있습니다. 긴 끈. newContent 변수에 결합된 콘텐츠를 사용하여 document.write() 문은 모든 새 콘텐츠를 문서에 쓸 수 있으며 예제 1의 콘텐츠를 완전히 지울 수 있습니다. 그런 다음 document.close() 문을 호출하여 출력 스트림을 닫아야 합니다. 문서가 로드되고 버튼을 클릭하면 결과적으로 브라우저 제목 표시줄의 문서 제목이 변경됩니다. 원본 문서로 돌아가서 버튼을 다시 클릭하면 원본 문서를 다시 로드하는 것보다 동적으로 작성된 두 번째 페이지가 훨씬 빠르게 로드되는 것을 확인할 수 있습니다.
예제 1은 현재 창에서 document.write()를 사용합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>
<script language="JavaScript">
function reWrite(){
// assemble content for new window
var newContent = "<html><head><title>A New Doc</title></head>"
newContent += "<body bgcolor='aqua'><h1>This document is brand new.</h1>"
newContent += "Click the Back button to see original document."
newContent += "</body></html>"
// write HTML to new window document
document.write(newContent)
document.close() // close layout stream
}
</script>
</head>
<body>
<form>
<input type="button" value="Replace Content" onClick="reWrite()">
</form>
</body>
</html>
예제 2에서는 스크립트가 생성한 전체 문서가 작성될 하위 창을 생성하기 때문에 상황이 다소 복잡합니다. 두 함수 모두에서 새 창에 대한 참조를 활성 상태로 유지하려면 newWindow 변수를 전역 변수로 선언합니다. 페이지가 로드되면 onLoad 이벤트 핸들러는 빈 하위 창을 생성하는 makeNewWindow() 함수를 호출합니다. 또한 window.open() 메서드의 세 번째 매개변수에 속성을 추가하여 하위 창의 상태 표시줄을 표시합니다.
페이지의 버튼은 subWrite() 메서드를 호출합니다. 이 메서드가 수행하는 첫 번째 작업은 하위 창의 닫힌 속성을 확인하는 것입니다. 이 속성(최신 브라우저 버전에만 있음)은 참조 창이 닫히면 true를 반환합니다. 이런 경우(사용자가 수동으로 창을 닫은 경우) 함수는 makeNewWindow()를 다시 호출하여 해당 창을 다시 엽니다.
창이 열린 후 새로운 내용이 문자열 변수로 결합됩니다. 예제 1에서와 같이 내용이 한 번 기록되고(별도의 창에는 필요하지 않지만) close() 메서드가 호출됩니다. 그러나 중요한 차이점에 유의하세요. write() 및 close() 메서드는 모두 자식 창을 명시적으로 지정합니다.
예제 2 다른 창에서 document.write() 사용
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Subwindow</title>
<script language="JavaScript">
var newWindow
function makeNewWindow(){
newWindow = window.open("","","status,height=200,width=300")
}
function subWrite(){
// make new window if someone has closed it
if(newWindow.closed){
makeNewWindow()
}
// bring subwindow to front
newWindow.focus()
// assemble content for new window
var newContent = "<html><head><title>A New Doc</title></head>"
newContent += "<body bgcolor='coral'><h1>This document is brand new.</h1>"
newContent += "</body></html>"
// write HTML to new window document
newWindow.document.write(newContent)
newWindow.document.close() // close layout stream
}
</script>
</head>
<body onLoad="makeNewWindow()">
<form>
<input type="button" value="Write to Subwindow" onClick="subWrite()">
</form>
</body>
</html>