【解决方案】如何实现在HTML页面加载完毕后运行某个js
生活随笔
收集整理的這篇文章主要介紹了
【解决方案】如何实现在HTML页面加载完毕后运行某个js
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前景：
今天在開發過程中，發現我js文件里面的方法沒有響應，后來發現是js在html中引入的位置不對。我在head中加載了js，導致我js中的document.getElementById方法失效。因為html中是按順序讀取運行的，那么head中的js是無法獲取后者body中的元素，導致document.getElementById?找不到相應的id對象，自然沒法執行之后的方法（function）了。
解決方案：
1、把js文件放在html的最后面。這個方法簡單粗暴，但是代碼看上去顯得有點凌亂，一般我們習慣在head中加載所需的全部js、css等。所以建議用后者方法。
2、在js中的把需要最后執行的代碼套一個window.onload = function () {...}
例子：
.html中：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>js加載問題</title><script type="text/javascript" src="button.js"></script> </head> <body> <input type="button" id="button" value="按鈕"/> </body> </html>.js中： var button = document.getElementById('button');button.onclick = function () {alert("你點擊了一個按鈕");}
如果你直接這樣寫的話，你點按鈕是木有用滴。
原因就是在沒加載body里面的元素之前，你這個button的id去哪兒找？找不到這個button，談毛onclick的function函數。
所以，正確的代碼如下：
window.onload = function () {var button = document.getElementById('button');button.onclick = function () {alert("你點擊了一個按鈕");} }3、如果你用的是jQuery的話，那就是$(document).ready(function(){...})
? ? ? ps:可以簡寫為：$(function(){...})
轉載于:https://www.cnblogs.com/fifteen718/p/9533964.html
總結
以上是生活随笔為你收集整理的【解决方案】如何实现在HTML页面加载完毕后运行某个js的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三号坦克
- 下一篇： 基于RSA的WEB前端密码加密方案