편집용 iframe창에 스타일 지정하는 방법
편집용 iframe창에 스타일 지정하는 방법
프레임창에 스타일을 지정하기 위해서는 스타일 코드를 document.writｅ() 메소드를 사용하여 작성해야 한다. 스타일 선언부터 스타일 내용을 프레임창에 작성하는 방법으로 프레임창에 스타일을 지정한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- *************************************************************
편집 프레임을 두 개 생성하고, 하나는 기본 스타일을 정의하고
하나는 스타일을 정의 하지 않고 글을 써보자. 차이점을 알아보기
************************************************************** -->
<script type="text/javascript">
function initEditor(){
Editor0 = document.getElementById("styleIframe").contentWindow.document;
Editor1 = document.getElementById("normalIframe").contentWindow.document;
Editor0.designMode='on';
Editor1.designMode='on';
/* 편집 모드에 기본 스타일을 정의하기 */
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();
}
</script>
<title>Insert title here</title>
</head>
<body>
<a href="#" onclick="initEditor();return false;"> 아이프레임을 편집모드로</a><br>
<iframe id="styleIframe"></iframe>
<iframe id="normalIframe"></iframe>
</body>
</html>
[결과] : 익스플로러6에서 나타난 결과
