나는 항상 document.write () 메소드를 사용하여 브라우저에 데이터를 표시하고 alert ()로 사용했습니다. 이런 종류의 사용은 약간의 소지가없는 것 같습니다. 주요 용도에 대해 이야기합시다.
Document.write () 메소드는 두 가지 측면에서 사용할 수 있습니다.
1. 페이지로드 프로세스 중에 스크립트와 함께 새 페이지 컨텐츠를 추가하십시오.
2. 지연 스크립트를 사용 하여이 창이나 새 창의 내용을 만듭니다.
이 메소드에는 문자열 매개 변수가 필요하며, 이는 창 또는 프레임에 작성된 HTML 컨텐츠입니다. 이 문자열 매개 변수는 문자열과 같은 값을 가진 변수 또는 표현식 일 수 있으며, 작성된 내용에는 종종 HTML 마크 업 언어가 포함됩니다. 다음 코드에서와 같이 학술 시스템 프레임 워크가 하위 페이지를로드합니다.
코드 사본은 다음과 같습니다.
<!-프레임을 셀에 넣습니다->
<span style = "font-size : 18px;">
<td valign = "top"id = "Content-container">
<div id = "로드">
// 효과 아이콘을로드합니다
<img src = "images /loading.gif" />
</div>
<script type = "text/javaScript">
// 프레임 워크를 형성하기 위해 js의 outputiframe 함수 호출
index.outputiframe ();
</스크립트>
</td>
</span>
코드 사본은 다음과 같습니다.
<span style = "font-size : 18px;"> // 출력 프레임
index.outputiframe = function () {
var scrolling = $ .isie6 == true? '예': '자동';
document.write ( '<iframe id = "content"marginwidth = "0"Marginheight = "0"Frameborder = "0"Scrolling = "' ' + scrolling +'"onload = "$ (/'#loading/').
};
</span>
페이지가로드되면 브라우저 출력 스트림이 자동으로 닫힙니다. 그런 다음 현재 페이지에서 작동하는 모든 word.write () 메소드가 새 출력 스트림을 열면 현재 페이지의 내용이 지워집니다 (소스 문서의 변수 또는 값 포함). 따라서 현재 페이지를 스크립트에서 생성 한 HTML로 바꾸려면 HTML 컨텐츠를 연결하고 변수에 할당하고 Document.Write () 메소드를 사용하여 쓰기 작업을 완료해야합니다.
Document.write () 메소드에 대해 설명해야 할 또 다른 사항은 관련 메소드 문서 .close ()입니다. 스크립트가 컨텐츠를 창에 쓴 후 (이 창 또는 다른 창에 관계없이) 출력 스트림을 닫아야합니다. 지연 스크립트의 마지막 문서 .write () 메소드 후에 문서 .close () 메소드가 포함되어 있는지 확인해야합니다. 그렇게하지 않으면 이미지와 양식을 표시 할 수 없습니다. 그리고 그 후에 호출 된 모든 vologe.write () 메소드는 기존 컨텐츠를 지우지 않고 새 값을 쓰지 않고 컨텐츠를 페이지에 추가합니다.
document.write () 메소드를 보여주기 위해 동일한 응용 프로그램의 두 버전을 제공합니다. 하나는 스크립트가 포함 된 문서에 내용을 작성하고 다른 하나는 별도의 창에 내용을 씁니다.
예 1은 새로운 문서 제목에 대한 HTML 태그와 태그의 색상 속성을 포함하여 문서의 새로운 HTML 컨텐츠를 결합한 버튼을 만듭니다.
예에서는 독자에게 익숙하지 않은 연산자 +=가 있습니다. 왼쪽의 변수에 오른쪽에 문자열을 추가합니다. 이 변수는 문자열을 저장하는 데 사용됩니다. 이 연산자는 여러 별도의 진술을 긴 문자열로 쉽게 결합 할 수 있습니다. NewContent 변수에 결합 된 document.write () 문을 사용하여 모든 새 컨텐츠를 문서에 작성하여 예제 1의 내용을 완전히 지 웁니다.
그런 다음 출력 스트림을 닫으려면 document.close () 문을 호출해야합니다. 문서를로드하고 버튼을 클릭 할 때 브라우저의 제목 표시 줄의 문서 제목이 결과적으로 변경되는 것을 알 수 있습니다. 원본 문서로 돌아가 버튼을 다시 클릭하면 두 번째 페이지가 원본 문서를 다시로드하는 것보다 동적으로 더 빠르게로드되는 것을 알 수 있습니다.
예 1 현재 창에서 document.write ()를 사용하십시오.
코드 사본은 다음과 같습니다.
<html xmlns = "http://www.w3.org/1999/xhtml"> <title> 동일한 doc </title>에 쓰기
<script language = "javaScript">
// 함수를 다시 작성하십시오
함수 repetwrite () {
// 서면 내용을 저장합니다
var newContent = "<html> <head> <title> 새로운 doc </title> </head>"
NewContent += "<body bgcolor = 'aqua'> <h1>이 문서는 새롭습니다. </h1>"
NewContent += "원본 문서를 보려면 뒤로 버튼을 클릭하십시오."
NewContent += "</body> </html>"
// 새 콘텐츠를 작성합니다
document.write (NewContent);
document.close ();
}
</스크립트>
</head>
<body>
<양식>
<!-버튼을 클릭하여 쓰기 기능을 호출하십시오->
<input type = "button"value = "content"onclick = "repeatwrite ()">
</form>
</body>
</html>
요약 :
최근에 문서를 사용하는 정적 리소스 로더를 작성하고 있습니다. 약간의 비틀기와 회전을 경험 한 후에는 문서에 여전히 콘텐츠가있는 것을 발견했습니다. 그래서 나는 무언가를 던지고 녹음하기로 결정했고, 동시에 나 자신을 위해 무언가를 축적하는 방법이기도합니다.