あるページから別フレームの画像を切り替えるスクリプトを作成していて困っています

フレーム1側ソース
...
function _sendData(num){
 window.top.frames[1]._imgChange(n);
}
...
<body onLoad="_sendData(n)">
...

フレーム2側ソース
...
for (i=0;i<2;i++){img[i]=new Image();}
img[0].src = "images/abc.jpg";
img[1].src = "images/def.jpg";
function _imgChange(num) {
 nam = "imgname";
 document.images[nam].src = img[num].src;
}
...
<img src="xyz.jpg" name="imgname">
...

上記ソースのように作成しましたが
IE5.5とネスケ4.75で正常に動作するのですが、Netscape6だけうまく動作しません
解決方法その他アドバイスお願いします

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

A 回答 (2件)

こんにちは。


実際のページを拝見しました。
HTMLをダウンロードして、(CGIは生成されたHTMLを利用するしか
ないですが)こちらのローカル環境でいろいろ試してみました。
pagename.htmのなかで、以下のようにスペーサの制御を
している部分がありますが、これをまるまる削除したところ、
当方の環境ではNetscape6でも想定どおりの動きをしました。

-------------------------------------------------------
<tr height="3" valign="top">
<td width="153" bgcolor="#FFFFAD"><img src="http://homepage2.nifty.com/cradoll/images/spacer … width="150" height="3"></td>

<SCRIPT language="JavaScript"><!--
if(navigator.appName.charAt(0) == "N" && parseInt(navigator.appVersion) < 5){
document.write('<td width="523" bgcolor="#000000"><img src="http://homepage2.nifty.com/cradoll/images/spacer … width="524" height="3"></td>');
}else{
document.write('<td width="526" bgcolor="#000000"><img src="http://homepage2.nifty.com/cradoll/images/spacer … width="526" height="3"></td>');
}
//--></SCRIPT>
<td width="100%" bgcolor="#FFFFAD"><img src="http://homepage2.nifty.com/cradoll/images/spacer … width="100%" height="3"></td>
</tr>
-------------------------------------------------------

Netscape6で問題のページを見ようとすると、ページのダウンロードが
いつまでたっても終了しない(Netscapeのロゴが止まらない)という
状態になるのが気になりました。以前仕事上で同様の現象を見たこと
がありますが、そのときには
 1.document.write()を極力使わない。
 2.METAで文字コードを指定する。
などとしたところ解決しました。ですが今回のケースはそれでも解決でき
ませんでした。
 当方の環境が実際の環境と全く同じというわけではないので(CGIなど)
これで本当に解決するかどうかちょっと判断がつきません。
 詳しい方がいらっしゃいましたら、フォローをお願いいたします。
    • good
    • 0
この回答へのお礼

ありがとうございました
もともとはHTMLでのみ記述していたのですが
ページの更新作業や同内容のソースが多くなり
CGIで記述したものだったので面倒くさがりはだめですね

ブラウザによるスペーサの大きさを変える部分を
CGI側で行うようにすれば何とかなりそうです

お礼日時:2001/03/18 21:38

こんにちは。


これで想定どおりなのか、いまいち自信がないのですが、
とりあえず以下のようにしてみたところ、正常に動くように
なりました。

フレーム1のソース-------------------------------
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
var m_num;
function _sendData(num){
m_num = num;
m_sendData();
}
function m_sendData(){
if(window.top.frames[1].ready == true){
window.top.frames[1]._imgChange(m_num);
} else {
setTimeout("m_sendData()", 100);
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="_sendData(1)">
</BODY>
</HTML>

フレーム2のソース-------------------------------
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
var ready;
var img;
ready = false;
img = new Array(2);
//for (i=0;i<2;i++){img[i]=new Image();}
//img[0].src = "images/1.jpg";
//img[1].src = "images/2.jpg";
img[0] = "images/1.jpg";
img[1] = "images/2.jpg";
function _imgChange(num){
nam = "imgname";
//document.images[nam].src = img[num].src;
document.images[nam].src = img[num];
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="ready = true">
<!--
 (*1)
-->
<IMG src="images/3.jpg" name="imgname">
</BODY>
</HTML>
-------------------------------------------------

どうやら、フレーム2のイメージ部分のタグがロードされる
前にフレーム1からそのイメージオブジェクトへアクセス
しようとしたため、正常に動作しなかったのだと思われます。
試しに(*1)部分に大量の文字列を挿入してみるとIEでも
正常に動作しなくなります。Netscape6 は動作が重いので、
よりロードに時間がかかり、バグが顕在化したのだと思います。

それにしても、これで回答になったのでしょうか。
もっとよいやり方を知っている方がいるような気もします。

それでは、失礼します。
    • good
    • 0
この回答へのお礼

早速のありがとうございました
しかし原因がわからないですが、うまく動きません
フレームの入れ子をしているせいか、画像数が実際は15枚と多いせいか
ページの描画にCGIを利用している
などほかにも原因がありそうなんですが・・・

http://homepage2.nifty.com/cradoll/main.html
がそのページです
ページの内容は気にしないで下さい(笑

お礼日時:2001/03/18 14:50

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

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

Q「document.images.src =」についての質問です。

var count = 0;
while(count < 8){
 document.images[nam].src = menu[count].src;
 Wait(200);
 count += 1;
}

javascriptを始めたばかりでソースにまとまりがないので一部の抜粋で申し訳ありません。
「Wait」という関数は引数ミリ秒間ループを繰り返すものです。

上記のプログラムは0.2秒間隔で画像が変わっていく、というもののつもりなんですが、
実際は200*8ミリ秒後にmenu[7].srcで指定された画像に切り替わるだけになってしまっています。
問題があるとしたらどの部分なのでしょうか?
一応ブラウザ上でのエラーは無く、menu配列の中身も確認済みです。

不明な点がありましたら補足要求お願いします。

Aベストアンサー

質問文中のスクリプトについては、具体的な動作がつかめないので、なぜ質問にあるような動作になるのかは、ちょっとわかりません。
Wait()関数の中身も含めたスクリプト全体がわからないことには、どうなっているかつかみにくいです。 こちらのソースを元にして修正するのであれば、スクリプト全体を見直してみる必要があるでしょう。


先の方の回答へのお礼にあるスクリプトの動作についてですが(横槍失礼します)、2点まずいところがあるように思います。
一点は、document.write()メソッドを使っている部分、もう一点はsetTimeout()関数の中で指定している処理内容の記述の仕方が気になります。

エラーの直接の原因になっているのは、ご推察の通りdocument.write()でcountを書き出している点だと思います。 document.write()は、一度ページがロードされたあとに内容を追記するということが、基本的にはできません。 ページロード後にこれを実行した場合、それまでに読み込まれた内容を破棄してその内容を書き出すため、Javascriptの内容もすべて破棄してしまい、動作しなくなるように思います(実行後の停止したページでHTMLソースを表示してみると解りやすいと思います。その時に表示されるソースが、その時点でブラウザが参照しているソースです。)。
できればこの動作は、他のやり方で確認するのが良いと思います。 元の「document.images[name].src = menu[count].src;」で確認してはいかがでしょうか。

あと、setTimeout()の書式ですが、このままだと引数が二回目以降に正常に引き渡されずにエラーになる可能性があると思います。 setTimeout()の第一引数が「"TimerEvent(name)"」と書かれていますが、ここでnameが変数として認識されない(無視される)可能性が残るでしょう。 ここは、イベントハンドラ内で変数を引数とした関数を指定するときと同じような書式に直す必要があります。
具体的には、

setTimeout("TimerEvent('"+name+"')", 1000);

のように、文字列と変数値の扱いを混同されないように修正すると良いと思います。

参考になれば。 失礼しました。

質問文中のスクリプトについては、具体的な動作がつかめないので、なぜ質問にあるような動作になるのかは、ちょっとわかりません。
Wait()関数の中身も含めたスクリプト全体がわからないことには、どうなっているかつかみにくいです。 こちらのソースを元にして修正するのであれば、スクリプト全体を見直してみる必要があるでしょう。


先の方の回答へのお礼にあるスクリプトの動作についてですが(横槍失礼します)、2点まずいところがあるように思います。
一点は、document.write()メソッドを使っている部...続きを読む

QIEでimages[...]のエラーになる原因は?

下記プログラムをIETesterで開くと、

このページのスクリプトでエラーが発生しました。
文字: 3
エラー: 'document.images[...]'はNullまたはオブジェクトではありません
コード: 0

というエラーメッセーが出てしまいます。
Firefoxだと正常に動いたのですが、
document.images[i].srcというのは、IEで対応していないということでしょうか?
それか、そもそもこういった書き方は間違いでしょうか?


<script language="JavaScript">
<!--
rrr = new Image(200,100);
rrr.src = "sample.jpg";

function sss(){
document.fff.nnn.value="";
ppp.innerHTML = ""
for(var i=1; i<=30; i++){
document.images[i].src = rrr.src;
:
:
:
:
:

//-->
</script>
</head>
<body onload="sss()">
<form name="fff">
<img src="title.jpg">
<div id="nnn"></div>
<table>
<tr>
<td><img src="a.jpg" width="200" height="100" onclick="yyy(1)"></td>
<td><img src="a.jpg" width="200" height="100" onclick="yyy(2)"></td>
<td><img src="a.jpg" width="200" height="100" onclick="yyy(3)"></td>

下記プログラムをIETesterで開くと、

このページのスクリプトでエラーが発生しました。
文字: 3
エラー: 'document.images[...]'はNullまたはオブジェクトではありません
コード: 0

というエラーメッセーが出てしまいます。
Firefoxだと正常に動いたのですが、
document.images[i].srcというのは、IEで対応していないということでしょうか?
それか、そもそもこういった書き方は間違いでしょうか?


<script language="JavaScript">
<!--
rrr = new Image(200,100);
rrr.src = "sample.jpg";

function ...続きを読む

Aベストアンサー

IEでもdocument.imagesは使えます。
配列のインデックスは0から始まるので、提示のコードの場合は画像が31個なければ
エラーになると思いますがそのあたりは大丈夫でしょうか。

Q[[prototype]] =__proto__?

[[prototype]] と __proto__ は、同じ意味でしょうか?

Aベストアンサー

__proto__は非標準で実装依存なので、その点で同じではありません。

例えば、Firefoxの場合、下記ページに
__proto__ - JavaScript | MDN
https://developer.mozilla.org/ja/docs/JavaScript/Reference/Global_Objects/Object/proto
> An Object's __proto__ property references the same object as its internal [[Prototype]]
とあるので、Firefoxに関しては同じと見なせると思います。

もっとも、__proto__を実装しているブラウザはたいてい[[Prototype]]を意図して実装していると思われますし
現実的には同じものだと考えてしまっても理解する上で特に問題は無いかと思います。

Qjavascript:(function(q, a, z) { q[a]("f")[z] = Ma

javascript:(function(q, a, z) { q[a]("f")[z] = Math.floor(Math.random()*999999);document.forms[0].submit(); })(document, "getElementById" ,"value");

このブックマークレットをsetIntervalで動かしたいのですがどう書き換えればいいのかよくわかりません。

調べたらstartfncやsetInterval(ここに何かを指定?,ミリ秒);を付ければ可能なことがわかったのですがうまくいきません。
初心者です。何卒宜しくお願いします

Aベストアンサー

こんにちは

>setIntervalで動かしたいのですが~~
setIntervalは以下のような構文になります。
 intervalID = window.setInterval(func, delay);
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval

ご提示のスクリプトは即時関数の形式をとっていますので、さらに関数化(匿名関数でも可)して上記構文のfuncに当てはめれば良いことになります。
http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e
スクリプトは概ね以下の2行と等価ですので、こちらを関数化しても同じですね。
(フォームに乱数を設定しサブミットする)
 document.getElementById("f")..value = Math.floor(Math.random()*999999);
 document.forms[0].submit();


ところで、ご提示のスクリプトではフォームをサブミットするようになっていますが、通常はサブミットするとページが遷移してしまうので、setIntervalで繰り返すことは難しいはずです。
まぁ、target属性が設定されていたりすれば別ですけれど・・・
使い方がいまいちよくわかりませんが、文法的には
 setInterval( function(){
  ~~~
}, dalay);
とするか、
 setInterval(hoge, dalay);
 function hoge(){
  ~~~
 }
のようにすることで、実行が可能なはずです。(繰り返しできる環境であれば・・・)

こんにちは

>setIntervalで動かしたいのですが~~
setIntervalは以下のような構文になります。
 intervalID = window.setInterval(func, delay);
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval

ご提示のスクリプトは即時関数の形式をとっていますので、さらに関数化(匿名関数でも可)して上記構文のfuncに当てはめれば良いことになります。
http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e
スクリプトは概ね以下の2行と等価ですので、こちらを関数化しても同じですね。
(フォ...続きを読む

Q&= ~0x0c; &= ~0x03; |=1;

JavaScriptで分からないコードがあるので教えてください。


■変数設定
var hoge = 0;


■変数格納
・キーを押した時の条件分岐
  ~なら hoge |= 1;
  または hoge |= 2;
  または hoge |= 3;
  または hoge |= 8;

・キーを離した時の条件分岐
  ~なら hoge &= ~0x0c;
  または hoge &= ~0x03;


■変数使用
・swithch文の条件分岐に利用
  (hoge&0x03)
  (hoge&0x0c)


■質問
・どういう意味でしょうか?
・文字コード?
・ビット演算?

Aベストアンサー

ビット演算してるわね

x = x + a

x += a
って書くことができるの

つまり
hoge |= 1

hoge = hoge | 1
のことね

~はNOTのこと

0x
はアスキーコードの16進数表記ねきっと

0x0c は改ページを意味していて
0x03 は文章の最後を意味している
と思われるわ
全文がないので推測だけど


人気Q&Aランキング

おすすめ情報