ページが読み込まれた時に表示していたテキスト、或いは画像を
一定時間が経過した後、自動的に変更する。
そんな動きをjavascriptで実現させるべくチャレンジしました。
IEの意味不明な動作があるため、その無理やりの応急処置です。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
その意味不明な動作とは、
カート機能のあるサイトで、数量を指定し「カートへ入れる」ボタンを押すと、
何故か指定した数量の倍の数量がカートへ入ってしまう。
数量管理はsessionを使っているのだが、
どこかでうまくsessionのクリアが出来ていないのかもしれない。
しかし、「カートへ入れる」ボタンのあるページへ遷移した後、
ページが最後まで読み込まれてから４秒以上経過すると、
上記のような問題は決して起こらない。
よって４秒以上経過してから「カートへ入れる」ボタンをクリック出来るように、
一定時間経過後に画像を表示させる応急処置をすることにした。
現象はIE6と7のみ発生し、他のブラウザでは上記のような問題は皆無。
そして原因は未だ不明。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
そしてまず自分でやってみた。
＜！－－－－－－－－－外部ファイル－－－－－－－－－＞
ｖａｒ ａａａ＝”ａａａａａａａａａａａａａａａ”；
ｖａｒ ｂｂｂ＝”ｂｂｂｂｂｂｂｂｂｂｂｂｂｂｂ”；
ｆｕｎｃｔｉｏｎ ａｂｐｅｎ（）｛
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（ａａａ）；
ｓｅｔＴｉｍｅｏｕｔ（’ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（ｂｂｂ）’，５０００）；
｝＜！－－－－－－－－－外部ファイル－－－－－－－－－＞
＜ｈｔｍｌ＞
＜ｈｅａｄ＞ｊｓのｓｒｃを指定＜／ｈｅａｄ＞
＜ｂｏｄｙ＞
他のＨＴＭＬタグは省略しています。
＜ｓｃｒｉｐｔ ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”＞
ａｂｐｅｎ（）；
＜／ｓｃｒｉｐｔ＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
これだと、aaaは問題なく表示されているのだが、
setTimeoutでbbbを読み込むとページが切り替わってしまい、
白紙のページにbbbが表示されてしまった。
要因は特定出来ていないが、
document.writeの使い方がよくなかったのかもしれない。
新しいdocument.writeに上書きされてしまい、新しく読み込まれてしまうのかも。
で、次の方法。
＜！－－－－－－－－－外部ファイル－－－－－－－－－＞
（ｆｕｎｃｔｉｏｎ（）｛
ｓｅｔＴｉｍｅｏｕｔ（ｆｕｎｃｔｉｏｎ（）｛
ｖａｒ ａａａ ＝ ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ｈｏｇｅ”）；
ｖａｒ ｂｂｂ ＝ ”．／ｉｍａｇｅｓ／ｃａｒｔｎｉ．ｇｉｆ”；
ａａａ．ｓｒｃ ＝ ｂｂｂ；
｝，５０００）；
｝）（）；
＜！－－－－－－－－－外部ファイル－－－－－－－－－＞
＜ｈｔｍｌ ｌａｎｇ＝”ｊａ”＞
＜ｈｅａｄ＞
＜ｔｉｔｌｅ＞ｓａｍｐｌｅ＜／ｔｉｔｌｅ＞
＜／ｈｅａｄ＞
＜ｂｏｄｙ＞
＜ｐ＞＜ｉｍｇ ｉｄ＝”ｈｏｇｅ” ｓｒｃ＝”ａａａａａａａａａａａａａａａ．ｊｐｇ” ａｌｔ＝”ａａａ画像”＞＜／ｐ＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
こうすると実現できた。
自分なりの解釈としては
getElementByIdでIDを指定し、
HTMLタグでそのIDを読み込む。これはdivでもpでもいいと思う。
んで、その指定したIDのsrc部分みbbbを代入する。
setTimeoutを使い、時間差でそのfunctionを機能させる。
これは知恵袋にだして返ってきた回答を修正し、
実際に動かせるようにしてみたソース。
こんなんで2日もかかり、しかも自分の力だけで解決出来なかった。。。
くやしいね。
とりあえずもう少しjs勉強したいな。
一定時間が経過した後、自動的に変更する。
そんな動きをjavascriptで実現させるべくチャレンジしました。
IEの意味不明な動作があるため、その無理やりの応急処置です。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
その意味不明な動作とは、
カート機能のあるサイトで、数量を指定し「カートへ入れる」ボタンを押すと、
何故か指定した数量の倍の数量がカートへ入ってしまう。
数量管理はsessionを使っているのだが、
どこかでうまくsessionのクリアが出来ていないのかもしれない。
しかし、「カートへ入れる」ボタンのあるページへ遷移した後、
ページが最後まで読み込まれてから４秒以上経過すると、
上記のような問題は決して起こらない。
よって４秒以上経過してから「カートへ入れる」ボタンをクリック出来るように、
一定時間経過後に画像を表示させる応急処置をすることにした。
現象はIE6と7のみ発生し、他のブラウザでは上記のような問題は皆無。
そして原因は未だ不明。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
そしてまず自分でやってみた。
＜！－－－－－－－－－外部ファイル－－－－－－－－－＞
ｖａｒ ａａａ＝”ａａａａａａａａａａａａａａａ”；
ｖａｒ ｂｂｂ＝”ｂｂｂｂｂｂｂｂｂｂｂｂｂｂｂ”；
ｆｕｎｃｔｉｏｎ ａｂｐｅｎ（）｛
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（ａａａ）；
ｓｅｔＴｉｍｅｏｕｔ（’ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（ｂｂｂ）’，５０００）；
｝＜！－－－－－－－－－外部ファイル－－－－－－－－－＞
＜ｈｔｍｌ＞
＜ｈｅａｄ＞ｊｓのｓｒｃを指定＜／ｈｅａｄ＞
＜ｂｏｄｙ＞
他のＨＴＭＬタグは省略しています。
＜ｓｃｒｉｐｔ ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”＞
ａｂｐｅｎ（）；
＜／ｓｃｒｉｐｔ＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
これだと、aaaは問題なく表示されているのだが、
setTimeoutでbbbを読み込むとページが切り替わってしまい、
白紙のページにbbbが表示されてしまった。
要因は特定出来ていないが、
document.writeの使い方がよくなかったのかもしれない。
新しいdocument.writeに上書きされてしまい、新しく読み込まれてしまうのかも。
で、次の方法。
＜！－－－－－－－－－外部ファイル－－－－－－－－－＞
（ｆｕｎｃｔｉｏｎ（）｛
ｓｅｔＴｉｍｅｏｕｔ（ｆｕｎｃｔｉｏｎ（）｛
ｖａｒ ａａａ ＝ ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ｈｏｇｅ”）；
ｖａｒ ｂｂｂ ＝ ”．／ｉｍａｇｅｓ／ｃａｒｔｎｉ．ｇｉｆ”；
ａａａ．ｓｒｃ ＝ ｂｂｂ；
｝，５０００）；
｝）（）；
＜！－－－－－－－－－外部ファイル－－－－－－－－－＞
＜ｈｔｍｌ ｌａｎｇ＝”ｊａ”＞
＜ｈｅａｄ＞
＜ｔｉｔｌｅ＞ｓａｍｐｌｅ＜／ｔｉｔｌｅ＞
＜／ｈｅａｄ＞
＜ｂｏｄｙ＞
＜ｐ＞＜ｉｍｇ ｉｄ＝”ｈｏｇｅ” ｓｒｃ＝”ａａａａａａａａａａａａａａａ．ｊｐｇ” ａｌｔ＝”ａａａ画像”＞＜／ｐ＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
こうすると実現できた。
自分なりの解釈としては
getElementByIdでIDを指定し、
HTMLタグでそのIDを読み込む。これはdivでもpでもいいと思う。
んで、その指定したIDのsrc部分みbbbを代入する。
setTimeoutを使い、時間差でそのfunctionを機能させる。
これは知恵袋にだして返ってきた回答を修正し、
実際に動かせるようにしてみたソース。
こんなんで2日もかかり、しかも自分の力だけで解決出来なかった。。。
くやしいね。
とりあえずもう少しjs勉強したいな。