- ベストアンサー
<body>にwindow.onload = functionを２つ設定すると、最後に書いたイベントだけが実行されてしまいます。
<body>タグにonloadイベントを実行させる2つの外部jsを<head>内に設置し実行すると、 最後に記述したイベントだけが反映されてしまいます。 http://blog.webcreativepark.net/2008/02/26-185844.html を参考にいろいろといじってはみたのですが、 function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } js初心者でして、上の関数の中にどのように記述をすれば良いのかわかりません。 IE6・IE7・safariで動作させるには、実際にどのようなソースを書けばいいのでしょうか。 どなたかご教授いただけますでしょうか。 <head>内の外部jsは、以下のように記述しました。 <script src="/A.js" type="text/javascript"></script> <script src="/B.js" type="text/javascript"></script> </head> 外部jsのソースは以下になります。 //A.js window.onload = function() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js window.onload = function() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } 以上になります。宜しくお願い致します。
- komin-g
- お礼率50% (2/4)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
・ 参考URLに関して若干の説明をさせていただきます。 ・ 基本的事項として次の２点をまず挙げておきます。 1. 標準のイベントハンドラとして大雑把に旧来のDOMレベル0と新しいDOMレベル2の２つがあります。IEはDOMレベル2をサポートしていません。 2. DOMレベル2のaddEventListener()とIEのattachEvent()は、一つのオブジェクトに対して、複数のイベントハンドラを登録できます。 ・ 参考URLは、旧来のonloadの利用をやめて、2.の方法を薦めています。 ＞＞＞ onloadイベントを設定しているライブラリもあります。 ＞＞＞ ただ、これらの記述方法ですと、最後にonloadに設定された関数しか実行されません。 これは、#1でSAYKA様の述べられている通り、Windowオブジェクトのonloadというフィールド変数への代入により上書きされてしまうからです。 ・ 次の関数は修正するのではなくそのまま登録です。（たとえば、A.js,B.jsのどちらか） function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); // Firefox等 }catch(e){ elm.attachEvent("on"+listener,fn); // IE用 } } ＞＞＞ 上の関数の中にどのように記述をすれば良いのかわかりません。 つまりこの関数は登録し利用するだけで言い訳です。 ＞＞＞ addEventListenerという機能を利用して、イベントに対しての命令を上書きではなく追加していく為の関数になります。 ここで上の2.が利用されているのがわかります。 ・ 後は window.onload = function() { } はどちらも削除して（より正確には、下の２つの関数に変更して）、addEvent()を利用するだけです。 //A.js function eventA() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js function eventB() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } //A.js または B.js addEvent(window,"load",eventA); addEvent(window,"load",eventB); 確認はしていませんが,この２つは B.jsの最後以降に記述すれば間違いはありません。
その他の回答 (3)
- auty
- ベストアンサー率58% (284/486)
その通りでよいはずですが、この場合、 ＞＞＞ 例えば、A.jsに関数を記述し、B.jsにaddEventを記述した場合、 ではなくて、 例えば、A.jsにaddEvent()と関数を記述し、B.jsに関数と２つのと実行コマンド addEvent(window,"load",eventA); addEvent(window,"load",eventB); を記述した場合、 ですね。
お礼
autyさん その通りでした。失礼しました。 問題なく動作しました。 初心者にも分かりやすく教えて頂きありがとうございました。 これから少しずつjavascriptを勉強していきたいと思います。 以下に動作したコードを載せておきます。 //A.js function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } function A() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js function B() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } addEvent(window,"load",A); addEvent(window,"load",B);
- Dumper
- ベストアンサー率28% (24/84)
後から読まれるB.jsの方で //B.js var preOnload = window.onload; window.onload = function() { if(preOnload){ preOnload() } prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } で試してみてください。
お礼
Dumperさんの書かれた通りに記述したら、両方とも実行できました。 ありがとうございます。
- SAYKA
- ベストアンサー率34% (944/2776)
普通のオブジェクトの場合 x = a; x = b; 結果(つまりx)はbだよね？ それが判ったら次は window.onload = function(){/*a*/}; window.onload = function()[/*b*/}; 結果(つまりwindow.onload)は・・・・・
補足
結果は、bが実行されるということ・・・でしょうか。
関連するQ&A
- window.onloadでのfunction
javascript初心者で質問自身が僕が解決したい問題の原因かどうかも解らずに質問しています。 <script type="text/javascript"> <!-- function hoge_1() { ～処理1～ } function hoge_2(hiki_suu) { ～処理2～ } window.onload = function() { document.getElementById("button_1").onclock = hoge_1; document.getElementById("button_2").onclock = hoge_2("watasu"); } // --> </script> 上記のようにページheadにscriptを配置したとします。ページ上のbutton_1がクリックされると処理1が実行されるのですが、hoge_2のように引数を使ってしまうと、onload時に処理2を実行してしまい、button_2は有効に動作しません。 functionの引数の問題なのか、window.onloadの作法なのか、なにが悪いのか全く解らず質問しています。 ご指導のほどよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- <body onload=""> と window.onload
JavaScriptのonload処理についての質問です。 現在Java、JSP、JavaScript等でWebアプリケーションを作成しているのですが、 bodyタグ中のonloadに記載したファンクションが時々呼ばれないという問題が起きています。 （こんな感じで記述 <body onload="hoge();hogehoge();"> hogehoge()がたまに呼ばれないことがある・・・） これを回避する方法として、「onload処理をwindow.onloadに記述すれば良い」 という話を聞きました。 （こんな感じで記述 <script> window.onload = function(){ hoge();hogehoge(); } </script> ） 「bodyタグ中に記述するとたまに呼ばれないものが、window.onloadに記述すると確実に呼ばれる」 なんてことがあるのでしょうか？ 「２つめのファンクションが呼ばれない」という現象がたまにしか発生しないので、 window.onloadに記述する方法で確実に呼ばれるようになったという保証がとれません。 知識として知っている方がいれば是非教えていただきたいです。 よろしくお願い致します。 ※ブラウザはIEを使用 バージョンは IE → 6.0 JavaScript → 1.1 です。
- 締切済み
- JavaScript
- 外部ファイルでBODYのonloadイベントの関数を指定するには？
（１）<BODY onload="funcA()">という形でなく、 ヘッダー内に入れた外部ファイルに （２）document.body.onload=funcA; としたいのですが、 「document.bodyはオブジェクトではありません」 というエラーになってしまいます。 <script language="javascript" src="xx.js">は <head></head>の中に入れています。 どうしたら（２）の方法で、 外部ファイルでbodyのonloadイベントの関数を指定できるでしょうか？
- 締切済み
- JavaScript
- body onload にしない方法
外部jsにて function chgBg() { var n = 2; var i = Math.floor(Math.random()*n); var img = ['http～～～']; document.getElementById('ID').style.backgroundImage = 'url(' + img[i] + ')'; } っとし htmlに <body onload="chgBg()"> っとして、読み込み後にイメージをランダムに表示しています。 問題なく、動作はするのですが <body onload="chgBg()"> ではなく <body> のまま、この動作をしたいのですが js側に何か追加すればこれは可能なのでしょうか？ リロードするたびに、背景がランダムに表示することがしたいです。
- ベストアンサー
- JavaScript
- window.onLoad について
<body> タグに、onload=関数名・・・ と記述するとなぜかオブジェクトがありませんとかで 実行されない時があるため、 <head>タグ内に <script type="text/javascript"> window.onLoad=function(){ 関数名} </script> と記述してみたところ、まったく関数が動作しなくなってしまいました。 ステータスには「ページが表示されました」とでていて、スクリプトエラーにもなっていないようです。 原因がわからず、それならば・・・ htmlを順番に表示していくのだから、htmlの最後のほうに記述すればいいのでは？ と思い、 </body>の直前に <script type="text/javascript"> 関数名 ← onloadで動作させる関数 </script> と記述してみたところ、うまく表示できました。 この記述方法って正しいのでしょうか？ 環境に依存するのか、毎回悩まされるし、毎回対処方法が違ったりしているので ホントに困っています。 アドバイスお願いします。 #何故 window.onLoad=function(){ 関数名 } ではまったく動かなかったのでしょう。。。
- 締切済み
- JavaScript
- JavaScriptでコンストラクタについて
現在、JavaScriptを勉強中なのですが、 コンストラクタについて質問です。 下記のようなコードの場合、document.getElementByIdで取得したID 以外、使いまわしが出来ませんが、 コンストラクタを使って、１ページで複数使用出来るようにするには、 どのように記述すれば良いのでしょうか？ //-----JavaScript----- function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } var c,y,m,d; addEvent(window,"load",function(){ c = document.getElementById("customer_birthday_c"); y = document.getElementById("customer_birthday_y"); m = document.getElementById("customer_birthday_m"); d = document.getElementById("customer_birthday_d"); if(c.options[0].selected == true){ y.disabled = true; m.disabled = true; d.disabled = true; } }); //-----JavaScript----- どなたかご教授ください。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- window.onloadのコマンドについて
下記のソースにあるリセットボタンをクリックした時に、 フォーム内のデータを消去すると共に、window.onloadコマンドを 実行させるようにしたいと考えています。 どのように制御すればよいのか、ご教授頂ければ幸いです。 よろしくお願い致します。 ソース： ---------------------------------------------------------- <script> <!--オンロードさせ、リロード時に選択を保持--> window.onload = loadform; function loadform (){ entryChange01(); entryChange02(); entryChange03(); entryChange04(); } <!--フォームの表示／非表示の制御1--> function entryChange01(){ radio = document.getElementsByName('radio01') if(radio[0].checked) { document.getElementById('table2').style.display = "none"; document.getElementById('table3').style.display = "none"; }else if(radio[1].checked) { document.getElementById('table2').style.display = ""; document.getElementById('table3').style.display = ""; } } <!--フォームの表示／非表示の制御2--> function entryChange02(){ radio = document.getElementsByName('radio02') if(radio[0].checked) { document.getElementById('table5').style.display = "none"; document.getElementById('table6').style.display = "none"; }else if(radio[1].checked) { document.getElementById('table5').style.display = ""; document.getElementById('table6').style.display = ""; } } } </script> <input type="reset" value="リセット" onclick="return confirm('本当に入力内容を削除してもよろしいですか？');" />
- 締切済み
- JavaScript
- BODYタグのonloadについて
こんにちは。 HTMLのBodyタグにて、onload処理を記述しているのですが、 不思議な現象が起きます。。。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript" type="text/JavaScript"> <!-- // 初期表示 function init() { alert("AAA"); var formObj = document.getElementById("starter"); alert("formObj.action = " + formObj.action); formObj.submit(); } //--> </script> </head> <body onload="init()" tabindex="-1"> Now Loading... <form method="post" name="starter" action="/getIchiran.do" > <% System.out.println("このJSPにきてますか？"); %> </form> </body> </html> 上記のように記述しているのですが、 onloadのinit関数が、呼ばれる場合と呼ばれない場合があります・・・ 呼ばれる場合と、呼ばれない場合でも 「このJSPにきてますか？」のログは表示されているので、このHTML（JSP）は呼ばれている模様です。 どうしてこうのような現象が起きるのかさっぱり分からなくて・・・ 何が悪いのか教えて頂けないでしょうか？ 宜しくお願い致します。 IEは6.0、 OSはWindowsXPです。
- ベストアンサー
- HTML
- window.onloadを複数実行したいのです
こんにちは。 最近、サーバーを借りてホームページを作りはじめた初心者なのですが、どなかた教えて下さいm(_ _)m ↓formでselectを使ったプルダウンメニューを設置しました。 <select id="area" name="area" onchange="changeA();"> <option value="1">海</ottion> <option value="2">山</option> </select> このプルダウンメニューを触ると、Javascriptの制御で、海の項目が選択されると海関連の情報が表示され、山の項目が選択されると山関連の情報が表示されるページを作りました。 ↓Javascriptソース function changeA(){ if(document.getElementById('area')){ id = document.getElementById('area').value; if(id == '1'){ document.getElementById('sea1').style.display = ""; document.getElementById('sea2').style.display = ""; document.getElementById('mnt1').style.display = "none"; document.getElementById('mnt2').style.display = "none"; }else if(id == '2'){ document.getElementById('sea1').style.display = "none"; document.getElementById('sea2').style.display = "none"; document.getElementById('mnt1').style.display = ""; document.getElementById('mnt2').style.display = ""; } } } window.onload = changeA; という感じです。 このような制御のプルダウンメニューを同じページにもうひとつ配置したところ、ページをブラウザの更新ボタンで更新したりすると、関係ない項目などが表示されるようになってしまいました。 原因を調べるために検索をしてみたところ、window.onloadを2つ実行させるには特別なことが必要とのことでしたが、どうすればよいのかが全然わかりません。 どなたか教えてくれないでしょうか？ お願いします。
- 締切済み
- JavaScript
補足
ご回答ありがとうございます。解説までして頂き勉強になります。 ＞＞＞次の関数は修正するのではなくそのまま登録です。（たとえば、A.js,B.jsのどちらか） 登録というのはそのまま関数を記述すればいいのでしょうか。 例えば、A.jsに関数を記述し、B.jsにaddEventを記述した場合、 //A.js function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); // Firefox等 }catch(e){ elm.attachEvent("on"+listener,fn); // IE用 } } function eventA() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js function eventB() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } addEvent(window,"load",eventA); addEvent(window,"load",eventB); という記述になるのでしょうか。