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

  関連記事

【jQuery】スクロールしてヘッダーやナビを上部に固定するには?

スマホサイトのリニューアルでスクロールしたらヘッダーが上部に固定させるようにした …

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

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

html5でドラッグ&ドロップの処理

ドラッグ&ドロップって昔から使われてたらしいけど、とりあえず知っておこうと思って …

【javascript】マウスホイールで減速するイージングを試してみた

マウスホイールで減速するイージングを試してみた ちょっとjavascriptとj …

no image
フォームにアクセスする

いまさらながらフォームにアクセスする方法をメモ ざっくりとメモ。 ■配列でフォー …

【JavaScript】連想配列の要素をソートして並び替えてみる

久しぶりにjQueryを業務で弄っています。で、リストの一覧をアルファベット順に …

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

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

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

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

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

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

【JavaScript】送信ボタンのイベントをキャンセルさせる方法とは!?

フォームのsubmitボタンでクリックすると情報が送信されますが、その前に入力し …