===== 자식 창 만들기 =====

자식창은 다음과 같이 만든다.

==== 버튼 ====

<code php> 
<input type="button" value="자식창 열기" onclick="openChild()">
<br>전달할 값 : <input type="text" id="pInput"> 
<input type="button" value="전달" onclick="setChildText()">
</code>

==== 자바스크립트 ==== 

<code javascript> 
function openChild() {
    // window.name = "부모창 이름"; 
    window.name = "parentForm";
    
    // window.open("open할 window", "자식창 이름", "팝업창 옵션");
    openWin = window.open("adressbookpopup.php", "childForm", "width=800, height=800, resizable = no, scrollbars = no");    
}
</code>


===== 부모 창에서 자식창에 데이터 보내기 ===== 

자식창을 openwin이란 이름의 변수에 할당하였으므로, openwin으로 자식창에 접근하면 된다. 

<code javascript> 
function setChildText(){
    openWin.document.getElementById("cInput").value = document.getElementById("pInput").value;
} 


===== 자식 창에서 부모창에 데이터 보내기 =====

==== 자식창 php ==== 

다음은 자식창의 구조이다. 각 요소를 k라는 인덱스로 구분지었다. 

<code php>
<div id="mainWrapper">

    <input type="text" id="cInput"> <br /> <br />
    <input type="button" value = "창 닫기" onclick="window.close()">

    <ul>
        <!-- 게시판 제목 -->
        <li>게시판 Title </li>

        <!-- 게시판 목록  -->
        <li>
            Table
            <ul id ="ulTable">
                <li>
                    <ul>
                        <li>No</li>
                        <li>성명</li>
                        <li>연락처</li>
                        <li>주소</li>
                        <li>조회수</li>
                    </ul>
                </li>
                <!-- 게시물이 출력될 영역 -->
                <?php 
                $k = 1; 
                while ($row = sql_fetch_array($result)) 
                { 
                    echo "<li>";
                        echo "<ul>";
                        echo "<li>". $k. "</li>";
                        echo "<li id='listname_$k' name='listname_$k'>". $row['ex_1'] ."</li>";
                        echo "<li id='listphone_$k' name='listphone_$k'>". $row['ex_3'] ." </li>";
                        echo "<li class='left'>". substr($row['ex_9'], 8, 36) . "</li>";
                        echo "<li><input type='button' value='전달' onclick='abc(" . $k. ")'> </li>"; 
                        echo "</ul>";
                    echo "</li>";
                    $k++;
                } ?>                          
            </ul>
        </li>
    </ul>
</div>
</code>


==== 자식창의 javascript ====

index라는 인자로 배열에서 몇번째임을 받아 온후, 이를 토대로 list의 해당값을 추출한다. 이후 이를 부모 창에 대입한다.

부모창은 opener라는 함수로 얻을 수 있다. 

각 li의 텍스트 값은 value가 아니라, textContent임을 유의하자. 

<file javascript "popup.js">
function abc(index) {

        // 리스트요소(li)에서 index에 해당하는 textContent를 가져오기 
        var name = document.getElementById("listname_" + index).textContent;
        var phone = document.getElementById("listphone_" + index).textContent;

        console.log("이름은 : %s, 전화번호는 %s", name, phone);

        opener.document.getElementById("parentInput").value = name;
}
</file>