No.250

モーダルでのiframe使用時などに便利

　最近のUIはモーダルを多用するものが多い気がする。
　簡単な処理なら良いんだけど、親ウィンドウとの間で相互に情報をやりとりしたりするようなケースになると、必然的にJavascriptの出番となる。

　原理は知ってしまえば簡単で、ほとんどコピペで使うことが出来る。

　というわけでコピペ用の元をメモ。

前提

　下記のような構造のHTMLを想定。

親（hoge.html）

<div id="hoge">
  <input type="text" id="foo">
  <iframe src="fuga.html">
</div>

子（fuga.html）

<div id="fuga">
  <input type="text" id="var">
</div>

親から子の要素を操作

　原理は「子の要素（#fuga）の中から必要な要素（#var）を検索」して特定している。

　親への入力内容を子に伝えるケースは下記のようになる。

$(function() {
  $(document).on('input', '#foo', function() {
    let value = $('foo').val();
    $('#fuga').contents().find('#var').val(value);
  });
});

子から親の要素を操作

　原理は「親の要素（#hoge & parent.document）の中から必要な要素（#foo）を検索」して特定している。

　子への入力内容を親に伝えるケースは下記のようになる。

$(function() {
  $(document).on('input', '#var', function() {
    let value = $('var').val();
    $('#hoge' ,parent.document).find('#foo').val(value);
  });
});