Webシステム系で機能をプレビュー用に別ファイルで作成していたところ、「（値渡しの関係上）結局モーダルウインドウで処理しないといけなくなった」ということに遭遇しました。
このときの処理をポイントに分割して、それぞれ別のページで解説していきます。
実際の処理を内容で分けると…
まずは今回の実装について、ポイントで分けて考えたいと思います。
実装したい内容は以下の2つに分割されます。
- iframeから親ページの「select」を変更した際に「changeイベントを実行」する
- iframeから親ページの「select」を「値ではなくテキストで変更」する
…なんでこんなややこしいことに…というのが正直なところですが、親ページもフレーム内ページもほぼ完成していたため、頑張って処理できるようにしました。
今回はひとつ目の内容について解説します。
まずは同一ページ内で変更してみる
jQueryを利用しているということは、ページ内で各種の変更が行われているということですね。
ユーザー操作によるトリガーが基本ですから、jQueryから変更した場合にはトリガーが引かれません。
jQueryで値変更後にイベントトリガーでなにかする場合は、どのような記述になるのでしょうか。
フォームへ値を入れた場合には以下のような記述となります。
$('#hoge').val('fuga').trigger('change');または
$('#hoge').val('fuga').change();trigger()で記述する場合は、任意のイベントをトリガーできるのがメリットとなります。
「hover」したら「select」するというような処理もtrigger()を利用すれば記述できますね。※UIとしてどうかというのは置いといて…
現実的なものだとスクロールをトリガーにするなどでしょうか。
親ページ内の要素にアクセスしてみる
親ページ内の要素にアクセスする場合は以下のような記述となります。
$('#hoge', parent.document)または
parent.$('#hoge', parent.document)これで親ページ内の要素がセレクタとして指定できたことになります。
ここから先は、メソッドチェーンでいかようにも…ということですね。
組み合わせてみる
先程、セレクタとして親ページ内の要素が記述できたので、あとは「値変更」と「トリガー」を記述すれば完了です。
parent.$('#hoge', parent.document).val('fuga').change();これで「iframeから親ページ内の要素を値変更し、それをトリガーに別イベントの処理を開始する」ということが可能になりました。
そもそもモーダルウインドウを同一ファイル内で作成できれば良かったのですが、こういうこともあるよねということで。