Memahami pemuatan dinamik fail Javascript_kemahiran javascript

WBOY
Lepaskan: 2016-05-16 15:17:00
asal
1083 orang telah melayarinya

Pemuatan dinamik fail Javascript sentiasa menjadi perkara yang menyusahkan, seperti kaedah biasa memuat naik melalui Internet:

function loadjs(fileurl){
 var sct = document.createElement("script");
 sct.src = fileurl;
 document.head.appendChild(sct);
}
Salin selepas log masuk

Kemudian mari kita uji keputusan:

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    function loadjs(fileurl){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     document.head.appendChild(sct);
    }
    loadjs("http://code.jquery.com/jquery-1.12.0.js");
    loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
    
    loadjs("http://bootboxjs.com/bootbox.js")
    </script>
  </body>
</html>
Salin selepas log masuk

Selepas kod dimuatkan, ralat berikut akan muncul:

jquery jelas dimuatkan dalam pemprosesan pertama, mengapa masih dilaporkan bahawa jQuery tidak wujud

Oleh kerana memuatkan dengan cara ini bersamaan dengan membuka tiga utas, cuma fail jquery memulakan utas dahulu, dan masa yang diperlukan untuk jquery selesai melaksanakan utas ini melebihi dua kali seterusnya, jquery mungkin tidak ditemui selepas ia dilaksanakan kemudian.

Bagaimana untuk menangani kaedah ini

Malah, pemuatan fail diproses dalam keadaan Terdapat acara onload untuk pemuatan fail, iaitu peristiwa yang boleh memantau sama ada fail dimuatkan

Jadi, kami boleh mempertimbangkan kaedah ini untuk mengendalikan hasil yang kami inginkan. Kami mengendalikannya dengan cara yang intuitif

 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    
    function loadjs(fileurl, fn){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     if(fn){
      sct.onload = fn;
     }
     document.head.appendChild(sct);
    }


    loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
     loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
        loadjs("http://bootboxjs.com/bootbox.js")
     })
    });
      
    
    </script>
  </body>
</html>

Salin selepas log masuk
OK, selepas melaksanakan kod ini, fail yang dimuatkan tidak akan dimuatkan sehingga yang sebelumnya dimuatkan, supaya objek yang digunakan tidak akan ditemui.

Kemudian kami akan melakukan kesan kotak pop timbul Pemalam Bootbox.js digunakan dalam kod pemuatan adalah seperti berikut:


loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
  loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
       loadjs("http://bootboxjs.com/bootbox.js",function(){
          bootbox.alert("Hello world!", function() {
           Example.show("Hello world callback");
          });
       })
   })
 });
Salin selepas log masuk
Muat semula halaman dan kotak pop timbul akan dipaparkan terus:

Kod yang dimuatkan secara dinamik selalunya mudah untuk menghabiskan banyak masa menyahpepijat di sini Cara terbaik untuk semua orang ialah menulis contoh paling mudah dan memahami sebabnya Kod di sini boleh dirangkumkan dan fail CSS juga boleh ditambahkan untuk dimuatkan .Gunakan sebagai pemalam anda sendiri.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan