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

  関連記事

PostMessageを使ったクロスドメイン通信によるメッセージの送受信を試してみた!

JavaScriptでいろいろ実装していると時に別ウィンドウを開いて、呼び出し元 …

html5のlocalStorageで複数のデータを保存するには?

以前、localStorageのデータを保存する方法について記事を書きましたが、 …

【JavaScript】配列の要素を並び替える(数値の大きい順)

ある案件で配列で、配列要素を数値の大きい順に並び替えたいことがあったので、そいつ …

javascriptのプロトタイプを調べる -クラス編-

最近、jqueryに慣れまくってjavascriptでオブジェクト指向について調 …

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

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

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

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

IE6・7・8でもHTML5のvideoを利用できる方法とは!?

さて、html5のvideoタグを利用して動画を再生させるのは簡単なんですが、た …

読み込んだjsonファイルをjqueryでフィルタリング処理の練習

jsonファイルで、読み込んだ画像リストを表示するのは、まぁそんな難しくないけど …

【javascript】剰余(%)演算子を使って値が繰り返しループする処理をやってみた!

ちょっとプログラムで、配列の長さの値の範囲内で繰り返す値をどうすればいいのか検証 …

【jQuery】facebook風スライドメニューをちょっと作ってみた結果

最近、皆さんfacebookを日々使ってると思いますがあのメニューを左からスライ …