1ページ内で複数のwindow.onload = functionの動作

解決済

質問者：optional
質問日時：2006/10/02 14:29
回答数：3件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： BLUEPIXY
回答日時：2006/10/02 15:50

window.onload にイベントハンドラを設定する方法でイベントを結びつける場合は、

window.onload=proc1;
window.onload=proc2;
のようにソースが読み込まれて、
当然後のもので、置き換えられてしまうので、
実際にonload イベントが起こってハンドラが呼ばれた時には、最後に設定したものが呼び出されると思います。
こういうイベントに複数のハンドラを割り当てるには、addEventListenerとかattachEvent (ＩＥの場合はこちら）を使います。
prototype.js は、これらのブラウザによる違いを吸収してくれます。
（基本ＩＥでも動作します）

質問文では、単にスクリプトタグによる呼び出しになろうかと思うので、
window.onload =function(){
}
を１つにしたらいいんじゃないかと思います。
問題点としては、同じ名前を使っていることですかね。
実際に試してないので見当違いなコメントだったらすみません。

この回答への補足

ありがとうございます。現状付け焼刃な知識なので、イベントハンドラの設定が悪いのか変数がかぶっているのかの切り分けも危うい状況です。

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>

補足日時：2006/10/02 22:58

通報する

- 0
- 件

通報する

No.3

回答者： talepanda
回答日時：2006/10/03 17:56

prototype.jsを使ってるんだから、

Event.observe(window, 'load', function(){...}, false);

で。

参考URL：http://www.imgsrc.co.jp/~kuriyama/prototype/prot …

この回答への補足

ありがとうございます！！
色々試してみたのですが、なかなかうまくいきません。
試行錯誤してみます。

補足日時：2006/10/04 01:48

通報する

- 0
- 件

通報する

No.2

回答者： BLUEPIXY
回答日時：2006/10/03 17:55

#1>ひとまずここまで直しましたが動きませんでした

#1を全然読まれなかったようです。ｏｒｚ

この回答への補足

いえいえ、全くそういうわけではないのですが（きちんと読んだのですが）、如何せん自分のjavascriptの知識が乏しすぎたゆえの回り道と誤解の産物の＃ここまで直しました　なので、お気を悪くさせてしまったことをお詫びします。

＞window.onload=proc1;
＞window.onload=proc2;
＞のようにソースが読み込まれて、
＞当然後のもので、置き換えられてしまうので、
これは理解できます。ソースをひっくり返すと下にあるものが実行されます。

＞window.onload =function(){
＞}
＞を１つにしたらいいんじゃないかと思います。
これの中身に定義を二つ分入れてheadの中に置いて、本文中でファンクションの呼び出しだけを行うという意味かと解釈しておりました。

＞addEventListenerとかattachEvent (ＩＥの場合はこちら）を使います。
＞prototype.js は、これらのブラウザによる違いを吸収してくれます。
どうして自分でaddEventを書いているのか、何時間もソースをいじり倒していたので最早記憶が定かではないのですが、attachEventを使った例文に併記されていたような気がしますが、ハンドラの問題よりも変数のかぶりを追っていたので中途半端な状態でハンドラの件を放置していました。

色々とお見苦しい限りですが、答えの見えていない自分にとって本当にこいつは難しいです。何卒ご容赦いただけますようご鞭撻の程いただけましたら幸いですorz