web-dev-qa-db-ja.com

JavaScriptイベントwindow.onloadがトリガーされない

Webサイトに次のコードがあります。

 window.onload = resize;
 window.onresize = resize;

 function resize(){
  heightWithoutHeader = (window.innerHeight - 85) + "px"; 
  document.getElementById("main-table").style.height = heightWithoutHeader;
  document.getElementById("navigation").style.height = heightWithoutHeader;
 }

onresizeは正常に機能しますが、onloadイベントは発生しません。 Firefoxで試しましたが、Chromeで、どちらも動作しません。

ご協力いただきありがとうございます。 ; D

javascriptonloadonload-event
38
user321068

ここでおそらく起こっているのは、_window.onload_が後でオーバーライドされていることだと思います。_<body onload="">_のようなものを経由していないことを確認してください

サイズ変更関数のalert(window.onload)でこれを確認し、実際にアタッチされているものを確認できます。

73
Nick Craver

これは、パートナーに必要なサードパーティjQueryコードを追加したときに起こりました。時代遅れのwindow.onloadをjQueryドキュメントに簡単に変換できたはずです。とはいえ、現代のクロスブラウザー互換ソリューションがあるかどうかを知りたかったのです。

がある！

window.addEventListener ? 
window.addEventListener("load",yourFunction,false) : 
window.attachEvent && window.attachEvent("onload",yourFunction);

私が知っていることを知って、jQueryルートを使用するようにコードを変換できます。そして、サイトに影響を与えないようにコードをリファクタリングするようパートナーにお願いします。

私が修正を見つけたソース-> http://ckon.wordpress.com/2008/07/25/stop-using-windowonload-in-javascript/

24
Allen Hurff

Window.onload行をjavascriptファイルの最後または初期関数の後に移動すると、機能します。

function resize(){
    heightWithoutHeader = (window.innerHeight - 85) + "px"; 
    document.getElementById("main-table").style.height = heightWithoutHeader;
    document.getElementById("navigation").style.height = heightWithoutHeader;
}
// ...
// at the end of the file...
window.onload = resize;
window.onresize = resize;

ただし、onloadも置き換えない場合のベストプラクティスです。代わりに、関数をonloadイベントに添付します。

function resize(){
    heightWithoutHeader = (window.innerHeight - 85) + "px"; 
    document.getElementById("main-table").style.height = heightWithoutHeader;
    document.getElementById("navigation").style.height = heightWithoutHeader;
}
// ...
// at the end of the file...
window.addEventListener ? 
    window.addEventListener("load",resize,false) 
    : 
    window.attachEvent && window.attachEvent("onload",resize);

それは私のために働いたし、私の英語のために申し訳ありません。

2
august0490

これは私にとってはうまくいきます、あなたの問題はどこか他の場所にあると思います：

 function resize(){
  var tester = document.getElementById("tester"),
      html = tester.innerHTML

  tester.innerHTML = html + "resize <br />"
 }  

window.onload = resize;
window.onresize = resize;

ここで自分でテストできます： http://jsfiddle.net/Dzpeg/2/

onLoadと呼ばれる唯一のイベントですか？他のonLoadイベントが競合を引き起こす可能性があります

1
meo

これは、関数resize（）の横にある「window.onload」を呼び出すときに機能します

0
Prabhu M

私にとっては、window.onloadタグ内に記述したときにscript type="text/javascriptが機能していませんでした。

代わりに、script language="Javascript" type="text/javascriptタグに同じものを記述する必要があり、正常に機能しました。

0
theUltimateWinner