- ベストアンサー
1ページ内で複数のwindow.onload = functionの動作
Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>
- optional
- お礼率62% (23/37)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
window.onload にイベントハンドラを設定する方法でイベントを結びつける場合は、 window.onload=proc1; window.onload=proc2; のようにソースが読み込まれて、 当然後のもので、置き換えられてしまうので、 実際にonload イベントが起こってハンドラが呼ばれた時には、最後に設定したものが呼び出されると思います。 こういうイベントに複数のハンドラを割り当てるには、addEventListenerとかattachEvent (ＩＥの場合はこちら）を使います。 prototype.js は、これらのブラウザによる違いを吸収してくれます。 （基本ＩＥでも動作します） 質問文では、単にスクリプトタグによる呼び出しになろうかと思うので、 window.onload =function(){ } を１つにしたらいいんじゃないかと思います。 問題点としては、同じ名前を使っていることですかね。 実際に試してないので見当違いなコメントだったらすみません。
その他の回答 (2)
- talepanda
- ベストアンサー率58% (45/77)
prototype.jsを使ってるんだから、 Event.observe(window, 'load', function(){...}, false); で。
補足
ありがとうございます！！ 色々試してみたのですが、なかなかうまくいきません。 試行錯誤してみます。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1>ひとまずここまで直しましたが動きませんでした #1を全然読まれなかったようです。ｏｒｚ
補足
いえいえ、全くそういうわけではないのですが（きちんと読んだのですが）、如何せん自分のjavascriptの知識が乏しすぎたゆえの回り道と誤解の産物の＃ここまで直しました なので、お気を悪くさせてしまったことをお詫びします。 ＞window.onload=proc1; ＞window.onload=proc2; ＞のようにソースが読み込まれて、 ＞当然後のもので、置き換えられてしまうので、 これは理解できます。ソースをひっくり返すと下にあるものが実行されます。 ＞window.onload =function(){ ＞} ＞を１つにしたらいいんじゃないかと思います。 これの中身に定義を二つ分入れてheadの中に置いて、本文中でファンクションの呼び出しだけを行うという意味かと解釈しておりました。 ＞addEventListenerとかattachEvent (ＩＥの場合はこちら）を使います。 ＞prototype.js は、これらのブラウザによる違いを吸収してくれます。 どうして自分でaddEventを書いているのか、何時間もソースをいじり倒していたので最早記憶が定かではないのですが、attachEventを使った例文に併記されていたような気がしますが、ハンドラの問題よりも変数のかぶりを追っていたので中途半端な状態でハンドラの件を放置していました。 色々とお見苦しい限りですが、答えの見えていない自分にとって本当にこいつは難しいです。何卒ご容赦いただけますようご鞭撻の程いただけましたら幸いですorz
補足
ありがとうございます。現状付け焼刃な知識なので、イベントハンドラの設定が悪いのか変数がかぶっているのかの切り分けも危うい状況です。 functionを1つにしてhead内に持ってくるのは避けたいです。というのも、body以下の本文でループを作って、ループごとに違うRSSを呼び出す可能性があるためです。言い換えればbody内のループの箇所でsrc = "http:～さえ定義できればいいのですが。。。 ひとまずここまで直しましたが動きませんでした。泣きそうです。 <head> <script type="text/javascript" src="http://***/prototype.js"></script> <script type="text/javascript"> function addEvent() { addEvent("ww2","load",check,false); addEvent("ww3","load",check,false); } </script> </head> //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = ww2(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://1箇所目のRSS"; } var xml = {}; xml.onload = ww2(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = ww3(){ var v = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); v.type = "text/javascript"; v.charset = "utf-8"; v.src = "http://2箇所目のRSS"; } var xml = {}; xml.onload = ww3(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>