埋め込みフレームの表示/非表示を制御する

ウィンドウの任意の場所に、iframeタグを埋め込み、そこに指定した URLのページを表示することができる。タグの display属性を変更することにより、ページの表示/非表示を切り替えることができる。

iframe要素の display属性を "block"にすれば、ページが表示され、"none" にすれば非表示になる。以下の例題では、ボタンまたはハイパーリンクのクリックにより表示/非表示を切り替える。

再度ボタンをクリックすれば、埋め込みフレームは閉じる

親ウィンドウの HTMLコード

openCloseFrame関数：utility.js

埋め込みフレームの HTMLコード

再度ハイパーリンクをクリックして、埋め込みフレームを閉じる

親ウィンドウの HTMLコード

基本的にはボタンの操作と同じだが、ハイパーリンクに反応しないよう、href属性に NOP関数を定義する。

埋め込みフレームの中に作成したページのボタンをリックすることでフレームを非表示にすることもできる。

埋め込みフレームの中のページは独立した HTMLツリーであり、独自の documentオブジェクトを持つ。DOM APIにより親ウィンドウの HTML要素を参照することができるので、表示/非表示を切り替えるボタンにアクセスし、イベントハンドラを実行すれば、自フレームを閉じることができる。

ボタンをクリックして、埋め込みフレームを開く

埋め込みフレームの中の閉じるボタンをクリックしてフレームを閉じる

親ウィンドウの HTMLコード

埋め込みフレームの中の HTMLコード

openFrame関数 / closeFrameViaParent関数：utility.js

JavaScript