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

  関連記事

HTML5のWeb Workersで並列処理を使いこなしてみよう!

近年は、html5の台頭によって「html5+css+javascript」によ …

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

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

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

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

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

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

html5でドラッグ&ドロップでローカルからテキストファイルをアップロード

先日、ファイルの読み込みをやりましたが、今度はローカルからファイルを読み込む方法 …

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

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

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

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

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

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

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

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

javascriptのプロトタイプを調べる

前回、javascriptのクラスについて軽く書いたが今回は、prototype …