在网页加载后执行 JavaScript 代码 | 您所在的位置:网站首页 › 网页运行程序 › 在网页加载后执行 JavaScript 代码 |
当前位置:主页 > 学无止境 > WEB前端 >
WEB前端
编程语言
网络
算法
操作系统
数据库
在网页加载后执行 JavaScript 代码
作者:迹忆客
最近更新:2023/03/11
浏览次数:
在执行任何 JavaScript 代码之前,我们始终必须确保首先在浏览器上呈现所有 HTML 元素。由于我们将在 JavaScript 代码中引用这些 HTML 元素,因此需要在网页之前加载这些元素。 在 head 标签内编写 script 标签不是一个好主意(这仅在你将第三方脚本加载到代码中时才有意义),因为 HTML 文档是从上到下执行的,而 head 标签是出现在 body 标签之前。因此,它将首先执行,然后是 body 标签。 由于我们所有的网页内容都存在于 body 标签内,而 body 标切换现在 head 标签之后,因此不需要在 head 内添加 JavaScript 代码,因为它将无法找到 HTML 元素。请注意,到目前为止,尚未创建元素。 在所有网页的内容完全呈现在屏幕上之后,有多种方法可以加载 JavaScript。以下是一些众所周知的方法,你可以在网页完全加载后按照这些方法执行 JavaScript 代码。 在 JavaScript 中的 body 标签末尾添加 script 标签在 body 标签的末尾添加一个 script 标签是加载 JavaScript 代码的常用方法。至此,网页的所有内容都在屏幕上正确呈现。因此,我们可以轻松地在 JavaScript 代码中找到或引用这些 HTML 元素,而不会在此过程中遇到任何错误。 下面的程序显示了它是如何完成的。 在 JavaScript 中使用 onload 事件在页面加载后执行 JavaScript 的另一种方法是使用 onload 方法。onload 方法等待页面加载完毕。一旦这样做,这个过程就会执行 JavaScript 代码。 有两种编写 JavaScript 代码的方法。一种方法是在 body 标签下方的 script 标签内编写 JavaScript 代码,然后调用 onload 方法内的函数。你还可以创建一个单独的文件来编写 JavaScript 代码,在 body 标签末尾的 HTML 中链接该文件,然后在 onload 方法内调用该函数。 在 JavaScript 中的 body 标签上使用 onload 事件onload 方法需要一个 target 变量。在这种情况下,我们将在 body 标签上使用 onload 方法,使其成为 target。 在 onload 方法中,我们只需要传入一个函数。现在,这个函数只有在网页的所有内容都完全加载后才会执行。 This is an example of onload. function myFunction() { console.log("function called..."); }输出: function called...在 body 标签中,我们只有一个 h1 标签和一个 script 标签。在 script 标签中,我们有一个 myFunction() 函数,它向 function called... 控制台窗口打印一条消息。要在页面加载后执行此函数,我们只需将其传递到 onload 方法中。 在 JavaScript 文件中的 window 对象上使用 onload 事件使用 onload 方法的另一种方法是在 window 对象上。window 对象代表整个浏览器窗口。在浏览器窗口中的元素完全执行后,我们可以使用 onload 方法执行我们的 JavaScript 代码。 This is an example of onload. window.onload = function () { console.log("function called..."); }在这里,我们有与上一个相同的代码。这里唯一的区别是我们在 window 对象上使用了 onload 方法,该对象现在是目标。程序最终将调用该函数,并在控制台窗口上打印消息函数调用...。 上一篇:JavaScript 中可调整大小的元素 下一篇:JavaScript 隐藏/显示元素 相关文章 JavaScript 有效变量名发布时间:2023/03/11 浏览次数:138 分类:WEB前端 本教程通过实际示例演示了 JavaScript 有效的变量名称。文章还列出了编写有效变量名的规则。 在 JavaScript 中获取 onClick 按钮 ID发布时间:2023/03/11 浏览次数:78 分类:WEB前端 本教程将教你如何获取单击的 HTML 按钮的 ID。我们将解释可用于获取 ID 的四种方法。这些方法包括 this.id、event.target.id、addEventListener 和 jQuery 的使用。 使用 JavaScript 将 ID 添加到元素发布时间:2023/03/11 浏览次数:191 分类:WEB前端 本教程演示了如何使用 JavaScript 将 ID 属性添加到 HTML 元素。 JavaScript 使用变量作为键发布时间:2023/03/11 浏览次数:54 分类:WEB前端 JavaScript 对象被定义在一个键值对中,其中的键代表唯一的身份,并且值不必一直是独占的。本文我们将在 JavaScript 中使用变量作为键。 在 JavaScript 中声明全局变量发布时间:2023/03/11 浏览次数:180 分类:WEB前端 本教程介绍了如何在 JavaScript 中声明全局变量。 JavaScript 按 ID 删除元素发布时间:2023/03/11 浏览次数:151 分类:WEB前端 本教程教授如何使用 JavaScript 中的 id 删除 html 元素。 在 JavaScript 中访问会话变量发布时间:2023/03/11 浏览次数:191 分类:WEB前端 在本文中,我们将看到如何在 JavaScript 中访问会话变量。 在 JavaScript 中将 ID 添加到 HTML 元素发布时间:2023/03/11 浏览次数:173 分类:WEB前端 在本文中,我们将讨论如何使用 JavaScript 中的 Element.id 属性为 HTML 元素设置 ID。 在 JavaScript 中打印 div 元素的内容发布时间:2023/03/11 浏览次数:64 分类:WEB前端 本教程展示了如何在 JavaScript 中打印 div 元素的内容。 转载请发邮件至 [email protected] 进行申请,经作者同意之后,转载请以链接形式注明出处 本文地址: |
CopyRight 2018-2019 实验室设备网 版权所有 |