搜索
您的当前位置:首页深入理解js为什么放到head中有时候失效

深入理解js为什么放到head中有时候失效

时间:2023-12-01 来源:乐玩宠

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

看失效代码:

<!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;background-color:#4E74A5;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" /> <p id="enter" class="login"> 登录</p> </body></html>

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

<!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;background-color:#4E74A5;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" /> <p id="enter" class="login"> 登录</p> </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这个顺序。

小编还为您整理了以下内容,可能对您也有帮助:

为什么我在head引入一个JS文件,怎么用不了

可能是引用失败, 引用路径错误,

在浏览器中输入引用的url 看看是否能返回要引用的js代码的源文件

javascript 写到body中可以,写到head中为什么不可以呢?

页面加载的时候会先加载head中的css和js,你在js的全局定义里面去取控件,在执行head的时候你body中的这个控件还没有,所以会有问题追问head中加上window.onload也不可以

追答<html>

<head>

<title></title>

<script>

var st;

window.onload = function(){

st = document.getElementById("ipt");

st.onmouseover = function(){

this.value="";

this.focus();

};

st.onblur = function(){

this.value="输入网址";

};

}

</script>

</head>

<body>

<form>

<input type="text" value="输入网址" name="website" id="ipt">

<input type="button" onClick="windowopen()" value="全屏显示" name="button">

</form>

<script type="text/javascript">

function windowopen(){

var target = "http://"+st.value;

newwindow = window.open("","","scrollbars");

if(document.all){

newwindow.moveTo(0,0);

newwindow.resizeTo(screen.width,screen.height);

}

newwindow.location = target;

}

</script>

</body>

</html>

你改成这样就好了,放onload里面没什么问题..

这段js代码为什么放在放到head中无法执行,放到底下就能用是怎么回事?

应该是你var myvideo=document.getElementById("v1");的问题,你如果放在<head>里面是会优先加载这段的,这时候你的<body>其实还没有加载,所以id为v1的控件肯定取不到会提示出错追问执行函数makeBig()时应该应该会调用那个变量把

追答你如果把var myvideo这句放到makeBig()方法里面就不会出问题了,因为放在这个方法里面是调用方法的时候才去从页面中取,而放在外面就相当于全局的,在加载的时候看到这条语句就会去执行

乐玩宠还为您提供以下相关内容希望对您有帮助:

这段js代码为什么放在放到head中无法执行,放到底下就能用是怎么回事...

应该是你var myvideo=document.getElementById("v1");的问题,你如果放在&lt;head&gt;里面是会优先加载这段的,这时候你的&lt;body&gt;其实还没有加载,所以id为v1的控件肯定取不到会提示出错 ...

为什么js放在head部分没有反应,必须放在body部分下才会起作用。贴上...

js执行顺序问题,script标签写在上边的先执行,所以你的代码要放到你引入jquery的后边,同时你这样写的话,你的js是先执行的,但是你的button这时候还不存在,你放到后边,前面的html加载完js就能找到了 如果你非要放在head里...

...而放在head中总是说邮箱错误,即使正确脚本如下

document.getElementById('mail').value这句赋值语句没有执行预期的赋值目的,这是因为放在head元素里面的js代码在body元素内容呈现之前就开始工作了,这样的话在上面的赋值语句工作的时候,id为mail的节点都不存在当然不会有预...

javascript 写到body中可以,写到head中为什么不可以呢?

页面加载的时候会先加载head中的css和js,你在js的全局定义里面去取控件,在执行head的时候你body中的这个控件还没有,所以会有问题

...在HEAD里添加了JS,BODY里的内容就全都失效了,什么都不显示了是怎么...

是你添加有点问题,这种最好把你的添加JS的代码贴出来,你这么问的情况多了去了,不好排查。

为什么js代码在HTML文件里可以运行,写在js文件里被html文件调用之后却...

1.立即执行的JS代码会受位置的影响。2.假如你把JS外部引用放入HEAD里,而你在该JS文件中试图直接访问DOM中的一个BODY的子元素,就可能产生错误,因为该JS在执行时,浏览器还没有准备好BODY的DOM。3.如果是这样,你可以把JS...

为什么HTML调用JS无效

如果调用的是外部js文件,看看路径是否正确;如果是在HTML文件中写在head标签中,看你的函数或者其他是否写错;有时候js的script标签要写在body中相应元素标签的下面,才会有效。

js为什么不起作用?

如果把代码放到body中所有标签的最后面,当你的代码运行时,jQuery和DOM都肯定已加载完毕,所以是有效的。其实把你的js代码放到head中也是可以的,但必须放到load事件函数中,即这样:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;script ...

html里面嵌套js为什么有时正常有时失效呢??

可能是因为js加载未完全导致部分js出错导致 js一般放在html尾部,代码的容错性也好要一点,不然一些浏览器正常,而另一些浏览器会异常 还有可能是二次加载的时候失效,比如用到ajax要注意js要重新加载过 ...

...中把canvas标签写在&lt;body&gt;中而jsp代码写在&lt;head&gt;中就会出错呢_百度...

本人亲测,放在head中和外部js中全部失效,只有放在body中才能正常显示,首先需要明确的一点是放在head中的js并不会自动执行,除非您亲自调用,而放在body中的会自动执行,所以你如果想放在head中,那么请把它包在一个function...

Top
7.669967s