子ウインドウから親ウインドウを動かし、同時に子ウインドウが閉じる動作

Javascriptに詳しい方、ご教授いただけると大変助かります。

Fancyboxを使用してモーダルウインドウを作りました。

やりたい動作は、

親ウインドウから子ウインドウを開きます。
子ウインドウには画像リンクが表示。

---以下の動作がわかりません---

画像リンクをクリックすると、
親ウインドウを指定のページに移動表示させ、
同時に子ウインドウは閉じるといった動作です。

このような動作は可能でしょうか？

例といたしましては、アスクルの電子カタログにある
「ページ一覧機能」です。
https://www.askul.co.jp/ctg/search/searchByCtgVi …

結果的には、子ウインドウに何枚かの画像リンクが並び、
目的のページに飛べるサムネイル的な動作ができればと
思っております。

よろしくお願いします。

No.2 回答者： fujillin 回答日時： 2016/05/25 09:18

こんにちは

fancyBoxはよく知りませんが、いろいろな表示形式が用意されているようですね。
質問者様がどの方法で子ウィンドウを表示しているのかがわかりませんが・・・

＞親ウインドウを指定のページに移動表示させ、
通常のリンクを設定しておけばページ遷移がおきるはずと思います。
iframeのタイプで表示している場合などは、targetを指定しておく必要があるかも

＞ 同時に子ウインドウは閉じるといった動作です
どうせ遷移するのですから、閉じなくても同じことだとは思いますが…
fancyBoxにはいろいろなオプションやメソッドが用意されているようですので、それを利用すれば可能と思います。
下記の解説ページの下の方に閉じるメソッドの説明があります。
http://fancybox.net/api
対象のリンクをクリックした際に、
　$.fancybox.close()　を実行すればよいみたいです。

確認したわけではありませんが、fancyBoxでモーダルに表示される要素は、HTMLソースのクローンの可能性がありますので、idなどは用いない方がよろしいかと思います。（同一id要素が複数存在してしまう可能性がある）
fancyBoxの表示用の親要素に固定のidがあると思いますので、それを要素の識別に利用するのが良いのではないかと推測します。

※ 試したわけではありませんので、違っていたらばご容赦ください

No.1 回答者： nokirag 回答日時： 2016/05/25 03:31

Fancyboxというものを使ったことがないのですが、

あなたの言う、親ウィンドウ、子ウィンドウというのはHTMLを利用した擬似的なものでしょうか？それとも新たにブラウザが開くタイプのものでしょうか？

HTMLを利用した擬似的なウィンドウであれば、aタグのhrefの動的な書き換えやlocation.hrefでの画面遷移で事足りると思います。
新たにブラウザが開くタイプであれば、window.postMessage()で通信を行えばいいかと思います。