window.open() 혹은 a (anchor) 태그에 target="_blank" 어트리븃을 붙여서 연 윈도우와 원래 윈도우 간 정보 교환하는 방법입니다.

새 윈도우를 연 창을 부모창, 부모창에 의해 window.open()이나 a 태그로 열린 창을 자식창이라 칭하겠습니다.

부모창에서 자식창 접근

<!DOCTYPE html>
<html>

<head>
    <title>부모창</title>
</head>

<body>
    <input type="text" id="parentInput">
    <div id="childOutput"></div><button id="getChildOutput">자식창 입력 가져오기</button>
    <script>
        const newWindow = window.open('tmp-child.html');
            
        document.getElementById("getChildOutput").addEventListener("click", () => {
            document.getElementById("childOutput").innerText = newWindow.document.getElementById("childInput").value
        })
    </script>
</body>

</html>

window.open() 함수를 변수에 집어넣고(예시에선 newWindow), 해당 변수에서 정보를 가져옵니다.

변수명.document.querySelector(".element")와 같은 방식입니다.

자식창에서 부모창 접근

<!DOCTYPE html>
<html>

<head>
    <title>자식창</title>
</head>

<body>
    <input type="text" id="childInput">
    <div id="parentOutput"></div><button id="getParentOutput">부모창 입력 가져오기</button>
    <script>
        document.getElementById("getParentOutput").addEventListener("click", () => {
            document.getElementById("parentOutput").innerText = opener.document.getElementById("parentInput").value
        })
    </script>
</body>

</html>

따로 변수는 필요 없이 opener가 부모창을 리턴합니다

opener.document.querySelector(".element")와 같이 사용하실 수 있습니다.


길게 설명할 필요가 크게 없는 것들이라, 구구절절한 설명은 생략했습니다.

예시에서 보여 드린 것처럼 일반적으로 읽는 것만 가능한 게 아니라

opener.document.documentElement.classList.add("hello")

이렇게 부모창의 돔을 자식창에서 직접 조작할 수도 있습니다.

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  1. 알려주신 정보를 보고는 더욱 헷갈리네요 ㅠㅠ
    팝업창인 자식창에서 부모창으로 특정 값을 보내는게 궁금했었는데..., 위 내용을 다른 곳에서 참조했었습니다만,
    지식이 짧은 저로써는 이해하지를 못해 다음에 조금 한가할때 천천히 다시 봐야겠습니다.

    저의 경우, 짤 이미지를 클릭하면 부모창으로 주소가 갔으면 좋겠는데...,
    요즘 pc를 거의 사용하지 않고 모바일로만 보니 은근히 불편해서요.

    아마도 다른데 정신을 집중하고 있어서 그런가봅니다 ^^

    1. 근데 제가 티스토리에서 클립보드로 복사하는 방법을 사용한 이유는, 답글을 달 때 새로운 팝업에서 달리기에 그것까진 조절하기가 쉽지 않아서입니다.
      새로 옮긴 블로그는 답글을 달 때, 댓글을 다는 창이 답글을 다는 창으로 바뀌기에 이 방법을 사용하는 것이고요.

      티스토리에선 지금 사용하시는 방법이 조금 더 낫지 않을까 싶습니다.

    2. 댓글 처음 달때,
      이모지를 클릭하면 클립보드 복사는 대댓글에도 사용하고
      부모창의 댓글 입력창에는 자동으로 주소가 들어가는 방식을 제가 생각하고 있어서요

      클립보드로 복사도 되고
      부모창의 댓글 입력창에서는 자동으로 마샬님처럼 경로가 착 붙고...,
      이 두가지를 모두 사용할려고 하다보니 안되나 봅니다 ㅠㅠ

      이유는 요즘 제가 모바일로만 접속을 하다보니...,
      최근에 보니 pc보다는 모바일 사용자 접속이 많아서 위 두가지 방식을 같이 사용하면 어떨까하는 생각입니다

      모바일에서는 붙혀넣기가 너무 어렵더라구요.

    3. 현재 팝업된 이모티콘 창의 이미지를 클릭하면 부모창의 댓글창에 경로로 붙는 것을 테스트하다보니
      안되더라구요.

      그래서 생각해본게...,
      그럼, 클립보드에 저장이 되었으니 댓글 입력창에 마우스를 클릭하면 복사된 게 붙혀넣기가 되면서 클립보드에 저장된 내용이 클리어 되는 방식을 생각했습니다.

      바쁜 와중에..., 약간의 힐링이 필요해 뻘짓중입니다.
      이것도 될듯하면서도 안되네요 ^^;

    4. 클립보드에서 붙여 넣는 방법은 저도 아직 잘 모르겠네요...ㅋㅋㅋ
      구글에 검색해서 찾아본 코드들로 테스트해보니 오류가 뜨네요.

      우클릭을 막아두셨으니 붙여 넣기는 좀 어려울 것 같긴 합니다.

      정 안되시면 우클릭 막아두신 걸 해제하시는 것도 방법의 하나지 않을까 싶습니다 ㅎㅎ