- ベストアンサー
iframe内スクリプトの親からの実行
- 親フレームからiframe内のスクリプトを実行する方法について教えてください。
- １回のクリックで以下の３つの動作を行いたいです。１）iframe内のHTMLを変更する。２）iframe内のflvファイルを開始する。３）iframe内の画像を変更する。
- 現在は１）と３）ができていますが、２）の動画が開始されません。どのように記述すればよいか教えてください。
- firewoker
- お礼率66% (6/9)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1、2です。 残念ながら動画を表示できる環境にはないので、よくわかりませんが、 横長と縦長を入替えるだけなら、必ずしも別ドキュメントにする必要は無いように思えますが？ 他のものと同じようにして、同じドキュメント内で表示してあげるのが自然かと思われます。 もちろん、#1に書きましたように、HTMLを2種類用意しておいてパラメータを渡すのでも良いですが、その場合は「方法3」が一番簡単なように思われます。（この意味においては、#2の回答は想像違いでした。でも、横長のものが1種類だけならそちらは固定ソースでいけますね。） 横長になった時にどのようなレイアウトになるのかがわかりませんが、例えば他の要素と重ねてしまっても良いのであれば動画の要素だけを浮かした形にしておいて（position:absolute)サイズを可変にしておくとか。 他の要素も一緒にレイアウトを変えるのであれば、両方に共通できるHTMLマークアップにしておいて、簡単な手続きでレイアウトを変えられるようにしておくとか… ソースを拝見して、 できればtableレイアウトは避けた方が良さそうです。（現在の傾向） また、同じ性格の要素に個々にサイズなどの属性やイベントを設定していると、ソースが長く見難くなるばかりですので、CSSの利用とイベントの設定方法を工夫したほうがよろしいかと思います。 例えば、テーブルをやめて上述（↑）のオブジェクト部分だけposition;absoluteにした例を以下に。 オブジェクトの代わりにdivを入れてありますが、サイズを変えて横長にしてみれば他のレイアウトは変わらずに重なって表示されることがわかると思います。 また、イベントは右下の画像のロールオーバーの部分だけ例として設定してありますが、個々の画像にonmouseイベントを設定せずに、包含するdivに設定しておくことでソースが単純になるだけでなく、画像を入替えたり増減しても同じ効果が得られるようにすることが可能です。 インプットの部分のイベントなども上記と同様の設定にした方が良さそうですし、引数もタグの中に書くと長くなってしまっているので、ソースの<span>内に記しておいて表示しないような例にしてあります。また、オブジェクトのファイル名と画像のファイル名も同じ（拡張子が違うだけ）の様なので、リンク先のuriとして記すことで、関数呼び出し時に引数を不要とすることが可能になります。 同じ位置関係に引数にあたる内容があるので、イベント関数側でその内容を取得して、必要に応じて拡張子を追加すればよいという理屈です。 あまり良くは見ていないのですが、同じようなスクリプトがたくさん並んでいるように見受けられます。少し修正することで同じものはまとめられるのではないかと推測します。（CSSとスクリプトは外部ファイルにすることが可能ですので、HTMLソースを単純化しておくことで、内容の追加や修正が行ないやすくもなるはずです。） その他、個々に書いていると長くなりそうなので割愛いたしますが、何かのご参考にでもなれば… サイズ等は良くわからないので、元のままです。画像の数やuriなどは適当にテスト用に変わっています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #Nset01{ width:735px; position:relative; } #Nset01 div.side{ width:385px; margin-left:350px; } #Nset01 div#flv01{ position:absolute; top:0; left:0; } #Nset01 div.largeImage img{ width:385px; height:200px; } #Nset01 div.thumbnail img{ width:40px; height:30px; margin:2px; } #submenu a { display:inline-block; width:76px; padding:2px 8px; margin:2px; text-decoration:none; color:#000; background-color:#ddd; border:2px solid #444; border-top-color:#eee; border-left-color:#eee; } #submenu a span { display:none; } //--> </style> <script type="text/javascript"> <!-- function setFlaver01(evt){ var e, t = evt.target || evt.srcElement; if(t.nodeName!="IMG") return; if(e=getImg("largeImage", "img")) e.src = t.src; } function getImg(cl, tag){ var e, d = document.getElementById("Nset01").getElementsByTagName("div"); for(i=0; e=d[i++];) if(e.className==cl) return e.getElementsByTagName(tag)[0]; return null; } //--> </script> </head> <body> <div id="Nset01"> <div id="flv01"> <div style="width:344px; height:626px; background-color:#ff8;"> Objectの代わりのDIV（サイズを変えてみてください） </div> </div> <div class="side"> <div class="largeImage" style="height:300px;"> <div>文字のエリア</div> <img src="img/010.jpg" alt="large_image"> </div> <div class="caption" style="height:200px;"> 画像化した文字？のエリア </div> <div class="thumbnail" style="height:126px;" onmouseover="setFlaver01(event)"> <img src="img/001.jpg" alt="thumb1"> <img src="img/002.jpg" alt="thumb2"> <img src="img/003.jpg" alt="thumb3"> <img src="img/004.jpg" alt="thumb4"> </div> </div> <div id="submenu"> <a href="02himawari">ひまわり <span>電気点火大成功 点火：W，Mtくん</span> </a> <a href="03star01">スターマイン 1 <span>一応成功 点火：Nちゃん</span> </a> <a href="09naiagara">ナイアガラ+扇 <span>まぁいいか・・・扇は綺麗 点火：全員</span> </a> </div> </div> </body> </html>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 ＞２種のHTMLですが，そのtableセル内の内容も変えたかったのと， ＞出来るだけ少ない記述で出来ないか という思いがあり 2種類作成するのであれば、内容は固定でよいのですよね？ もしそうであるなら、スクリプトでわざわざ変更するよりも、パラメータの内容もセットしたソースを直接記述しておいた方がスクリプトを記述する分だけ少なくなりませんか？ （外部スクリプトなので、スクリプトの長さは勘定にいれないとかいうのであれば、また別ですが…） 少なくともご提示のスクリプトは、直接HTMLソースに記述した場合よりも（多分）少なくはないと想像しますが。 （ほぼ「ソースの内容＋スクリプト」という記述になっているのでスクリプト分だけ長い） #1にも記しましたように、1種類のhtmlファイルを複数の内容に対応できるようにしたいというのであれば、話は別ですが。
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかってませんけれど、 ＞onmouseoverとonclickを使用しないと，ｆｌｖが開始されません 確認できないので、想像での回答になりますが… 原因はタイミングの問題で、そのまま連続してスクリプトで実行しようとしても、ifarameの内容がロードされる前に実行してしまい、エラーになっているということではないでしょうか？ onclickにすると（人間の操作に）時間がかかるので、その間にたまたまロードが完了していると考えられます。 それなので、通信環境が悪い場合は、クリックしても反応しない（最初と同じになる）可能性が考えられます。 もしそうであれば、解決するためにはタイミングを計って実行するようにすればよいと思われます。 でも、その前に・・・ ＞iframe0１.htmlでは同一table内で a.gifを，iframe02ではb.gifを表示 iframe01.htmlとiframe02.htmlを別ファイルとして作成してあるのであれば、わざわざご質問のような手間を掛けずとも、ソースを書き分けておきさえすればスクリプトは一切不要になりそうな気がします。 呼び出し側も通常のリンクですみませんか？ <a href="iframe01.html" target="win01">I</a> 表示する対象を常に frame01.html にしておいて、実際の内容を引数で制御したいというのであれば、わからないでもないですが… という、仮定のもとに回答するならば、 方法1：親html側でフレームのロードを監視する 親のhtmlでiframeのonloadを待ってスクリプトを実行するようにしておけば、ロード後に実行されます。 ただし、IE系ではキャッシュからロードされるとloadイベントが発生しないとかあったような気がしますので、statusをチェックするようにしないといけないかも。（確認していません） 方法2：子側から親のパラメータを読みにいく 子htmlのスクリプトをonloadで動くようにしておいて、子側から親へパラメータを取りにいくようにすればタイミングの問題も解決できます。 親側にパラメータを返す関数を用意しておくか、パラメータをオブジェクトなどにして保管しておくかなど。 方法3：uriのクエリ部を利用する （呼び出されるのは、同じhtmlファイルと仮定） タイミングを計ったり、異なるドキュメントでパラメータをやり取りする必要がないので、比較的簡単かと思います。 親フレームからは、uriのlocation.search部分にパラメータを設定してiframeを呼び出すだけ。 子フレームではlocation.searchを取得して、パラメータを受け取ると言う仕組み。 方法4：サーバ側で処理をする方法 サーバ側でphpなどが使えれば、方法3のリクエスト内容に応じたソースを出力するだけという方法。 環境さえあるならば、この方法も確実で簡単と思われます。 ご質問の通りで、設定が2種類しかないのであれば、現状のhtmlファイルのソースを書き分けておくのがスクリプトも要らなくなるので、一番堅実なような気がします。（スクリプト・オフのユーザ環境では当然ながらスクリプトは動作しません）
お礼
早速の指標をありがとうございます． iframeで呼び出すのは２種のHTMLですが，そのtableセル内の内容も変えたかったのと，出来るだけ少ない記述で出来ないか という思いがあり 後は，方法の知識不足です． 指摘していただいた中から自分で出来そうな方法で考えてみます． ありがとうございました．
お礼
ご助言ありがとうございます． 舌足らずで申し訳ありません．お恥ずかしいですがページをみていただいて私の希望をお伝えしようと思います． 今動作させているページは以下で一つのHTMLで書いております． http://火遊.jp/fire/katudo/2011/11040seventh110728.htm 上記の最下段インプット-イベントハンドラ列の上はtableで表示していまして，左縦は動画，右は縦３つのセルで全て静止画です（中段は文字を画像で貼り付けています）． 最下段インプット-イベントハンドラの中で”ナイアガラ”のみ横長の動画でして，目的は横長動画を見かけ上，画面位置が変わることなく拡大して表示することです．innerHTMLでtableの書き換えを試みたり，iframeを利用しその中にinput-イベントハンドラを置いて動作させてもみましたが私の力では出来ていません．一番ちかづけたのが，ご質問させていただいた状況でした． ご教示していただけることがありましたら，よろしくお願いいたします．