如何在HTML页面中预先自动执行js脚本

2022年12月18日网页前端评论5,747字数 549阅读1分49秒阅读模式

最近面试遇到一个很有趣的问题,给我一段json数据,让我把它们显示到HTML页面中,并可以对数据进行编辑并更新数据源。

问题很简单,但是我对JS不熟啊,于是就尴尬了,我该如何实现把变量数据预填到输入框中呢?

网上大部分案例是通过vue实现的,要么是通过点击按钮实现传输变量,可是要是用原生JS该怎么办呢?

其实答案也简单,就是用window.onload,在DOM元素加载完成后,自动去执行脚本函数,把数据变量插入到输入框中即可。

首先了解下DOM:

DOM加载过程

网页文档加载都是按顺序执行的。

一般浏览器渲染操作顺序大致是一下几个步骤:

  1. 解析HTML结构
  1. 加载外部脚本和样式表文件
  1. 解析并执行脚本代码
  1. 构造HTML DOM模型
  1. 加载图片等外部文件
  1. 页面加载完毕

从以上顺序可以看出,js等脚本会在DOM文档构造之前执行,这样js就无法访问DOM文档对象模型。

所以一般把可执行脚本放在页面初始化事件处理函数中,这样能确保文档加载完毕后再执行脚本。

所以我们一般这样写: window.onload = function(){//执行脚本}

window.onload表示页面加载完了后(包括dom和js)

Vida_2022-12-18_09-56-55.jpg

通过上面这段自动执行函数脚本,就可以把数据变量预先插入到HTML页面中了。

可以说超级简单,但是要是不会,还真的挺难搞定这个任务的。

不用JS,纯CSS实现导航栏Tab切换效果 网页前端

不用JS,纯CSS实现导航栏Tab切换效果

CSS 的强大之处有的时候超乎我们的想象,Tab切换,常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果 不用 Javascript,使用纯 CSS 方案,实现类...
抓包工具Fiddler和谐版下载和使用 网页前端

抓包工具Fiddler和谐版下载和使用

最近开始学Python,涉及很多网络抓包的问题。 网页的话还可以勉强使用浏览器自带的检查工具来操作,如果是本地软件就无法用了。 这个时候,就需要抓包工具Fiddler登场了! 抓包工具Fiddler是...
API调试工具Postman介绍 网页前端

API调试工具Postman介绍

Postman是一款强大网页调试工具的客户端,你能想到的,Postman几乎都提供了。 Postman兼容几乎所有的操作系统,并且提供了WEB版本,可以让你随时随地加班,不错吧。 言归正传,先看下po...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定