blog.kur.jp

バイオリンと山、自転車をこよなく愛するkurのチラシの裏。たまには技術的なことを書いたりするかも知れません。

ページ読み込み時のコード実行

代表的なものにGoogle Analyticsがあるんですが,WebサイトのHTMLに数行程度のJavaScriptのコードを埋め込んでもらうことで,何らかの機能を提供するサービスってのが存在します.

こういったサービスを提供する場合,考慮しなければいけないことの1つに,オリジナルのWebサイトに副作用を発生させないって言う事があると思います.

副作用って言うのは例えば,オリジナルのWebサイトの中で,何らかの処理を行うJavaScriptコードがあったとします.仮に,こんなコードがあるとしましょう.

window.onload = function(){ alert('読み込んだよ!'); }

このコードの意味としては,Webサイトの読み込みが終わった時点で,「読み込んだよ!」と言う内容のアラートを表示しなさいって言うことです.まぁ,こんな処理を何に使うのかは分かんないけど,場合によっては必要なこともあるんじゃないでしょうか.

ところが,追加で提供するサービスの中でも,Webサイトの読み込みが終わった時点で,アラートを出したいと考えた場合,こう書いてしまうと,「読み込んだよ!」って言うアラートは表示されず,「追加のスクリプト動作しまーす!」っていうアラートのみが表示されます.

window.onload = function(){ alert('追加のスクリプト動作しまーす!'); }

なんでかって言うと,window.onloadオブジェクトの内容を上書きしてしまうから.本来,2つのアラートを出したければ,こんな感じにすれば解決なんですが,追加で読み込んだスクリプトから,オリジナルのスクリプトを変更して,こういうことは出来ません.

window.onload = function(){ alert('読み込んだよ!'); alert('追加のスクリプト動作しまーす!'); }

で,どうするか,なんですが,addEventListnerを使います.addEventListnerを利用した場合,onloadに設定した関数の他に,複数の関数を設定できるみたいです.こんな感じで.

window.addEventListener('load', function,);

まぁ,当然っちゃぁ当然なんですけど,オリジナルのwindow.onloadを上書きしないためには,こういうことを考える必要があるみたいです.ていうか,まぁ思いっきりはまってたんですが.