Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

【JavaScript】子ウィンドウ/親ウィンドウのお互いの要素を操作するには!?

   

以前、iframe内から親ウィンドウの要素を操作する記事を書きました。

で、今度は親ウィンドウから子ウィンドウを開いて、子ウィンドウから親ウィンドウの要素を操作、子ウィンドウから親ウィンドウの要素を操作してみるという事をやってみたいと思います。



今回は、親ウィンドウから子ウィンドウを開いて、divで作ったボックスをクリックしたら拡大・縮小するアニメーションをお互いのウィンドウから操作する仕組みを説明します。
今回は、お互いのウィンドウからクリックしたらボックスが拡大するデモを作りました。*いつものjs do itとかjs fiddleでは再現できないので、自分のサーバーで試します。

親ウィンドウのソース

主要な部分はJavaScriptなので、そこを載せておきます。

子ウィンドウのオブジェクト

子ウィンドウを開くときにwindow.openで開きますが、その時に変数に子ウィンドウのオブジェクトを保持しておきます。

documentオブジェクトからhtml要素を参照する

ウィンドウオブジェクトを変数に保持したら、windowオブジェクトの一部であるdocumentオブジェクトを通してhtml要素を参照することが可能になります。

JavaScriptにおいて、ブラウザにロードされたHTML文書はdocumentオブジェクトとして表される。documentオブジェクトは、文書に含まれるすべてのHTML要素へのアクセスを提供する。documentオブジェクトはWindowオブジェクトの一部であり、 window.document プロパティを通じてアクセスできる。

そこで、html要素を取得するためにおなじみのdocument.getElementByIdでIDがboxという要素にアクセスして変数に入れます。

あとは、jQueyなどでアニメーションさせたりしています。

子ウィンドウのソース

子ウィンドウに書いたコードも基本的には同じです。

親ウィンドウを参照するには?

子ウィンドウから親ウィンドウへの参照するには、window.openerで参照することができます。

親ウィンドウの存在を確認する

子ウィンドウから親ウィンドウを操作する時は、もしかしたら親ウィンドウが閉じられてる可能性もあるので、親ウィンドウの存在をチェックします。

そこで、if文でwindow.openerで親ウィンドウが存在しているか?もしくはwindow.opener.closedで親ウィンドウが閉じられているか?確認します。もし存在してなかったり、閉じられていたら警告ダイヤルを表示させて処理を中断してます。

documentオブジェクトからhtml要素を参照する

あとは、親ウィンドウの時と同じように、widnowオブジェクトの一部であるdocument.getElementByIdで親ウィンドウのIDがboxというhtml要素にアクセスしています。

まとめ

他にも子ウィンドウから親ウィンドウを操作する方法があったりしますので、知りたい方は下記を参考にしてみてください。
他にも今回調べて参考にさせていただいたサイトもリンク貼っておきます。

 - javascript

     

Comment

  1. […] それ自体はこちらのサイトがとても役立ちました。 […]

Message

  関連記事

【JavaScript】bodyに要素を追加

そういえばbody要素直下にデータを追加したい場合っていまさらながらメモる。 i …

iframe 内のウィンドウから親ウィンドウの要素を操作するには!?

さて、ちょっと気になっていたiframeで読み込んだhtmlで実行したJavaS …

【JavaScript】ユーザーエージェントを判別して処理を分岐する

今回、PC用のサイトを作成していたんですがiphoneとipadでも見栄えを変え …

【JavaScript】配列をシャッフルして要素をランダムに入れ替える方法

JavaScriptで配列をシャッフルしてその要素をランダムに表示させるにはどう …

javascriptの文字列操作で何気に便利だった

先日、とあることがきっかけでjavascriptで文字列を操作することになり、便 …

CSS3のアニメーションをjavascriptで実行する方法

よくCSS3でロールオーバーでアニメーションさせるのありますが、まぁそれは、普通 …

【JavaScript】読み込み処理でプログレスバーをアニメーションさせてみた!!

先日、CSSによるローディングバーのぐるぐるしたアニメーションに記事を書きました …

【jQuery】ajaxで読み込み中にローディングの実装するにはどうしたらいいのか調べてみた

ajaxでリクエスト処理中のローディングについて調べてみた。

【jQuery】TOPへ戻るボタンでスクロールさせる!!

ブログとか縦に長いサイトだとよくスクロールしていくとフワッと「ページトップへ」と …

JavaScriptで動画コンテンツを操作してみた!

前回、html5のvideoタグについて説明しました。 html5のvideoで …