javascript - js代码放在body里能用，放head里就不能用了？
问题描述
我把写在了单独的js文件中，并且用了window.onload=function(){}防止加载问题
1.直接从body里插入代码，能用；
2.从body里插入js文件，不能用；文件中删掉window.onload=function(){}，能用；
3.写在head里，无论直接插入代码还是文件，都不能用；
4.控制台没报错且能在调试器中找到这个js文件。
觉得是页面加载出问题了，具体哪里的问题，说不上来。。。
贴上代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片库</title>
<link rel="stylesheet" type="text/css" href="4.2图片库.css"/>
<script src="4.2图片库.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>我的图片库</h1>
<a href="http://www.baidu.com" target="_blank">百度一下你就知道</a>
<ul>
<li>
<a href="images/捕获0.png" title="截图一" class="pic">截图一</a>
</li>
<li>
<a href="images/捕获1.png" title="截图二" class="pic">截图二</a>
</li>
<li>
<a href="images/捕获2.png" title="截图三" class="pic">截图三</a>
</li>
<li>
<a href="images/捕获3.png" title="截图四" class="pic">截图四</a>
</li>
</ul>
<img src="images/示例图片.jpg"/ id="placeholder" alt="图片库封面">
<p id="alt">封面：</p>
</body>
</html>js代码是这样的
window.onload=function(){
function showPic(whichpic){
var source=whichpic.getAttribute('href');
var place_holder=document.getElementById('placeholder');
place_holder.src=source;
var p=document.getElementById("alt");
var text=whichpic.getAttribute('title');
p.firstChild.nodeValue=text;
}
var lis=document.getElementsByTagName('a');
for(i=0;i<lis.length;i++){
if(lis[i].getAttribute('class')=='pic'){
// lis[i].onclick=function(){
// showPic(this);
// return false;
// }
lis[i].setAttribute('onclick','showPic(this);return false;');
}
}
}
首先提一个建议：关于文件命名最好不要夹杂中文，一般也不以数字开头，有很多命名规范自己可以找找看看。
关于问题：控制台没报错且能在调试器中找到这个js文件：只要你使用了window.onload=function(){}，js代码是肯定执行的，不论你是放在head里面还是body里面，也不论你是不是以文件的形式引入的，里面的代码都会执行。
从body里插入js文件，不能用；文件中删掉window.onload=function(){}，能用：html中的onclick="showPic(this)"，这个showPic函数是定义在全局作用域下面的，不能用window.onload包裹，当你包裹的时候，showPic的作用域就处于onload这个函数里面了，在全局作用域下找不到showPic，所以点击时，showPic函数里面的代码没有执行，其他的js代码是执行的，你看看a标签里面已经添加上了onclick等代码。
写在head里，无论直接插入代码还是文件，都不能用：涉及到dom查询，这个时候dom树还没构建完成，所以查询不到a标签。写在head里面的dom查询js代码要用window.onload包裹一下，但是你要把showPic这个函数提出来放在全局作用域下，这样才能正常运行。
@张冬冬 回答的没毛病，但是他用的是element.onclick绑定事件的方法（你注释掉的代码），这个时候，在作用域链上是能找到showPic函数的，所以能执行。
@stephenhuang 写在onload里面的showPic代码能运行？
这篇关于javascript - js代码放在body里能用，放head里就不能用了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
