자바스크립트 부모창에서 자식창으로 값을 전달하기

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

 

출처: http://shonm.tistory.com/category/JAVASCRIPT/%EB%B6%80%EB%AA%A8%EC%B0%BD%EC%97%90%EC%84%9C%20%EC%9E%90%EC%8B%9D%EC%B0%BD%EC%9C%BC%EB%A1%9C%20%EA%B0%92%EC%A0%84%EB%8B%AC

자바스크립트 값 전달하기

1. 2009/03/28 자바스크립트 부모창에서 자식창으로 값을 전달하기

자바스크립트 부모창에서 자식창으로 값을 전달하기

JAVASCRIPT/부모창에서 자식창으로 값전달 2009/03/28 11:16

1. get 방식

부모창의 자바스크립트
function showMap(mapAddr){
 
 var f     =   document.form;
 f.mapAddr.value   =    encodeURL(mapAddr);
 
 window.open("showMap.jsp?mapAddr="+mapAddr,"","width=500,height=570");
}

이 방법을 써봤지만 이방법엔 치명적인 문제점 이있다. 한글 값일 경우 넘어갈때
왜인지 모르지만 깨진다는 것이다. URL encoding을 해도 마찬가지의 경우가
벌어졌다. 그래서 좀 더 발전적인 방법을 사용해 보았다.


2. post 방식

function showMap(mapAddr){
 
 var f     =   document.form;
 f.mapAddr.value   =    encodeURL(mapAddr);
 
 window.open("","child","width=500,height=570");
 
 f.target    =   "child";
 f.action    =   "showMap.jsp";
 f.submit();
}
//----------------------------------------------------
<form name="form" action="menu.jsp" method="post">
<input type="hidden" name="mapAddr">


자바 스크립트 코드를 아시는 분들이라면 금방 이해가 되실것이다.
한글 값을 input type=hidden 인 값에 넣고 post 방식으로 전달해 버린것이다
이러면 한글도 안깨지고 무난히 해결되었다.
정말 안되서 고생 고생하다 된거라 아마도 쉽게 안잊혀질 듯 하다.
혹시나 자바스크립트 url 인코딩 함수를 원하시는 분이 계실까봐 밑에 첨부한다.


//url 인코딩
function encodeURL(str){
    var s0, i, s, u;
    s0 = "";                // encoded str
    for (i = 0; i < str.length; i++){   // scan the source
        s = str.charAt(i);
        u = str.charCodeAt(i);          // get unicode of the char
        if (s == " "){s0 += "+";}       // SP should be converted to "+"
        else {
            if ( u == 0x2a || u == 0x2d || u == 0x2e || u == 0x5f || ((u >= 0x30) && (u <= 0x39)) || ((u >= 0x41) && (u <= 0x5a)) || ((u >= 0x61) && (u <= 0x7a))){       // check for escape
                s0 = s0 + s;            // don't escape
            }
            else {                  // escape
                if ((u >= 0x0) && (u <= 0x7f)){     // single byte format
                    s = "0"+u.toString(16);
                    s0 += "%"+ s.substr(s.length-2);
                }
                else if (u > 0x1fffff){     // quaternary byte format (extended)
                    s0 += "%" + (0xf0 + ((u & 0x1c0000) >> 18)).toString(16);
                    s0 += "%" + (0x80 + ((u & 0x3f000) >> 12)).toString(16);
                    s0 += "%" + (0x80 + ((u & 0xfc0) >> 6)).toString(16);
                    s0 += "%" + (0x80 + (u & 0x3f)).toString(16);
                }
                else if (u > 0x7ff){        // triple byte format
                    s0 += "%" + (0xe0 + ((u & 0xf000) >> 12)).toString(16);
                    s0 += "%" + (0x80 + ((u & 0xfc0) >> 6)).toString(16);
                    s0 += "%" + (0x80 + (u & 0x3f)).toString(16);
                }
                else {                      // double byte format
                    s0 += "%" + (0xc0 + ((u & 0x7c0) >> 6)).toString(16);
                    s0 += "%" + (0x80 + (u & 0x3f)).toString(16);
                }
            }
        }
    }
    return s0;
}

 

 

 

=================================

=================================

=================================

 

 

출처: http://www.soonbo.com/zbxe/?document_srl=2991


① 부모창 (openwin.php)

<SCRIPT LANGUAGE="JavaScript">
function owin() {
str_id=f.id.value;
str_name=f.name.value;
nw=window.open("newwin.php?id="+str_id+"&name="+str_name+"&age=20","nwin","width=300,height=300,left=500,top=100, resizable");
};

function owin1(str) {
str_id=f.id.value;
str_name=f.name.value;
nw=window.open("newwin.php?id="+str_id+"&name="+str_name+"&age=20&str="+str,"nwin","width=300,height=300,left=500,top=100, resizable");
};
</SCRIPT>
부모창<br>
<br>
<br>
<form name="f">
<input type="hidden" name="name" value="홍길동">
ID : <input type="text" name="id">
<input type="button" value="자식창에 값 전달" onClick="owin();">
</form>
<br>
<A HREF="javascript:owin(">자식창에 값 전달 1</A>  |  
<A HREF="javascript:owin1('abc')">자식창에 값 전달 2</A>



② 자식창 (newwin.php)

<SCRIPT LANGUAGE="JavaScript">
function send1() {
        opener.f.id.value=nf.id.value;  //부모창에 값 전달
        self.close();  //팝업창 닫기①
        //window.close();  //팝업창 닫기②
}
function send2() {  //부모 페이지를 새로운 페이지로 이동
        opener.location.href="nf.url.value;
        window.close();
}
function send3() {  //부모 페이지를 새로고침
        //opener.location.href="openwin.php";
        opener.location.reload();
}
</SCRIPT>
자식창<br>
<?
$id=$_GET["id"];
$name=$_GET["name"];
$age=$_GET["age"];
$str=$_GET["str"];
?>

<TABLE border="0" cellspacing="1" cellpadding="1" width="150">
<TR>
        <TD width="75" bgcolor="#99FFFF">ID</TD>
        <TD width="75" bgcolor="#99FFFF"><?=$id?></TD>
</TR>
<TR>
        <TD bgcolor="#99FFFF">NAME</TD>
        <TD bgcolor="#99FFFF"><?=$name?></TD>
</TR>
<TR>
        <TD bgcolor="#99FFFF">AGE</TD>
        <TD bgcolor="#99FFFF"><?=$age?></TD>
</TR>
<TR>
        <TD bgcolor="#99FFFF">STR</TD>
        <TD bgcolor="#99FFFF"><?=$str?></TD>
</TR>
</TABLE>
<br>
<form name=nf>
<input type="text" name="url" value="http://">
<input type="button" value="부모창바꾸기" onclick="send2();">
<br>
<input type="text" name="id">
<input type="button" value="부모창에 값 전달" onclick="send1();">
<br>
<input type="button" value="부모창 새로고침" onclick="send3();">
</form>

 

 

=================================

=================================

=================================

 

 

출처: http://hoons.kr/board.aspx?Name=QAASPNET&BoardIdx=8824&Page=1&Mode=2

http://www.hoons.kr

http://www.hoonsbara.com

위 사이트들 참조하시구요.

----- 오프너 -----<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<script type="text/javascript">
    function SeChang()
    {
        var nice = document.getElementById("<%=txtSuper.ClientID%>").id;
        var url = "a.aspx?id=" + nice;
        window.open(url);
    }
</script>

<asp:TextBox ID="txtSuper" runat="server" />
<a href="javascript:SeChang();">클릭하면 팝업창뜸</a>

</asp:Content>

새창에다가 텍스트박스의 아이디값을 넘겨줬어요.

 

------ New Window ------ (아놔 ㅋㅋ 문자썼네요...새창이라고 안하고 대단하죠?)<script type="text/javascript">
    function BooMo()
    {
        opener.document.getElementById(''<%=Request["id"]%>'').value = "1818년2월18일";
        self.close();
    }
</script>
<a href="javascript:BooMo();">현재 달력에서 선택하는 날이 1818년 2월 18일</a>
새창에서는 하이~덴! 에서 부모창으로부터 넘겨받은 텍스트박스의 아이디값을 담아둔후

달력에서 해당날짜를 클릭하면

opener.document.getElementById(''<%=Request["id"]%>'').value = "1818년2월18일";

부모창으로 값을 넘겨줍니다.

 

자 그렇다면 우리의 Blue는 어딜 갔을까요?

 

 

-------------Blue------------

\\부모창\\

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><script type="text/javascript">
    function SeChang()
    {
        window.open("a.aspx");
    }
</script>
<input type="text" id="txtSuper" />
<a href="javascript:SeChang();">클릭하면 팝업창뜸</a></asp:Content>

\\새창\\

<script type="text/javascript">
    function BooMo()
    {
        opener.document.getElementById("txtSuper").value = "1818년2월18일";
        self.close();
    }
</script>

<a href="javascript:BooMo();">현재 달력에서 선택하는 날이 1818년 2월 18일</a>

 

제말은 3분의1만 믿으십시오.

 

하지만 RGB법칙을 지켰으니까 괜찮을꺼에요

 

 

 

=================================

=================================

=================================