search

Home  >  Q&A  >  body text

javascript - Can js code be used in the body, but not in the head?

I wrote it in a separate js file and used window.onload=function(){} to prevent loading problems
1. Insert the code directly from the body and it works;
2. From Inserting a js file into the body will not work; deleting window.onload=function(){} from the file will work;
3. If written in the head, it will not work whether directly inserting code or files;
4. The console reports no error and the js file can be found in the debugger.
I think there is a problem with page loading. I can’t tell what the specific problem is. . .
Post the code

<!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>

The js code is like this

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;');
        }
    }
}
伊谢尔伦伊谢尔伦2739 days ago746

reply all(5)I'll reply

  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-19 10:26:41

    First of all, I would like to make a suggestion: it is best not to include Chinese characters in file naming, and generally do not start with numbers. There are many naming standards that you can look for yourself.

    About the question:
    控制台没报错且能在调试器中找到这个js文件：只要你使用了window.onload=function(){}, the js code will definitely be executed. No matter whether you put it in the head or the body, or whether you introduce it in the form of a file, the code inside will be executed.

    从body里插入js文件，不能用；文件中删掉window.onload=function(){}，能用：html中的onclick="showPic(this)"，这个showPic函数是定义在全局作用域下面的，不能用window.onload包裹，当你包裹的时候，showPic的作用域就处于onload这个函数里面了，在全局作用域下找不到showPic，所以点击时，showPic函数里面的代码没有执行, other js codes are executed. Look at the a tag, onclick and other codes have been added.

    写在head里，无论直接插入代码还是文件，都不能用: When it comes to dom query, the dom tree has not been built yet, so the a tag cannot be queried. The DOM query js code written in the head must be wrapped with window.onload, but you must extract the showPic function and place it in the global scope so that it can run normally.

    @张东东 The answer is correct, but he used the element.onclick binding event method (the code you commented out). At this time, the showPic function can be found in the scope chain, so it can be executed.

    @stephenhuang Can the showPic code written in onload run?

    reply
    0
  • 迷茫

    迷茫2017-05-19 10:26:41

    script should be placed under the body

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <link rel="stylesheet" type="text/css" href="4.2图片库.css"/>
</head>
<body>
    <p id="box">id</p>
     <script src="4.2图片库.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

    The first thing you need to know is:

    html files are executed in a top-down manner, but the order of the introduced css and javascript is different. When the css is introduced and loaded, the program is still executed downwards, and when the <script> script is executed, the thread is interrupted, waiting for The program will continue to execute only after the execution of the script is completed.

    So, most of the online discussion is to put the script script after <body>, so that the generation of DOM will not be delayed and blocked due to the long execution of the script script, speeding up the loading speed of the page.

    But you cannot put all scripts after the body, because the implementation of some page effects requires dynamically loading some js scripts in advance. So these scripts should be placed before <body>.

    So, I think the principle of script placement is "js for page effect implementation classes should be placed before the body, and action, interaction, and event-driven js can be placed after the body."

    reply
    0
  • 巴扎黑

    巴扎黑2017-05-19 10:26:41

    Because it is placed in the head and the js is downloaded when the js tag is encountered. The dom rendering has not been completed yet, and the js cannot obtain the dom element at this time.

    reply
    0
  • ringa_lee

    ringa_lee2017-05-19 10:26:41

    First of all, script can be placed in the head, and many websites use it this way. For example, when the page is opened, it is necessary to determine whether it is a mobile phone or a pc JS method, etc.
    Secondly, in response to your problem, I made a slight modification and the test can be run. Only the js part has been changed, the html part has not been changed.

    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(event){
            showPic(this);
            event.preventDefault();
        }    
     
    }
}

    }

    So maybe the js code is written incorrectly.

    reply
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:26:41

    Thank you so much, now I finally understand what’s going on! The suggestion was very useful and I accepted it.
    I accidentally wrote it in the answer area, but since I wrote it, let’s write something useful and add a few lines of code
    Let lis[i].setAttribute('onclick','showPic(this);return false;'); Writing like this will also work: 

    addLoadEvent(pics)
function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!='function'){window.onload=func;}
    else{window.onload=function(){oldonload();func;}
    }
}
//上面这段代码为了使所有函数共享window.onload事件
function pics(){
    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;');
        }
    }
}```

主要就是最后一行代码的问题(this指代不明，楼上大神解释得很棒)，其实只要换成被注释掉的那一段或者楼上改的那一段就行了。如果坚持不换，把window.onload事件换成上文第一段函数也能行。

    reply
    0
  • Cancelreply