最近の記事
(02/02)ブログ更新の終了について
(01/22)Picasaでテンプレートを使う 〜 操作方法を動画で解説
(01/13)ShoutMix と Skypeボタンを組み合わせた足跡帳 & チャットボックスの設置
(01/07)画像を使ったクールなスライド・メニュー 〜 imageMenu
(01/03)iPhone/iPodのカバーフロー表示をサイトやブログでも 続きその2
(01/03)イメージスライドスクリプト”noobSlide” 〜サンプル切り出しとボタン画像の利用
(12/31)iPhone/iPodのカバーフロー表示をサイトやブログでも 続き
(12/30)iPhone/iPodのカバーフロー表示をブログでも 〜 ImageFlowをブログで使うには
(07/03)たった1行のスクリプトでできること 〜 IEのJavascript高速化 / IE判定
(07/02)Seesaaブログカスタマイズ 記事ページング機能 / ソーシャルブックマーク機能
(07/02)ブログ記事でHTML/CSS/Javascriptなどのソースコードを綺麗に表示したい 〜 dpSyntaxHighlighter
(06/25)Javascript onloadが複数ある場合の対処法 〜FancyZoomとCubeブログシールを共存させる
(06/25)クールなズームアップを手軽に実現 〜 FancyZoom 1.1
(06/21)Webサイト/ブログのCSSを直感的に理解できるFireFoxアドオン 〜 EditCSS
(06/15)記事の中でHTMLタグを表示したい
(06/15)パンくずリストをつける
(06/12)Slimbox / Lightbox のキャプションにリンクを貼るには
(06/10)slimbox1.52 reflection1.3 バージョンアップへ対応
(05/31)mooSlideBox3.2 が動かない 〜 mooSlide2.jsの修正で解決
(05/28)Mootoolsパノラマ・スクリプト "Pamoorama" VS "Mediabox"+村上スクリプト
2008年06月25日

Javascript onloadが複数ある場合の対処法 〜FancyZoomとCubeブログシールを共存させる この記事をはてなブックマークする |

Evernoteにクリップする

 前記事で紹介した”FancyZoom”を、運営中の他のブログにも設置してみたところ、サムネイル画像をクリックしても別画面で元画像を表示するだけで、うまくズームアップ表示してくれません。

Cube blogseel.jpg 何か他のJavaScriptとバッティングしていないかと調べてみると、以前から設置していた日産キューブのブログシール(以下ブログシール)との相性が悪いようです。ブログシールを外すとFancyZoomはちゃんと動作します。でもお気に入りのブログシールを外すのは忍び難い。何とかならないものか・・・   
 ※対策後は両方ちゃんと動きます。(確認のためこちらにもブログシールを設置)

 ブログシールで読み込まれる外部スクリプトを開いてみると、バッティングの原因が見つかりました。

 163行目からの記述に、window.onload = function(){ document.body.appendChild(cubeLayer); setLayer(); というのがあります。

 一方、FancyZoomの起動には HTMLの<body>タグにonload="setupZoom()"を追加するようになっています。 

 window.onload と body.onload との違い(動作を含めて)は初心者の私にはよくわかりませんが、いずれにせよページが読み込まれたら何か処理を行うという意味で使われるこれらのコードは、後に書かれたものだけが実行されるため、私の場合、FancyZoomの後に記述されているブログシールの処理だけが実行されて、FancyZoomは動かないのです。 やれやれ・・・

 では、これら2つのスクリプトを共存できるようにするにはどうしたらよいか。

 <body onload= で複数の関数を実行させる場合は。<body onload="1番目の処理"; "2番目の処理"> と;(セミコロン)でつなげば良いようです。(参考記事) しかし、今回は一方がwindow.onload、もう一方は<body onload= と使い方も異なります。さらに、ブログシールは利用規約上勝手に記述を改変することは許されていません。

 したがって、FancyZoomの方を工夫してみる必要があります。

 FancyZoomのj実行方法である <body onload="setupZoom()"> というHTMLの記述は、Javascriptでは  window.onload = function(){
   setupZoom();}
 と変更できます。

 これで双方のスクリプトが window.onload に統一できました。

 問題はwindow.onload で複数の処理を行わせるのはどのように記述したらよいかということになります。

 困ったときの神頼み、Google頼みで検索してみるとありました!

 こちらは海外のサイトですが、まさにこの問題の解決法が書かれています。

<コード>

<サンプル>

 さっそく、この通りに記述した外部スクリプトファイルを置いてみたら、見事FancyZoomとブログシールの両方がちゃんと動作しました♪

  FancyZoom動作確認用画像

 JPN004.JPG JPN033.JPG JPN011.JPG

  <結論>

 FancyZoomの設定に関してHTMLは次のようになりました(該当部分抜粋) もちろんこれはFancyZoomに限らず、window.onload や body onload= で呼び出されるスクリプトを共存する場合に応用できます。 解決用のスクリプトはJavascriptの冒頭に設置することで、それ以降 window.onload を使用したスクリプトを読み込んだ場合でもバッティングが生じないようにしておきます。 変更後の内容で「addonload.js」という名前のjsファイルがそうです。内容はこちらのサイトの記述の通りです。

 変更前: src= の部分はご自身のサイトやブログに合わせて変更してください

 変更後: src= の部分はご自身のサイトやブログに合わせて変更してください

posted by 飛梅 at 22:21 | Comment(3) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんばんは。はじめまして。
ずっと悩んでいた「ページロード時に行う処理を異なる場所で指定する」が、おかげさまで解決できました。
さっそく自分のサイトにも組み込んでみます。ありがとうございました。
Posted by なおさん at 2011年02月07日 00:01
なおさん様

コメントありがとうございます
更新を終了してしばらく経ちますがお役に立てたようで何よりです。こちらも嬉しく思っています。
Posted by 飛梅 at 2011年02月07日 10:45
はじめまして。

更新終了されているのにすみません。
seesaaブログに設置しようと思っているのですが、
カスタマイズ初心者で、スクリプトの事も初心者です。
外部スクリプトの事で分からない事があるので質問させて頂きます。

外部スクリプトを作成する際に、上の<コード>を記述して、
addonload.js というファイルを作ればいいのですか?
<サンプル>はどう使えばいいのでしょうか。

また、作ったaddonload.jsファイルは、seesaaの
ファイルマネージャにアップロードすればいいのですか?

初歩的な質問ですみません。
お時間ある時によろしくお願いします。m(_ _)m
Posted by そらまめ at 2011年02月18日 18:25
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。