窓際BLOG

プログラミングの学習メモや書籍の感想等を公開していきます。

javascript:子画面から親画面のメソッドの呼び出し※配列を渡したかったけど渡せなかった話

javascriptで下記のようなことが、がやりたくてハマったので、φ(..)メモメモ

  1. 親画面から小画面の呼び出し
  2. 子画面から親画面のメソッドに値(配列)を渡す。

親画面の呼び出し

親画面の呼び出しは、window.openを使用する。

  window.open('childWindow.html'
    , 'childWindow'
    , 'width=600, height=500, menubar=no, toolbar=no, scrollbars=yes'
  )

子画面に値を受け渡したい場合は、URLにパラメータを設定することで可能。

  window.open('childWindow.html?param=' + param
    , 'childWindow'
    , 'width=600, height=500, menubar=no, toolbar=no, scrollbars=yes'
  )

developer.mozilla.org

子画面から親画面のメソッドに値(配列)を渡す。

子画面から親画面のメソッドを呼び出すにはwindow.opener.親画面のメソッド名で可能。

window.opener.parentMethod()

lightgauge.net

このときに配列を引数として渡したかったが、エラーとなるため、暫定的に下記実装で対応した。

// 子画面側
var hoge = {}
hoge.fuga = $('#val1').val()
hoge.piyo = $('#val2').val()
                
// 親画面へ値の受け渡し
// 配列をそのまま渡すとundifinedとなるため「,」区切りの文字列として渡す
// window.opener.taskEdit(hoge) // 親画面で受け取った際にundifinedとなる
window.opener.taskEdit(hoge.fuga + ',' + hoge.piyo)
// 親画面側
function taskEdit(str) {
  var hoge = str.split(',')
  hoge.fuga = str[0] // 子画面のhoge.fuga
  hoge.piyo = str[1] // 小画面のhoge.piyo
}

エラーの原因は、javascriptが配列を渡す際に参照渡しとなっているためのようだが、どう解決すればいいのかまでは、わからなかった。。。 detail.chiebukuro.yahoo.co.jp