>웹 프론트엔드 >JS 튜토리얼 >document.write_javascript 기술 사용에 대한 몇 가지 팁

document.write_javascript 기술 사용에 대한 몇 가지 팁

WBOY
WBOY원래의
2016-05-16 16:48:251208검색

저는 document.write() 메소드를 사용하여 브라우저에 데이터를 표시하고 이를 Alert()로 사용하고 있습니다. 이 메소드의 주요 용도에 대해 이야기해 보겠습니다.

document.write() 메서드는 두 가지 방법으로 사용할 수 있습니다.

1. 페이지 로딩 프로세스 중에 스크립트를 사용하여 새 페이지 콘텐츠를 추가합니다.

2. 지연 스크립트를 사용하여 이 창이나 새 창의 내용을 만듭니다.

이 방법에는 창이나 프레임에 기록되는 HTML 콘텐츠인 문자열 매개변수가 필요합니다. 이러한 문자열 매개변수는 값이 문자열인 변수 또는 표현식일 수 있으며 작성된 내용에는 HTML 마크업 언어가 포함되는 경우가 많습니다. 다음 코드에서 볼 수 있듯이 교육 시스템 프레임워크가 하위 페이지

에 로드됩니다.

코드 복사 코드는 다음과 같습니다.

<--프레임을 셀 -->
       
  
                                                               >
& lt;/span>







코드 복사
코드는 다음과 같습니다.

페이지를 로드한 후 브라우저 출력 스트림이 자동으로 닫힙니다. 그런 다음 현재 페이지에서 작동하는 document.write() 메서드는 새 출력 스트림을 열어 현재 페이지 내용(소스 문서의 모든 변수 또는 값 포함)을 지웁니다. 따라서 현재 페이지를 스크립트에서 생성된 HTML로 바꾸려면 HTML 콘텐츠를 연결하여 변수에 할당하고 document.write() 메서드를 사용하여 쓰기 작업을 완료해야 합니다.

document.write() 메서드에 대해 또 하나 주목해야 할 점은 관련 메서드 document.close()입니다. 스크립트가 창(이 창이든 다른 창이든)에 콘텐츠 쓰기를 마친 후에는 출력 스트림을 닫아야 합니다. 지연 스크립트의 마지막 document.write() 메서드 뒤에 document.close() 메서드가 포함되어 있는지 확인해야 합니다. 그렇지 않으면 이미지와 양식을 표시할 수 없습니다. 또한 document.write() 메서드에 대한 후속 호출은 페이지에 내용을 추가하기만 하고 새 값을 쓰기 위해 기존 내용을 지우지는 않습니다.

document.write() 메소드를 시연하기 위해 동일한 애플리케이션의 두 가지 버전을 제공합니다. 하나는 스크립트가 포함된 문서에 쓰고, 다른 하나는 별도의 창에 씁니다.

예제 1에서는 새 문서 제목에 대한 HTML 태그와 태그에 대한 색상 속성을 포함하여 문서에 대한 새로운 HTML 콘텐츠를 조합하는 버튼을 만듭니다.

예제에는 독자들에게 생소한 = 연산자가 있습니다. 오른쪽의 문자열을 왼쪽의 변수에 추가하는 것입니다. 이 변수는 문자열을 여러 개 쉽게 변환할 수 있습니다. . 개별 명령문은 긴 문자열로 결합됩니다. newContent 변수의 내용과 결합된 document.write() 문을 사용하여 모든 새 내용을 문서에 쓸 수 있으며, 예제 1의 내용을 완전히 지울 수 있습니다.

그런 다음 document.close() 문을 호출하여 출력 스트림을 닫아야 합니다. 문서가 로드되고 버튼을 클릭하면 결과적으로 브라우저 제목 표시줄의 문서 제목이 변경됩니다. 원본 문서로 돌아가서 버튼을 다시 클릭하면 원본 문서를 다시 로드하는 것보다 동적으로 작성된 두 번째 페이지가 훨씬 빠르게 로드되는 것을 확인할 수 있습니다.

예제 1은 현재 창에서 document.write()를 사용합니다.

코드 복사 코드는 다음과 같습니다.

같은 문서에 쓰기