くるりから届けられた4年ぶりのニューアルバム!!

iframe内のスクリプトを親から3つ実行したいのです.
親フレームのイベントハンドラ input とonclick="()" を利用して1回のクリックで
1)iframe内のHTMLを変更し (iframe00.htmlからiframe01.htmlへ)
2)iframe内のflvファイルを開始し(iframe01.htm内のflaverを実行しa.flvを開始したい)
3)iframe内の画像を変更したい(iframe01.htmlでは同一table内で a.gifを,iframe02ではb.gifを表示)

現在までで出来ているのは以下のところまでで,上記1)と3)はできるのですが,
2)は下記のごとく,onmouseoverとonclickを使用しないと,flvが開始されません.
changeA1のdocument・・・を changeA2の中に入れても,iframeのHTMLと画像は
変わりますが,動画が開始されません.

私の実力では,希望している動作が可能か否かも解りません.
可能か否か,可能であればどのように記述すればよいかご教示いただければ幸いです.

1.親htmlのスクリプト,iframeの記述,およびイベントハンドラー
<script type="text/javascript">
<!--
function changeA1(){document.win01.location.href="iframe01.html" ;}
function changeA2(text01,file01,image01){
var text02=text01;
var file02=file01;
var image02=image01;
document.getElementById('win01').contentWindow.play01(text02,file02,image02); }

 function changeB1(){document.win01.location.href="iframe02.html" ;}
function changeB2(text01,file01,image01){
var text02=text01;
var file02=file01;
var image02=image01;
document.getElementById('win01').contentWindow.play01(text02,file02,image02); }
//-->

<iframe src="iframe00.html id="win01"></iframe>

<input type="button" value="I" onmouseover="changeA1()" onclick="changeA2('あ', a.flv','a.gif') />

<input type="button" value="II" onmouseover="changeB1()" onclick="changeB2('い', b.flv','b.gif') />

2. iframe01.html のスクリプト
<script type="text/javascript">
<!--
function play01(text00,file00,image00){

var flaver = '../../flaver3/flaver.swf';
var html01 = '';
var html02 = '';
html01 += '<font style="font-weight:bold; font-size:15px">' + text00 + '</font>';
html01 += '<object data="' + flaver + '" type="application/x-shockwave-flash" width="400" height="300">';
html01 += '<param name="movie" value="' + flaver + '" />';
html01 += '<param name="FlashVars" value="file=' + file00 + '" />';
html01 += '<param name="wmode" value="transparent" />';
html01 += '<param name="allowFullScreen" value="true" />';
html01 += '</object>';
document.getElementById('flv01').innerHTML = html01;
html02 += '<img src="'+ image00 + '" border="0" width="360" height="270" />';

}
//-->

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0

#1です。



>2種のHTMLですが,そのtableセル内の内容も変えたかったのと,
>出来るだけ少ない記述で出来ないか という思いがあり
2種類作成するのであれば、内容は固定でよいのですよね?

もしそうであるなら、スクリプトでわざわざ変更するよりも、パラメータの内容もセットしたソースを直接記述しておいた方がスクリプトを記述する分だけ少なくなりませんか?
(外部スクリプトなので、スクリプトの長さは勘定にいれないとかいうのであれば、また別ですが…)
少なくともご提示のスクリプトは、直接HTMLソースに記述した場合よりも(多分)少なくはないと想像しますが。
(ほぼ「ソースの内容+スクリプト」という記述になっているのでスクリプト分だけ長い)

#1にも記しましたように、1種類のhtmlファイルを複数の内容に対応できるようにしたいというのであれば、話は別ですが。
    • good
    • 0
この回答へのお礼

ご助言ありがとうございます. 
舌足らずで申し訳ありません.お恥ずかしいですがページをみていただいて私の希望をお伝えしようと思います.
今動作させているページは以下で一つのHTMLで書いております.
http://火遊.jp/fire/katudo/2011/11040seventh110728.htm
上記の最下段インプット-イベントハンドラ列の上はtableで表示していまして,左縦は動画,右は縦3つのセルで全て静止画です(中段は文字を画像で貼り付けています). 最下段インプット-イベントハンドラの中で”ナイアガラ”のみ横長の動画でして,目的は横長動画を見かけ上,画面位置が変わることなく拡大して表示することです.innerHTMLでtableの書き換えを試みたり,iframeを利用しその中にinput-イベントハンドラを置いて動作させてもみましたが私の力では出来ていません.一番ちかづけたのが,ご質問させていただいた状況でした.
ご教示していただけることがありましたら,よろしくお願いいたします.

お礼日時:2011/08/05 00:05

よくわかってませんけれど、



>onmouseoverとonclickを使用しないと,flvが開始されません
確認できないので、想像での回答になりますが…

原因はタイミングの問題で、そのまま連続してスクリプトで実行しようとしても、ifarameの内容がロードされる前に実行してしまい、エラーになっているということではないでしょうか?
onclickにすると(人間の操作に)時間がかかるので、その間にたまたまロードが完了していると考えられます。
それなので、通信環境が悪い場合は、クリックしても反応しない(最初と同じになる)可能性が考えられます。

もしそうであれば、解決するためにはタイミングを計って実行するようにすればよいと思われます。
でも、その前に・・・


>iframe01.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ファイルのソースを書き分けておくのがスクリプトも要らなくなるので、一番堅実なような気がします。(スクリプト・オフのユーザ環境では当然ながらスクリプトは動作しません)
    • good
    • 0
この回答へのお礼

早速の指標をありがとうございます.
iframeで呼び出すのは2種のHTMLですが,そのtableセル内の内容も変えたかったのと,出来るだけ少ない記述で出来ないか という思いがあり 後は,方法の知識不足です. 指摘していただいた中から自分で出来そうな方法で考えてみます.
ありがとうございました.

お礼日時:2011/08/04 20:38

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJavaScriptで他のファイルのhtmlソースを読み込むには?

JavaScriptを使い、他のファイルに記述されたhtmlソースを読み込んでページを表示させたいです。
どのように記述したらいいでしょうか?
具体的に書いて頂けると大変助かります。

(目的)
20~30ページに表示するコンテンツ(写真や文字)が頻繁に変更されるため、変更部分だけをPCのバッチ処理でファイルとして作成し、利用者がページ参照する時に、JavaScriptでそのファイルを取り込み表示させたい。

Aベストアンサー

一番簡単な方法はprototype.jsやjQueryなどのAjaxライブラリを使用することでしょう。
以下にprototype.js(http://www.prototypejs.org/)を使用して別のHTMLソースを読み込んで表示する手順を示しておきます。

1) まず読み込まれる側のHTMLファイルを準備します(ここではload.html)とします。

2) 次に読み込む側のHTMLの、読み込んだファイルの内容を表示されたい箇所に<div id="container"></div>と記述しておきます。
※) ID属性値は任意のもので結構です。

3) 読み込み側のHTMLのJavaScriptに以下のように記述します。
<script type="text/javascript" src="[prototype.jsファイルを指定]"></script>
<script type="text/javascript">
<!--
window.onload = function() {
new Ajax.Updater($("container"), "load.html");
};
//-->
</script>

以上でページ表示時に<div id="container"></div>部分にload.htmlに記述された内容が表示されます。

一番簡単な方法はprototype.jsやjQueryなどのAjaxライブラリを使用することでしょう。
以下にprototype.js(http://www.prototypejs.org/)を使用して別のHTMLソースを読み込んで表示する手順を示しておきます。

1) まず読み込まれる側のHTMLファイルを準備します(ここではload.html)とします。

2) 次に読み込む側のHTMLの、読み込んだファイルの内容を表示されたい箇所に<div id="container"></div>と記述しておきます。
※) ID属性値は任意のもので結構です。

3) 読み込み側のHTMLのJavaScriptに以下の...続きを読む


人気Q&Aランキング