JS的onload事件

之前按照HTML规范在<head>中嵌套<script>，写JS脚本获取HTML元素并做操作，但有时会报错。
原因：报错 <- 元素为null <- 页面未加载完成(先执行JS脚本获取，之后才加载该元素)。
解决：window.onload事件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS的onload事件</title><script>var e = document.getElementById("two");alert("head " + e);</script>
</head>
<body><h2 id="two">二级标题</h2><script>var e = document.getElementById("two");alert("after " + e);</script>
</body>
</html>

刷新页面，会依次弹出：head null和after [object HTMLHeadingElement]
因为在<script>标签内的普通语句是顺序执行(按照文档加载顺序)，
所以在<head>内部的<script>中，获取不到元素h2#two，必须在h2#two元素之后的脚本才可以获取。

JS代码规范中，<script>尽量嵌套在<head>中。

问题：如何在中的脚本中，获取之后定义的HTML元素？
等整个页面加载完后，再执行相应的JS代码，进行获取即可。

window.onload = 函数表达式;
把页面加载完成之后要执行的JS语句封装到函数中，
将这个函数地址赋到window.onload中。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS的onload事件</title><script>window.onload = function() {var e = document.getElementById("two");alert(head " + e);}</script>
</head>
<body><h2 id="two">二级标题</h2>
</body>
</html>

再次刷新：弹出警告框head [object HTMLHeadingElement]。
在HEML头部的JS脚本中获取HTML元素成功。

JS的onload事件相关推荐

原生js中如果有多个onload事件解决方案
原生js中如果有多个onload事件解决方案参考文章: (1)原生js中如果有多个onload事件解决方案 (2)https://www.cnblogs.com/happy-8090/p/11830 ...
js html body onload,动态添加页面body OnLoad事件的简单js代码
代码如下: /** * 动态添加页面onload事件 * Edit www.jbxue.com */ if (window.attachEvent) { window.attachEvent(&quo ...
函数载入的html触发onload,JS IFRAME动态加载触发onload事件解析
这篇文章主要为大家详细介绍了JS IFRAME动态加载触发onload事件解析,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. JS代码如下: /* ...
JS中的onload事件
借鉴于 https://blog.csdn.net/pseudonym_/article/details/72614776 window.onload事件出现的原因: 页面的代码顺序是从上往下进行加载 ...
加载多个js onload事件
1.将要加载的内容放到onload事件中 (如果出现多个onload可能会出现函数覆盖) 2.使用 document.attachEvent('onreadystatechange',initJS1) ...
php iframe js加载不上,js iframe的onload事件不去作用的原因及解决办法
通过createElement_x_x创建的iframe的onload事件在有些时候不响应,具体原因和解决办法如下. 首先,我们来看一下下面这种方法: function createFrame(){ ...
js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
Js 加载事件（onload）可以作用的标签
2019独角兽企业重金招聘Python工程师标准>>> onload事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在& ...
JS中onfocus()事件，onblur()事件，onload()事件
1. onfocus 事件在对象获得焦点时发生. 实例: <html> <head> <script type="text/javascript"&g ...

JS的onload事件

JS的onload事件相关推荐

最新文章

热门文章