ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript:別ウィンドウ内のiframeで選択した内容を親ウィンドウのテキストボックスに設定する

Webサイトで、選択ボタンをクリックしたら、別ウィンドウを表示し、別ウィンドウで検索を行うと別ウィンドウ内のiframeに検索結果を表示するようにしました。
iframeの検索結果をクリックして、クリックした値を、別ウィンドウの親ウィンドウにあたるWebサイトのテキストボックスに反映したくなったので方法を調べました。
調べた結果、iframeから別ウィンドウ、別ウィンドウから親ウィンドウの順番で、クリックした値を渡していくことで実現しました。

f:id:AJYA:20180801073314p:plain
unsplash-logoIlya Pavlov

iframeから別ウィンドウへ値を渡す

iframeの検索結果をクリックすると、onclick()で、別ウィンドウのsetYYYY()を呼び出して、別ウィンドウに値を渡します。

function setZZZZ('値')
    window.parent.setYYYY('値');
}

別ウィンドウから親ウィンドウへ値を渡す

別ウィンドウのsetYYYY()は、親ウィンドウのsetXXXX()を呼び出して、親ウィンドウに値を渡します。

function setYYYY('値')
    window.opener.setXXXX('値');
}

親ウィンドウのsetXXXX()ではテキストボックスに反映するJavaScriptを記述します。
当初どうやればできるんだろうと悩みましたが、実現できました。