js放到head中失效的原因与解决方法

最新推荐文章于 2021-06-10 17:48:53 发布
最新推荐文章于 2021-06-10 17:48:53 发布
阅读量184 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/daochong/p/7428354.html
版权

1.今天写js碰到一个奇怪的问题，写好的js放到body里面执行，但是放到head中没有任何效果，为什么导致这种原因呢？

看失效代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
  < head >
  < title > new document </ title >
  < meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" />
  < style type = "text/css" >
  .login{width:40px;height:25px;line-height:25px;margin-top:30px;text-align:center;color:#FFF;}
  </ style >
  < script type = "text/javascript" src = "jquery-1.7.1.min.js" ></ script >
  < script type = "text/javascript" >
  $(".login").click(function(){
    alert(1);
    });
  </ script >
  </ head >
  < body >
  < input type = "text" class = "pass" />
  < div id = "enter" class = "login" > 登录</ div >
  </ body >
</ html >

2.解决办法：把js代码放到body中，或者利用 window.onload = function(){} 代码包裹，文档加载之后再执行，以后不建议放到head中。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
  < head >
  < title > new document </ title >
  < meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" />
  < style type = "text/css" >
  .login{width:40px;height:25px;line-height:25px;margin-top:30px;text-align:center;color:#FFF;}
  </ style >
  < script type = "text/javascript" src = "jquery-1.7.1.min.js" ></ script >
  < script type = "text/javascript" >
  window.onload = function(){
  $(".login").click(function(){
    alert(1);
    });
  }
  </ script >
  </ head >
  < body >
  < input type = "text" class = "pass" />
  < div id = "enter" class = "login" > 登录</ div >
  </ body >
</ html >

3.原因：

因为文档还没加载，就读了js，js就不起作用了想在head里用的话，用window.onload = function(){//这里包裹你的代码}

js可以分为外部的和内部的，外部的js一般放到head内。内部的js也叫本页面的JS脚本，内部的js一般放到body内，这样做的目的有很多：

1.不阻塞页面的加载(事实上js会被缓存)。

2.可以直接在js里操作dom，这时候dom是准备好的，即保证js运行时dom是存在的。

3.建议的方式是放在页面底部，监听window.onload 或 readystate 来触发js。

4.延伸：

head内的js会阻塞页面的传输和页面的渲染。head 内的 JavaScript 需要执行结束才开始渲染 body，所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时，或者特定区块后引入和执行 JavaScript。head 内的 JavaScript 需要执行结束才开始渲染 body，所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时，或者特定区块后引入和执行 JavaScript。

所以在head内的js一般要先执行完后，才开始渲染body页面。为了避免head引入的js脚本阻塞流浪器中主解析引擎对dom的解析工作，对dom的渲染，一般原则是，样式在前面，dom文档，脚本在最后面。遵循先解析再渲染再执行script这个顺序。

转载于:https://www.cnblogs.com/daochong/p/7428354.html

dejz8829
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现页面中录音功能的方法
12-01
确保在<head>部分引入必要的CSS和JavaScript文件，例如在这里引用了名为"recorder.js"的外部脚本文件。 接着，为了获取录音权限，我们需要使用navigator.mediaDevices.getUserMedia方法。这个方法会弹出请求用户...
HTML引入外部js脚本，放在head中不起作用,放在body中才起作用
OceanWaves1993的博客
08-30 468
这是因为加载HTML文档时，先加载了js脚本后就不起作用了。 一般引入外部css文件放在head中，引入外部js脚本放在body中。 先渲染HTML文档(css)，再加载特效(js) ...
script中获取不到元素id
weixin_34087503的博客
12-11 329
<head><script type="text/javascript"> function getchange(){ var date = new Date(); var sec = date.getSeconds(); var spanNode = document.getElementById("time"); spanNode....
JS放在head中和放在body中的区别
大头之家
07-13 1592
在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行。 一、区别 浏览器解析html是从上到下的。 如果把javascript放在head里的话，则先被解析,但这时候body还没有解析，所以会返回空值。一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码： windows.o
html内嵌要放在head,css为什么要放在head标签中
weixin_35965051的博客
06-05 403
思考: css为什么要放在head标签中, 而不能像javascript一样置于body标签尾部?Talk is cheap, show me the code.OK, 那我们通过写一些代码来得出结果在这里先说chrome控制台的一个小技巧:限制download速度对我们的测试很有帮助! 可以让我们看清一些细节我们先把download速度限制为40kb/s, 开始测试:当css引入位置放于body...
vue轻量级框架无法获取到vue对象解决方法
11-28
2. **将Vue.js 放在body底部**：将Vue.js的引入放到`</body>`标签之前，这样可以确保在执行任何JavaScript代码之前，Vue已经加载完毕。例如： ```html ... <!-- 其他HTML内容 --> <script src="path/to/vue.js...
Echarts.js无法引入问题解决方案
01-21
到github下载的js一直引入不了。注意是引入dirt文件夹下的echarts.js 把这个文件夹放入工程即可。其余都不用。 代码部分简单的一匹： <!DOCTYPE html> <html> <head> <meta charset=utf-8> ...
为什么js文件放在head里页面布局出不来？
become a programmer
03-28 744
之前用EasyUI做了两个页面，js代码放到了文件里，在head里引入js文件。 但是页面一直出不来，只能放到body的底部，页面才能出来。 后来在js文件了加了一个函数，$(document).ready(function(){} 把页面初始化部分代码datagrid，放到这个函数里边去，js文件在head里引入才成功。
jquery元素选择代码放在head里无效的问题
cc1969281777的博客
08-03 1350
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.min.js"></script> <scrip...
js的script标签到底是放在head还是body中？
qq_27361945的博客
04-13 1585
https://www.jianshu.com/p/2e6f9b732a91
JavaScript在头部失效
LadyZhong的博客
09-01 1135
问题： 编码时发现js文件放在之间会失效，后来将js放置在前就起作用了。 js失效代码 浏览器对象 http-equiv="Content-Type" content="text/html; charset=utf-8"/> type="text/javascript"> //获取显示秒数的元素，通过定时器来更改秒数。 var
DW中html怎么调用js,Dreamweaver调用JavaScript行为
weixin_42500367的博客
06-04 3036
核心提示：调用JavaScript行为可以指定在事件发生时要执行的自定义函数或者JavaScript代码。可以自己书写这些JavaScript代码，也可以使用网络上免费发布的各种JavaScript库。调用JavaScript行为可以指定在事件发生时要执行的自定义函数或者JavaScript代码。可以自己书写这些JavaScript代码，也可以使用网络上免费发布的各种JavaScript库。一、D...
html的style不起作用,css样式不起作用是什么原因？
weixin_34668850的博客
06-10 8160
在写页面时，有时会发现自己写的css样式无法生效，我们该如何排查css样式无法生效？常见的css样式不起作用的原因有哪些呢？下面我们就来看一下css样式不起作用的原因。排查css样式不起作用的方法步骤：首先，先试一下清除缓存，重启浏览器等手段，无效后再进行进一步排查。接着按以下流程排查：以下是排查以及修改方法：再次提醒在排查前先试一下清除缓存，重启浏览器等手段，无效后再进行进一步排查。有可能自己什...
JSP页面中引入JS文件没反应
wangxx的博客
02-16 2690
小伙伴们在做网页开发的时候经常用到这种问题，有些是因为js文件的路径错误，如果按住ctrl能点进去文件说明路径正确，废话少说，直接上栗子。 以我的代码为例 <%--引入js文件--%> <script type="text/javascript" src="js/login.js"></script> 如果不是因为路径问题，那可以考虑一下顺序问题，代码的执行顺序是自上而下的，所以引入js文件的标签千万不能和引入jQuery一样放在head标签中，应该放在bod
net webform开发中常遇到的问题1
最新发布
08-08
# 开发中常遇到的问题与解决方法 在进行.net webform开发时，我们常遇到一些问题和挑战，包括页面或引用JS出现乱码，以及在前台写JS函数激发click事件等。下面将总结这些问题，并提供解决方法。 ## 问题1：页面或...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值