有限会社ミスティーネット JavaScript講座

■ ポップアップウィンドウから元のウィンドウを操作する

ポップアップで開いたウィンドウから、元のウィンドウの操作を行います。
JavaScript では、ウィンドウ名を指定することで他のウィンドウの操作も行うことが出来ます。
フレームを使用したサイトでは、これを応用して、基準となるフレームウィンドウから他のウィンドウをコントロールすることも出来ます。

サンプルスクリプト

カラー選択ツールを開いて好みの色をクリックしてください。
文字や絵の色が変わります。

-- Gallery --

スクリプトの説明

Gallery の画像はテーブルを作ってその中に設置していますが、そのテーブルの背景色を変更することで絵や文字の色を変えています。絵の部分は透過画像となっており、テーブルの背景色がそのまま表示されるため、絵の部分のみ色が変わったように見えます。

色の変更は「changeColor 関数」で行っています。
カラー選択ツールで色のボックスをクリックしたときに、「onclick イベントハンドラ」を使って、関数を起動して色の変更を行います。

[ changeColor 関数の内容 ]

function changeColor(obj) {
opener.window.document.getElementById('gallery').style.backgroundColor = obj;
}

ポップアップウィンドウからオープン元のウィンドウを操作する場合には「opener プロパティ」を使用します。

関数の呼び出し
関数を呼び出す場合には、引数に色を指定します。
(16進数･RGB･カラーネームどの方式でも指定できます)

例)： onclick="changeColor( '#ff0000' )"

changeColor の動作
関数の内容は簡単で、1行のみです。
画像を配置したテーブルの背景色を、引数に指定した色に変更します。
サンプルでは、テーブルのID名を「gallery」にしています。

テーブルの指定部分 ････ opener.window.document.getElementByID('gallery')

「opener」でオープンもとのウィンドウを指定しています。

背景色の変更部分 ････ style.backgroundColor = obj;

「obj」は引数で指定された色番号(色名)です。

▲TOPへ


	HOME / ご利用について / リンクに関して / 推奨環境 / 免責･規約 / お問合せ / リンク集 / Ｑ＆Ａ