Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

window.showModalDialog() 파라미터에 대해서 덧붙이자면.. 본문

Web publishing/JavaScript

window.showModalDialog() 파라미터에 대해서 덧붙이자면..

BeOne 2008. 5. 6. 16:09

window.showModalDialog()에 대한 설명을 처음 찾아보았을 때 부터 생각한건데..
새롭게 열린 popup창이 닫히기 전까지 부모창이 비활성화 되는거 말고는
별 메리트도 없는데 굳이 window.open()을 안 쓰고.. window.showModalDialog()를
쓰느냐는 것이었어..

하지만.. 사용하다보니.. modal 팝업의 가장 큰 merit는 역시..
파라미터를 주고 받는데 있는 것이었어..
네이버를 뒤져보아도.. 파라미터 주고 받는 부분에 대한 설명은 거의 없더라 이 말이지..

자바, jsp로 된 코드라면..
뭐.. request.getParameter()나 쎄쎤을 이용한다거나.. 쉽게 파라미터를 페이지 간에..
주고 받을 수 있겠지만.. html로만 이루어진 페이지 간에 파라미터를 주고 받는건
쉽게 생각할 문제가 아니더란 말이지..

예를 들어볼게..

먼저.. 부모창.. opener가 되는 A.html 페이지와 popup창이 되는 B.html 페이지가 있을때..

A.html에서 B.html로 파라미터를 넘겨주는 방법으로는
get 방식을 이용해서.. 물음표 뒤에 주렁주렁 달고 가는 방법을 생각해 볼 수 있겠지..

A.html
-------------------------
test1 = "우종성";
test2 = "뒹굴기";
window.open("B.html?name="+test1+"&hobby="+test2,"페이지 별칭","옵션");
-------------------------


B.html
-------------------------
function window.getParameter(p) {
  if (p) r=location.search.match(new RegExp("[&?]"+p+"=(.*?)(&|$)"));
  return r&&r[1]?r[1]:null;
}
-------------------------
이런 함수로.. get방식으로 넘어온 파라미터를 받아줄 수가 있어..

alert(getParameter("name")); 로 확인 해보면.. 우종성
alert(getParameter("hobby")); 로 확인 해보면.. 뒹굴기

또는
B.html
-------------------------
function getParameter(Name)
{
    var Request = window.location.search ;
    var RequestValue = null;
    var Offset = -1;
    var End = -1;

    Name += "=";
    Offset = Request.indexOf(Name);
    if (Offset >= 0)
    {
      End = Request.indexOf("&", Offset);
      if (End < 0)
      {
        End = Request.length;
      }
      RequestValue = Request.substring(Offset + Name.length, End);
    }
    return (RequestValue);
}
---------------------------
역시 똑같은 기능을 하는 함수야..

alert(getParameter("name")); 로 확인 해보면.. 우종성
alert(getParameter("hobby")); 로 확인 해보면.. 뒹굴기


그럼.. modal로 된 팝업창에선.. 어떻게 파라미터를 주고 받느냐..


function modal_pop() {
    window.showModalDialog("B.html",obj,"옵션");
}

- obj가 들어가있는 자리가 파라미터가 들어가는 자리야..
  string 뿐만 아니라.. object형식을 던져줄 수도 있고, window 객체 자체를 던져줄 수도 있어..
  예를 들면.. 


A.html
-----------------------------
function modal_pop() {
    var name = "우종성";
 var hobby = "뒹굴기";
 var age = "베스킨라빈스 ~";
 var gender = "언니지만 남자";

    var obj = new paramObject(window,name,age,hobby,gender);

    window.showModalDialog("B.html",obj,"옵션");
}

function paramObject(WinObject, name, age, hobby, gender) {
    this.WinObject = WinObject;
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.gender = gender;
}
--------------------------------

B.html
--------------------------------
var opener = window.dialogArguments;
--------------------------------
alert(opener.name); 으로 확인 해보면.. 우종성
alert(opener.hobby); 로 확인해보면.. 뒹굴기

이렇게 가져다 쓸 수 있게 되는거지..

쫌 폼나게 받아볼까?

B.html
---------------------------------
function getParameter() {
    var e, e1;
    try {
        sData   = dialogArguments;
        argObj  = sData;
        openedState = "Dialog";
    } catch(e) {
        if(e == "[object Error]") {
            try {
                sData  = window.opener;
                argObj = sData;
                openedState = "Instance";
            } catch(e1) {
                if (e1 == "[object Error]") {
                    alert("못 열어~");
                    window.close();
                }
            } // end of catch e1
        }
    } // end of catch e
-------------------------------------
alert(argObj.name); 으로 확인 해보면.. 우종성

파라미터 개수가 엄청 많아서.. 물음표 뒤에.. 주렁주렁 매달고 가는게 보기 싫다거나
get 방식이므로.. 정보누출이 염려될땐.. 확실히 modal 사용하는 게 좋을것 같지?

하지만.. modal 팝업창의 가장 쓸만하다고 생각하는 기능은..

자식창으로 파라미터를 넘겨주고.. 자식창에서.. 그 파라미터로 조회된 값을 수정했다고 가정하면
수정된 정보를 다시 부모창으로 넘겨 주는것 역시 간단하게 가능하단 얘기지..

A.html
-----------------------------
function modal_pop() {
    retVal = window.showModalDialog("B.html",window,"옵션");

    alert(retVal);
}
-------------------------------

B.html
-------------------------------
<script language="JavaScript">
function set_retValue() {
    var result = "잘 생겼다~ 멋지다~!"
 window.returnValue = result;
}
</script>
<body onUnLoad="set_retValue()">
-------------------------------

모달 popup 창이 닫히면.. A.html에서 alert(retVal)이 실행되면서
잘 생겼다~ 멋지다~!  를 볼 수 있는거지..

부모창으로 넘겨줄 파라미터 값이 많다면..
역시 그 파라미터들 전부 object에 담아서 넘겨줄 수도 있어..

A.html
-----------------------------
function modal_pop() {
    retVal = window.showModalDialog("B.html",window,"옵션");

    alert(retVal.name+"\n"+retVal.hobby+"\n"+retVal.age);
}
------------------------------


B.html
-------------------------------
<script language="JavaScript">
function set_retValue() {
    var name = "우종성";
    var hobby = "뒹굴기";
    var age = "베스킨 라빈스~"
    var result = new retObj(name, hobby, age);
    window.returnValue = result;
}

 

function retObj(name, hobby, age) {

    this.name = name;

    this.hobby = hobby;

    this.age = age;

}

</script>
<body onUnLoad="set_retValue()">
-------------------------------

모달 popup창 B.html이 닫히면..
A.html에서 alert(retVal.name+"\n"+retVal.hobby+"\n"+retVal.age); 이 실행되면서
우종성
뒹굴기
베스킨 라빈스~
를 확인할 수 있게 되는거야..


제대로 설명이 되어 있는건지.. 이 글만 보고서.. 이해가 될지 잘 모르겠네..
뭐.. 혹시.. 이해 안되거나.. 질문있으면.. 주저하지 말고 바로~

 

'Web publishing > JavaScript' 카테고리의 다른 글

영문 소문자 입력시 대문자로 바로 변환하도록 구현하기  (0) 2008.08.14
SELECT BOX에서 선택된 OPTION의 VALUE와 TEXT를 모두 가져오는 방법  (0) 2008.08.01
iframe 값 넘기기  (0) 2007.12.31
iframe 태그 속성  (0) 2007.12.31
외국인등록번호 체크  (0) 2007.10.15
'Web publishing/JavaScript' Related Articles more