1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 【解决方案】如何实现在HTML页面加载完毕后运行某个js

【解决方案】如何实现在HTML页面加载完毕后运行某个js

时间:2020-09-11 14:40:27

相关推荐

【解决方案】如何实现在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(){...})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。