'innerhtml'에 해당되는 글 7건

  1. 2010.03.18 기본적인 자바 스크립트로 웹브라우저를 통하여 인쇄하는 방법 (2)
  2. 2010.02.22 Ajax 를 유사하게 여러번 호출하는 경우 소스 단순하게 만들기 (2)
  3. 2010.02.08 div 에 Ajax 로 태그들을 넣을때, 넣어지는 쪽에 div 나 span 이 1 레벨로 들어 있으면 IE 에서 알수 없는 런타임 오류 (1)

기본적인 자바 스크립트로 웹브라우저를 통하여 인쇄하는 방법

|

인쇄할 영역을 선정한 다음, doPrint.jsp 를 호출하여 인쇄.
window.open 이 아니라 iframe 안에 집어 넣고 window.print 인쇄하려 했는데,
window 를 print 하는 것이기 때문에 iframe 외부의 내용도 인쇄되어 문제.
post 방법으로 window 를 open 하기 위해 URL 을 주지 않고 먼저 오픈한 다음 submit 하였음.
인쇄용 CSS 가 있다면 파라미터로 넘겨 주든지 doPrint.jsp 에 기술.
웹브라우저에 따라 헤어와 푸터 부분에 예기치 않은 문자열이 인쇄될 수 있으므로 유의.
파라미터 방식이 아니라 opener 개체를 이용하여 해당 값을 가져올 수 있다.
이 경우에는 doPrint.jsp 의 window.print() 함수가 호출되기 전에
인쇄 내용을 document.write() 한다.

 

인쇄하는 쪽에서는 아래와 같은 코드 체계를 유지.

 ...

<form name="frmBasic" method="post">

<input type="hidden" name="printObject">

<input type="hidden" name="cssFilespec">

 ...

<div id="id4Print" >이곳에 필요한 내용을 집어 넣는다</div>

 ...

</form>

 ...


<script>
<!--

function goPrint(){

    var o = window.open('','targetChild','width=800,height=600');             // id4Print 에 담기는 내용에 맞게 사이즈 조정

    var f = document.forms['frmBasic'];

    f.action = '/kr/common/doPrint.jsp';

    f.cssFilespec.value = '/kr/SkyAdm/common/resno/defaultCss.jsp';     // 인쇄용 CSS 적용

    f.printObject.value = document.getElementById('id4Print').innerHTML; // 인쇄할 곳

    f.target = 'targetChild';

    f.submit();

}

< /script >




<%--
  * 프로그램 명칭 : doPrint.jsp
  * 프로그램 설명 : 인쇄
  * 작업일/작업자 : 100318 OOO, 최초 설치
--%>
<%
 String  printObject = request.getParameter("printObject");       // 이런 부분은 상황에 맞게 조정
 String  cssFilespec = request.getParameter("cssFilespec");   // 이런 부분은 상황에 맞게 조정
 if(printObject==null || cssFilespec==null) return;
%>
<html>
<head>
<title>인쇄</title>
<jsp:include page="<%= cssFilespec %>" flush="true" />
<script>
<!--
function doPirntMe(){
 window.print();
}
//-->
</script>
</head>
<body leftMargin="0" topMargin="0" onLoad="doPirntMe()">
<div style="width:800px" id="printObject"><%= printObject %></div>
</body>
</html>

Trackback 0 And Comment 2
  1. Favicon of http://www.arongabong.com BlogIcon 박수근 2011.12.08 11:27 address edit & del reply

    좋은내용 감사합니다. 담아갈께요~

  2. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2011.12.15 08:48 신고 address edit & del reply

    찾아보시면 더 좋은 방법이 많이 있을 듯 합니다. ^^ㅠ

Ajax 를 유사하게 여러번 호출하는 경우 소스 단순하게 만들기

|



JQuery 나 기타 등등의 라이브러리를 사용하는 방식이 아니라 간단하게 Ajax 를 구현하는 경우,
각각의 기능을 자바스크립트 함수로 만들때 마다 반복되게 하지 않고 한번만 정의하는 방법을 소개한다.

doAjax 라는 함수를 두어서 Ajax 로 호출될 URL 과 파라미터, Ajax 성공시 호출될 함수명을 기술.
파라미터가 더 필요한 경우 arguments 를 이용하여 전달. arguments[0] 는 첫번째 파라미터..
goWhere 함수는 페이지 전환을 대신할 Ajax 호출.
goWhere 함수가 doAjax 호출하면, Ajax 성공시 파라미터로 넘어온 함수명 doAfterAjax 를 호출.

01 function doAjax(u,p,f){
02  var args = doAjax.arguments;
03  var xmlHttp = getXmlHttpRequest();
04  xmlHttp.open("POST", u, false); // POST 방식, GET 방식 선택
05  xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=euc-kr'); // EUC-KR
06  xmlHttp.setRequestHeader('Cache-Control','no-cache,must-revalidate'); // 캐시 없앰
07  xmlHttp.setRequestHeader('Pragma','no-cache'); // 캐시 없앰
08  xmlHttp.onreadystatechange = function() {
09   if(xmlHttp.readyState==4){
10    if(xmlHttp.status==200){
11     window[f](args[3], xmlHttp); // args[3] 은 4번째 파라미터를 의미, xmlHttp 는 Ajax 결과물
12    }
13   }
14  }
15  xmlHttp.send(p); // get 방식이면 p 대신 null
16 }
17
18
19 function goWhere(where){
20  var url, params;
21  if(where=='AA') url = '...';
22  else if(where=='BB'){
23   url = '...';
24   params = '';
25  }else if(where=='CC') url = '...';
26  else if(where=='DD') url = '...';
27
28  doAjax(url,params,'doAfterAjax',where);
29 }
30
31
32 function doAfterAjax(where,xmlHttp){
33  if(where=='AA'){
34   document.getElementById('idContent1').innerHTML = xmlHttp.responseText;
35  }
36 }

Trackback 0 And Comment 2
  1. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.02.24 23:13 신고 address edit & del reply

    JQuery 사용하면 될텐데.. 왜 기본적인 Ajax 도구를 구태여 설명하느냐 하시는 분 계신데요..
    시스템이 하나 뿐이면 그 말이 맞습니다.
    그런데, 전산실에 시스템이 하나가 아니지요. 굉장히 다양한 서버들이 즐비합니다.
    이들 서버들에 모두 동일한 JQuery 가 동작한다고 생각하는 건 아니겠죠..?
    때로는 하나의 물리적인 머신 안에 여러가지 웹서비스가 돌아갈 수도 있지요.
    그 외에도 여러 F/W 이 존재하는 경우,
    그들 간에 조정을 하려면 역시나 기본적인 Ajax 가 효자 노릇을 합니다.
    역시나 무엇이든 기본기가 중요합니다.

  2. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.03.04 14:07 신고 address edit & del reply

    function getXmlHttpRequest(){
    var xmlhttp = false;
    try{
    xmlhttp = new XMLHttpRequest(); // for FireFox, Opera 8+, Safari, IE 7+
    }catch(e){
    try{
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); // for IE 6+
    }catch(e){
    try{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // for IE 5.5+
    }catch(e){
    }
    }
    }
    return xmlhttp;
    }

    function doAjaxBasic(u,p,f,c){ // f Ajax 수행후 호출되는 함수
    var args = doAjaxBasic.arguments;
    var xmlHttp = getXmlHttpRequest();
    xmlHttp.open("POST", u, false);
    xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=euc-kr');
    xmlHttp.setRequestHeader('Cache-Control','no-cache,must-revalidate'); // 캐시 제거
    xmlHttp.setRequestHeader('Pragma','no-cache'); // 캐시 제거
    xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
    window[f](xmlHttp, c);
    }
    }
    }
    xmlHttp.send(p); // GET 방식이면 null
    }


    위와 같이 설정하고, 실제로 Ajax 호출시 아래와 같이 이용.
    function goWhere(w){
    var f = ...;
    var url = '...';
    var params = 'where=' +w;
    f.where.value = w;

    doAjaxBasic(url,params,'doAfterAjax');
    }

    function doAfterAjax(xmlHttp){
    // 파라미터를 되넘겨 받으려면, var args = doAfterAjax.arguments; 하여 args[1] 을 체크
    document.getElementById('idContent1').innerHTML = xmlHttp.responseText;
    }

    자바스크립트 함수는 정의된 곳의 파라미터 갯수가 호출하는 쪽 보다 적어도 오류는 없으니까.. doAfterAjax(xmlHttp) 나 doAfterAjax(xmlHttp,condition) 이나 상관없어요.

div 에 Ajax 로 태그들을 넣을때, 넣어지는 쪽에 div 나 span 이 1 레벨로 들어 있으면 IE 에서 알수 없는 런타임 오류

|

a.jsp 가 아래와 같이 구성되어 있다 하자.
<div id="idA" ...>...</div>

이곳에 Ajax 를 통해 b.jsp 를 idA 의 innerHTML 로 넣을때 b.jsp 에 아래와 같은 코드가 있으면 IE 에서 런타임 오류 발생.
<div ...>...</div>
<span ...>...</span>

그런데 오류가 났던 동일한 div 나 span 태그를 table 태그로 감싸주면 오류가 나지 않는다
<table><tr><td>
  <div ...>...</div>
  <span ...>...</span>
</td></tr></table>

왜 그런걸까..?
table 대신에 다른 div 나 span 을 사용해도 마찬가지로 에러..
ul/ol 과 li 조합으로 해도 에러..
dl 과 dt, dd 로 해도 에러..

다른 웹브라우저에서도 에러가 날까..?
Trackback 0 And Comment 1
  1. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.02.08 12:00 신고 address edit & del reply

    대체로는 먹어야 하는 코드인데,
    아무래도 일시적인 PC 이상이거나 IE 의 마이너 버전 상의 오류, 또는 다른 프로그램과의 간섭현상..?
    암튼, 잘 안 될때 table 태그로 감싸니까 오류가 없어졌다는 사실..

prev | 1| 2| 3 | next