ビジネスマンの徹底パソコン奮闘サイト

お知らせ
2011-03-16: 目次を作成しました。
2010-09-17: Google Map 2 記事一覧を作成しました。
2010-07-03: Google Map 3 記事一覧を作成しました。

スポンサーサイト

--年 --月--日 (-- )
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

onloadが複数で困ったら(jQuery編)

2010年 04月08日 (木 )
ブログを作成していて、javascriptで色々と機能を追加していくと
なにやら急にある機能が動かなくなったりした経験はありませんか?

そういった場合、原因は色々あると思いますが
一番良くある例はonloadが複数存在してしまっている事だと思います。

window.onloadは複数存在する場合、
一番最後に実行されたものだけが生き残ると言う性質があります。
なので、例えば

<script src="abc.js" type="text/javascript"></script>
<script src="xyz.js" type="text/javascript"></script>

とコーディングされていて、両方に
window.onloadがあった場合、
xyz.jsのonloadしか実行されません。

jQueryを使用するとこれを簡単に回避することが出来ます。
下記のコードを参照して下さい。

これだけで、onloadが原因でjavascriptが動かなくなっていた場合は、
動くようになると思います。

下記のコードでonloadの関係を簡単にテストしてみました。 この例だと、最初のonloadは次のonloadに消されてしまうため、
alertは"1","2","4"と表示されます。
最初のonloadが実行されないのが実感出来ると思います。

ちなみにjQueryを使用しない方法もあるので、
良かったらご覧下さい。

コメント

よくわかりませんが、当初の動き通りで回避できてませんよね?
多分上のコードで期待する動きとしては、アラートで1234がすべて表示されることだと思うのですが…。
2014/09/03(水) 09:41:11 |URL|no name #aIcUnOeo [編集]
no name 様

コメントありがとうございます。
上記のコードはonloadを複数実装した場合、
最後に書いたonloadだけが有効になると言うコードですので、
アラートの動作は「1,2,4」と実行される様になっています。

アラートを「1,2,3,4」全て表示したい場合は、
window.onload = function(){
    alert("xxx");
}
は使用せずに全て、
$(function(){
    alert("xxx");
});
の形で実装すれば全てのアラートが表示されます。
2014/09/09(火) 23:51:12 |URL|パソコンrice #fZF23eMY [編集]

コメントの投稿

  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

トラックバック

トラックバックURL:http://pcrice.blog129.fc2.com/tb.php/10-efe3f747
  ビジネスマンの徹底パソコン奮闘サイト  
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。