読者です 読者をやめる 読者になる 読者になる

使えない?JavaScript忘備録

タイトルまんまです

複数window.onload問題を解決したかった

window.onloadを複数回使うと一番下に記述した物のみ実行されるってやつです。

var num=0;
window.onload=function(){num=1;}
window.onload=function(){
 alert("num:"+num);  //num:0
}


それをsetterを使って何とかしようとしたのがこれです。

var _onload=[];
window.onload=function(){
 for(var i=0;i<_onload.length;i++){
  _onload[i]();
 }
}
Object.defineProperty(window,"onload",{
 set:function(func){
  _onload.push(func);
 }
});
//以降のwindow.onloadは配列_onloadに格納され、window読み込み後に実行されます

var num=0;
window.onload=function(){num=1;}
window.onload=function(){
 alert("num:"+num);  //num:1
}

一応SafariChromeでは動きました。
けどスマホ(iOS)からだと動かなかったんですよ。
エラーで止まります。

Attempting to change configurable attribute of unconfigurable property.
構成できないプロパティの構成可能な属性を変更しようとしています。
by Google翻訳

だそうです。
window直下のプロパティは編集出来ないっぽいですね…


記述がwindow.onloadではなくなってしまいますが、こんな方法もあります。

var _window={
 _onload:[],
 set onload(func){
  this._onload.push(func);
 }
};

var num=0;
_window.onload=function(){num=1;}
_window.onload=function(){
 alert("num:"+num);  //num:1
}

//一番下に記述
window.onload=function(){
 for(var i=0;i<_window._onload.length;i++){
  _window._onload[i]();
 }
}

setterを使わずに配列_onloadに直接追加していく方法もあります。

var _onload=[];

var num=0;
_onload.push(function(){num=1;});
_onload.push(function(){
 alert("num:"+num);  //num:1
});

//一番最後に記述
window.onload=function(){
 for(var i=0;i<_onload.length;i++){
  _onload[i]();
 }
}

多分他にもあります。


ここで紹介したのって一番目のスマホで動かなかったやつ以外記述がwindow.onloadじゃなくなってるんですよね。
変えずになんとか出来ないかな…