cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Bolehkah kod js digunakan dalam badan, tetapi tidak di kepala?

Saya menulisnya dalam fail js yang berasingan dan menggunakan window.onload=function(){} untuk mengelakkan masalah pemuatan
1 Sisipkan kod terus dari badan dan ia berfungsi
2 tidak boleh digunakan; padam window.onload=function(){} dalam fail, dan ia boleh digunakan
3, dan ia tidak boleh digunakan sama ada ia dimasukkan terus ke dalam kod atau fail ;
4 Konsol tidak melaporkan ralat dan boleh dinyahpepijat Cari fail js ini dalam penyemak imbas.
Saya rasa terdapat masalah dengan memuatkan halaman. Saya tidak dapat mengetahui secara khusus masalahnya. . .
Siarkan kod

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

Kod js adalah seperti ini

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 hari yang lalu744

membalas semua(5)saya akan balas

  • 曾经蜡笔没有小新

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

    Pertama sekali, saya ingin membuat cadangan: sebaiknya jangan masukkan aksara Cina dalam penamaan fail, dan secara amnya jangan bermula dengan nombor Terdapat banyak piawaian penamaan yang boleh anda cari sendiri.

    Mengenai masalah:
    Tiada ralat dilaporkan dalam konsol dan fail js boleh ditemui dalam penyahpepijat: Selagi anda menggunakan window.onload=function(){}, kod js Ia pasti dilaksanakan Tidak kira sama ada anda meletakkannya di kepala atau badan, atau sama ada anda memperkenalkannya dalam bentuk fail, kod di dalamnya akan dilaksanakan. 控制台没报错且能在调试器中找到这个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里，无论直接插入代码还是文件，都不能用

    Masukkan fail js daripada badan, tetapi ia tidak boleh digunakan padam window.onload=function(){} dalam fail, tetapi ia boleh digunakan: onclick="showPic(; this)"< dalam html /code>, fungsi showPic ini ditakrifkan di bawah skop global dan tidak boleh dibalut dengan window.onload. Apabila anda membalutnya, skop showPic berada di dalam fungsi onload. ShowPic tidak boleh ditemui dalam global skop. , jadi apabila diklik, kod dalam fungsi showPictidak dilaksanakan, tetapi kod js lain dilaksanakan Anda boleh melihat bahawa onclick dan kod lain telah ditambahkan pada teg a.

    ditulis di kepala dan tidak boleh digunakan sama ada dimasukkan terus ke dalam kod atau fail     : Apabila ia datang kepada pertanyaan dom, pokok dom belum dibina pada masa ini, jadi teg tidak boleh. dipersoalkan. Kod js pertanyaan DOM yang ditulis di kepala mesti dibalut dengan window.onload, tetapi anda mesti mengekstrak fungsi showPic dan meletakkannya dalam skop global supaya ia boleh berjalan seperti biasa.

    @张东东 Jawapannya betul, tetapi dia menggunakan kaedah acara mengikat elemen.onclick (kod yang anda ulas pada masa ini, fungsi showPic boleh didapati dalam rantai skop, jadi ia boleh dilaksanakan). 🎜 🎜@stephenhuang Bolehkah kod showPic yang ditulis dalam onload dijalankan? 🎜

    balas
    0
  • 迷茫

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

    skrip hendaklah diletakkan di bawah badan

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

    Perkara pertama yang anda perlu tahu ialah:

    Fail HTML dilaksanakan secara atas ke bawah, tetapi susunan css dan javascript yang diperkenalkan adalah berbeza Apabila css diperkenalkan dan dimuatkan, program masih dijalankan ke bawah, dan apabila skrip <skrip> benang terganggu, menunggu Program akan terus dilaksanakan hanya selepas pelaksanaan skrip selesai.

    Jadi, kebanyakan perbincangan dalam talian adalah meletakkan skrip skrip selepas <body>, supaya penjanaan DOM tidak akan ditangguhkan dan disekat kerana pelaksanaan skrip skrip yang lama, mempercepatkan kelajuan memuatkan halaman .

    Tetapi anda tidak boleh meletakkan semua skrip selepas badan, kerana pelaksanaan beberapa kesan halaman memerlukan pemuatan secara dinamik beberapa skrip js terlebih dahulu. Jadi skrip ini hendaklah diletakkan sebelum <body>.

    Jadi, saya rasa prinsip peletakan skrip ialah "js untuk kelas pelaksanaan kesan halaman hendaklah diletakkan sebelum badan dan tindakan, interaksi dan js dipacu peristiwa boleh diletakkan selepas badan."

    balas
    0
  • 巴扎黑

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

    Kerana ia diletakkan di kepala dan js dimuat turun apabila teg js ditemui Penyajian dom belum selesai lagi dan js tidak boleh mendapatkan elemen dom pada masa ini.

    balas
    0
  • ringa_lee

    ringa_lee2017-05-19 10:26:41

    Pertama sekali, skrip boleh diletakkan di kepala, dan banyak laman web menggunakannya dengan cara ini, sebagai contoh, apabila halaman dibuka, adalah perlu untuk menentukan sama ada ia adalah telefon bimbit atau kaedah PC JS, dll.
    Kedua, sebagai jawapan kepada soalan anda, saya membuat sedikit pengubahsuaian dan ujian boleh dijalankan. Hanya bahagian js sahaja yang telah ditukar, bahagian html tidak diubah.

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

    }

    Jadi mungkin kod js ditulis dengan salah.

    balas
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:26:41

    Terima kasih banyak, kini saya akhirnya faham apa yang berlaku! Cadangan itu sangat berguna dan saya menerimanya.
    Saya secara tidak sengaja menulisnya di kawasan jawapan, tetapi sejak saya menulisnya, mari tulis sesuatu yang berguna dan tambahkan beberapa baris kod
    Let lis[i].setAttribute('onclick','showPic(this);return false;' ); Menulis seperti ini juga akan berfungsi: 

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

    balas
    0
  • Batalbalas