recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Le code JS peut-il être utilisé dans le corps mais pas dans la tête?

Je l'ai écrit dans un fichier js séparé et j'ai utilisé window.onload=function(){} pour éviter les problèmes de chargement
1 Insérez le code directement depuis le corps et cela fonctionne
2. ne peut pas être utilisé ; supprimez window.onload=function(){} dans le fichier, et il peut être utilisé
3 Il est écrit dans l'en-tête, et il ne peut pas être utilisé qu'il soit directement inséré dans le code ou dans le fichier ; ;
4. Il n'y a aucune erreur dans la console et elle peut être déboguée. Recherchez ce fichier js dans le navigateur.
Je pense qu’il y a un problème avec le chargement de la page. Je ne peux pas dire quel est le problème spécifique. . .
Publiez le 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>

Le code js est comme ça

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;');
        }
    }
}
伊谢尔伦伊谢尔伦2794 Il y a quelques jours770

répondre à tous(5)je répondrai

  • 曾经蜡笔没有小新

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

    Tout d'abord, je voudrais faire une suggestion : il est préférable de ne pas inclure de caractères chinois dans le nom des fichiers, et généralement de ne pas commencer par des chiffres. Il existe de nombreuses normes de dénomination que vous pouvez rechercher vous-même.

    À propos du problème :
    Aucune erreur n'est signalée dans la console et le fichier js est trouvable dans le débogueur : Tant que vous utilisez window.onload=function(){}, js code Il est définitivement exécuté. Peu importe que vous le mettiez dans la tête ou dans le corps, ou que vous l'introduisiez sous la forme d'un fichier, le code qu'il contient sera exécuté. 控制台没报错且能在调试器中找到这个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里，无论直接插入代码还是文件，都不能用

    Insérez le fichier js depuis le corps, mais il ne peut pas être utilisé ; supprimez window.onload=function(){} dans le fichier, mais il peut être utilisé : onclick="showPic( this)"< en html /code>, cette fonction showPic est définie dans la portée globale et ne peut pas être encapsulée avec window.onload. Lorsque vous l'encapsulez, la portée de showPic est à l'intérieur de la fonction onload. ShowPic est introuvable dans le global scope. , donc lorsque vous cliquez dessus, le code de la fonction showPicn'est pas exécuté, mais d'autres codes js sont exécutés. Vous pouvez voir que onclick et d'autres codes ont été ajoutés à la balise a.

    est écrit dans l'en-tête et ne peut pas être utilisé directement dans le code ou dans des fichiers.  : lorsqu'il s'agit d'une requête dom, l'arborescence dom n'a pas été construite pour le moment, donc la balise a ne peut pas l'être. » s'est interrogé. Le code js de la requête DOM écrit dans l'en-tête doit être encapsulé avec window.onload, mais vous devez extraire la fonction showPic et la placer dans la portée globale afin qu'elle puisse s'exécuter normalement.

    @张东东 La réponse est correcte, mais il a utilisé la méthode d'événement de liaison element.onclick (le code que vous avez commenté). À ce stade, la fonction showPic peut être trouvée dans la chaîne de portée, elle peut donc être exécutée. 🎜 🎜@stephenhuang Le code showPic écrit dans onload peut-il s'exécuter ? 🎜

    répondre
    0
  • 迷茫

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

    le script doit être placé sous le corps

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

    La première chose que vous devez savoir est :

    Les fichiers HTML sont exécutés de manière descendante, mais l'ordre des CSS et Javascript introduits est différent Lorsque le CSS est introduit et chargé, le programme s'exécute toujours vers le bas, et lorsque le script <script> le thread est interrompu, en attente Le programme continuera à s'exécuter seulement une fois l'exécution du script terminée.

    Ainsi, la plupart des discussions en ligne consistent à placer le script après <body>, afin que la génération du DOM ne soit pas retardée et bloquée en raison de la longue exécution du script, accélérant ainsi la vitesse de chargement de la page. .

    Mais vous ne pouvez pas mettre tous les scripts après le corps, car l'implémentation de certains effets de page nécessite de charger dynamiquement certains scripts js au préalable. Ces scripts doivent donc être placés avant <body>.

    Donc, je pense que le principe du placement des scripts est le suivant : "les js pour les classes d'implémentation d'effets de page doivent être placés avant le corps, et les js d'action, d'interaction et d'événement peuvent être placés après le corps."

    répondre
    0
  • 巴扎黑

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

    Parce qu'il est placé dans la tête et que le js est téléchargé lorsque la balise js est rencontrée, le rendu dom n'est pas encore terminé et le js ne peut pas obtenir l'élément dom pour le moment.

    répondre
    0
  • ringa_lee

    ringa_lee2017-05-19 10:26:41

    Tout d'abord, le script peut être placé dans l'en-tête, et de nombreux sites Web l'utilisent de cette façon. Par exemple, lorsque la page est ouverte, il est nécessaire de déterminer s'il s'agit d'un téléphone mobile ou d'une méthode PC JS, etc.
    Dans un deuxième temps, en réponse à votre problème, j'ai apporté une légère modification et le test peut être lancé. Seule la partie js a été modifiée, la partie html n'a pas été modifiée.

    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();
        }    
     
    }
}

    }

    Alors peut-être que le code js est mal écrit.

    répondre
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:26:41

    Merci beaucoup, maintenant je comprends enfin ce qui se passe ! La suggestion a été très utile et je l’ai acceptée.
    Je l'ai accidentellement écrit dans la zone de réponse, mais puisque je l'ai écrit, écrivons quelque chose d'utile et ajoutons quelques lignes de code
    Soit lis[i].setAttribute('onclick','showPic( this); return false;');Écrire comme ceci fonctionne aussi : 

    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事件换成上文第一段函数也能行。

    répondre
    0
  • Annulerrépondre