へっぽこITエンジニア@名古屋のブログ

Follow me on GitHub

$(document).ready内の関数を呼ぶ方法

$(document).ready(function()の中の関数を外部から無理やり呼び出す方法を紹介します。

たとえば、以下のように$(document).ready内で
関数を定義しても外部から呼び出すことはできません。

$(document).ready(function(){
  const test = () => console.log('test');
});

ボタンなどで、onclick=test()などしても実行されません。 関数testはありません的なエラーが出ると思います。

しかし、DOMがロードされて操作可能になったタイミングでonclickも効くようにしたいとか
あるかもしれませんww
読み込みがすごい遅い画面とか、読み込み前にボタンを押されると困ることありますよね。
(そもそもそんな遅い画面なのがまずい気がしますが・・・)

そんな時に、かなり無理やりな感じはしますが、以下のように
windowに登録することで使えます。

$(document).ready(function(){
  window.FUNC = {test : () => console.log('test')};
});

これにより外部からも
window.FUNC.test()windowを省略してFUNC.test()
とすることで呼び出せます。

FUNCとかも書くのがいやだったら

$(document).ready(function(){
  window.test = () => console.log('test');
});

とすれば、test()で実行できます。

外部から呼べるか呼べないかといえば、頑張れば呼べますという紹介でした。

作成日:2021-06-01  更新日:2021-06-24