편집용 iframe창에 작성된 내용 textarea로 복사 방법
<iframe> 창 안에 작성한 내용을 textarea 필드에 복사할 때는 프레임창에 innerHTML 속성을 이용하여 값을 가져오면 textarea의 value 속성에 가져온 값을 저장해 값을 복사한다.
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<!-- *************************************************************
iframe 하나와 textarea 필드 하나씩을 생성하여 iframe에 입력한 값을
textarea에서 보여주는 코드
************************************************************** -->
<script type="text/javascript">
// 창이 열리자 마자 iframe 을 편집모드로 전환하는 방법
window.onload=function initEditor(){
Editor0 = document.getElementById("styleIframe").contentWindow.document;
Editor0.designMode='on';
/* 편집 모드에 기본 스타일을 정의하기 */
/* 기본적으로 textarea 에서 iframe의 내용을 볼 때 <head>태그(아래에 있는) 부분이 없어도 상관은 없다. */
Editor0.open();
Editor0.write("<html>");
Editor0.write("<head>");
Editor0.write("<style type=\"text/css\">")
Editor0.write("body { padding:0px; margin:5px; font-size:9pt; font-family:Dotum; }");
Editor0.write("td { font-size:9pt; font-family:Dotum; }");
Editor0.write("</style>");
Editor0.write("</head><body>");
Editor0.write("</body></html>");
Editor0.close();
}
/* iframe값을 textarea 로 옮겨주는 함수 */
function copy(){
form.textarea.value=styleIframe.document.body.innerHTML;
}
</script>
</head>
<body>
<br>
<form name="form">
<iframe id="styleIframe"></iframe>
<input type="button" value="내용보기" onclick="copy()">
<textarea name="textarea" cols="40" rows="10"></textarea>
</form>
</body>
</html>
[결과 화면]
'Java Script & DOM > HTML DOM' 카테고리의 다른 글
| HTML DOM(Document Object Model)이란? (0) | 2009.09.22 |
|---|---|
| WYSIWYG(위지윅) 에디터 제작 기초 (0) | 2009.08.25 |
| 마우스 오버시 이미지가 계속 커지게 하는 방법 (0) | 2009.08.18 |
| DHTML(Dynamic HTML) 이란 (0) | 2009.06.30 |
| 편집용 iframe창에 스타일 지정하는 방법 (0) | 2009.06.09 |