关于js写在head部分的问题

最新推荐文章于 2024-01-03 09:13:00 发布
最新推荐文章于 2024-01-03 09:13:00 发布
阅读量2.5k 收藏 3
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41100045/article/details/81110257
版权

当我们将js写在head部分时，我们要知道，html页面的加载顺序是从上到下的，如果我们写的js代码需要在文档加载完成后才能够去执行（一般都是要到文档加载完才执行的），那么我们放到<head>内可能导致无法获取对象的情况

为了避免类似情况的发生，可以使用以下方式:

（1）.将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。

（2）.通过window.onload事件来执行脚本代码。

window.onload=function(){

  document.getElementById("bg").style.backgroundColor="#F90";

}

但注意不能为window.onload事件绑定多个事件处理函数，最后一个会覆盖前面的所有函数。

（3）$(document).ready(function(){

      //执行代码

  })    

另：在使用这个方法时，别忘了在网页里添加jQuery，比如可以加入这样一行代码

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script> 

且window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 

sweet_tr
关注
写在body的js跟写在head的区别
ganker1990的专栏
02-21 767
写在里的js会在网页全部 载入完成后执行  而写在 里的js则是 网页加载到那就执行 可以运行下面的这段代码试下 alert("我是head里的js，我在网页全部载入完成后执行") body里的js前的内容 alert("我是body里的js，网页解析到这里我就执行") body里的js后的内容 而如果写在里的话，并且 写在html上面的话
head和body引入js的问题
qq_16546829的博客
04-02 754
为什么有些js需要在body中引入
js向head中添加js代码
weixin_33670786的博客
04-26 1432
js向head中添加js代码 1.$("&lt;script&gt;").attr("type","text/javascript") .html('function AddScptTest(){alert("this function added by js.");}function AddScptTest2(){alert("AddScptTest2");}') .appendTo(
js放head头里
寂寥人生
05-22 405
如果你非要放在head里的话，把你的代码放到window.onload里边 window.οnlοad=function(){ 你的js代码 } 或者用jquery的 $(document).ready(function(){ 你的js代码 })
怎么分别javascript写在<head>里还是<body>里面?
weixin_30321449的博客
08-02 178
怎么分别javascript写在<head>里还是<body>里面? 具体哪些语句写在<body>里，哪些语句写在<head>里 满意答案 BeginNow|1218个满意答案2010-03-10 需要预载和重复使用的函数可以写在head里...
将JS写在＜head＞与＜body＞里的区别
wh445306
10-09 1948
Javascript写在哪里？概括起来就是三种形式： 1. 内部：Html网页的<body></body>中； 2. 内部：Html网页的<head></head>中； 3. 外部：外部JS文件里。 (1) Javascript写在<body></body>中 当浏览器载入网页Body部分的时候，就执行其中的Javascript语句，执行之后输出的内容就显示在网页中。 <html> <head></he.
javascript写在head标签中产生的报错.pdf
12-16
然而，当JavaScript位于`<head>`标签中时，需要注意一些潜在的问题，正如“javascript写在head标签中产生的报错”这个标题所描述的那样。 在这个例子中，我们看到一个简单的HTML结构，包含`<head>`和`<body>`标签。...
head first JavaScript源码
05-16
在《Head First JavaScript源码》中，你可能会看到关于对象和原型的讲解。JavaScript的面向对象特性基于原型，对象可以包含属性和方法，并且可以互相继承。原型链是JavaScript实现继承的关键机制，它允许一个对象...
js放到head中失效的原因与解决方法
10-20
而内部JavaScript则是直接写在HTML文档中的标签内。在放置位置上，外部JavaScript由于需要从服务器加载，通常放在<head>中以支持异步加载（如使用async或defer属性），这样不会阻塞页面的渲染。而内部JavaScript一般...
html5.js文件，在head部分引用该文件，使各种浏览器支持html5
04-16
HTML5.js 文件是一种JavaScript库，...总的来说，HTML5.js是开发者解决浏览器兼容性问题的一种工具，它通过JavaScript代码来弥补旧浏览器对HTML5新特性的不足，使得更多的用户能够在任何浏览器上享受更丰富的Web体验。
JS代码放在head和body中的区别分析
12-10
那么有什么不同呢？先看一个例子： 一个二级级联动态下拉列表框，一级分类（即大类别）id=”vSort0″. 代码如下: <head> function changelocation(id) {…………} </head> <body><select class=”input1″ id=”vSort0″ name=”vSort0″ onChange=”changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);” style=”width:100px;”>……省略……</sele
head first javascript 中文版.pdf
06-20
JavaScript是一种广泛应用于Web开发的脚本语言，它主要在客户端运行，为网页添加交互性，使得用户能够与页面进行动态沟通。"Head First JavaScript"是一本面向初学者的优秀教材，旨在通过直观、易懂的方式教授...
JS实现动态添加外部js、css到head标签的方法
极客神殿
07-23 4729
本文实例讲述了JS实现动态添加外部js、css到head标签的方法。 function appendJQCDN() { var head = document.head || document.getElementsByTagName('head')[0]; var script = document.createElement('script'); var style = do...
magento教程---把js代码加在页面的head标签
markdown
12-15 673
如果是default.xml是给所有的页面都加 如果指定xml，是给指定的xml页面加 referenceblock 的那么是 head.additional这个block，是用来控制head标签内的内容。 视频地址：https://www.youtube.com/watch?v=wEVANTVjgHY&list=PL9Q0S-CmtAhJVjwnK5ip6H84sCuRQcACY&index=17 ...
将js代码放到<head>标签和放到<body>标签里的区别
anisweir的专栏
04-12 745
JavaScript中，将js代码放到标签和放到标签里的区别： 放到标签里需要加载后才生效，加载代码如下：  window.onload=function(){} 放到标签中则不需要加载。
前端判断文件是否存在,并把获取到的js手动写入到head中
一个韩韩韩
04-15 1500
用两种方式，当在模块内开发，能够使用node的fs模块进行判断，不在模块内开发时，采用XMLHttpRequest和ActiveXObject进行判断 使用fs模块 const fs = require('fs') fs.exists(filePath, (exists) => { if (exists) { console.log("文件已存在"); } else { console.log("文件不存在"); } }); 使用XMLHttpRequest和Acti
JavaScript学习笔记——如何将JavaScript代码加入网页（＜script＞标签）
Insomnia_X的博客
07-10 3400
如何将JavaScript代码加入网页 如何将JavaScript代码加入网页？——使用<script>元素 HTML文件中包含众多元素，如<html>、<head>、<script>、<body>等 使用<script>标签将JavaScript代码添加到网页的<head>或<body>元素中 方法一：使用<script>将代码嵌入<head>元素中 这是常见的方式，能让代码更容易找到，
JS新手入门笔记整理：JS引入方式
太空背包客的博客
01-03 656
JS引入方式
写一个能实现在HTML页面的<head>部分输出“Hello, JavaScript!”的js代码
最新发布
09-09
要实现在HTML页面的 `<head>` 部分输出 "Hello, JavaScript!"，你需要使用 `document.write()` 或者 `<script type="text/javascript">` 来插入JavaScript代码。这里是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 这里是你的JavaScript代码 --> <script type="text/javascript"> window.onload = function() { document.write("Hello, JavaScript!"); // 页面完全加载后才输出 }; </script> </head> <body> </body> </html> ``` 这段代码会在页面加载完成之后，在 `<head>` 中打印出 "Hello, JavaScript!"。`window.onload` 事件监听器确保了只有在所有资源加载完成后才会执行这个函数。 如果你想在 `<head>` 的开始就立即输出，可以去掉 `window.onload` 并直接写入： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> document.write("Hello, JavaScript!"); // 立即输出 </script> </head> <body> </body> </html> ``` 但是，`document.write()` 在现代前端开发中较少使用，因为它会替换已存在的文档内容，可能导致意料之外的问题。如果只是为了展示效果，推荐使用 `<p>` 标签或其他元素包裹文本，而不是直接写入。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值