jsで子ウインドウを開き、子の値を親に返す手段

やりたかったこと

①ブラウザから別ウインドウを開く
②別ウインドウのある要素がクリックされたときにその値を親ウインドウに返す

結果的に子側でwindow.openerを使えば親の関数が呼べる。

(同一ドメインでしか試していません)

簡単な見本

親ウィンドウ側

<button onclick="openNewWindow()">
    Open
</button>

<script type="text/javascript">
    function openNewWindow() {
        window.open(
            'http://~~~~~', //移動先
            'pop',  //新規ウィンドウで開く
            'width=800, height=480' //サイズ指定
        );
    }

    function onCallBack(data) {
        console.log(data); //hoge
    }
</script>

呼び出す子ウィンドウ側

<button onclick="closeWindow()">
    Close
</button>

<script type="text/javascript">
    function closeWindow() {
        window.opener.onCallBack('hoge');
        window.close();
    }
</script>

ちなみに

子側からwindow.postMessageとかも使ってみたけどうまくいかなかったのは何故なのか
postMessage使ってる方いたらご教授願いたい。