Safari dan Chrome tidak mengevaluasi tag ‹skrip› yang ditambahkan secara dinamis saat pemuatan halaman

Saya sedang menulis kode JavaScript kecil yang akan memuat file js eksternal saat memuat halaman html.

Saya menguji 2 cara.

Kasus 1: Menggunakan document.write untuk menambahkan tag ‹script›. Ini berfungsi untuk semua browser (IE, FF, Safari, Chrome, Opera).

Kasus 2: Menggunakan DOMElement.appendChild untuk menambahkan tag ‹script› ke elemen ‹haed›.

Hanya berfungsi untuk IE, FF, dan Opera. TIDAK berfungsi untuk Safari dan Chrome.

Dalam kedua kasus tersebut, saya berharap tag ‹script› baru dimasukkan sebelum tag penutup ‹head›. Jadi tag ‹script› baru dievaluasi sebelum memproses ‹body›, dan pada saat window.onload dipanggil, variabel "success" seharusnya sudah benar.

Tapi itu bukan untuk Safari dan Chrome.

Adakah yang bisa mengetahui apakah ini harusnya berhasil atau tidak? Terima kasih.

<html>
  <head>
    <title>JavaScript loading test</title>
    <script type="text/javascript">
      var success = false;

      window.onload = function()
      {
        document.getElementById("result").innerHTML = success? "OK": "ERROR!";
      }

      // TEST CASE 1.
      // Works for all browsers.
      document.write('<script type="text/javascript" src="foo.js"></' + 'script>');

      // TEST CASE 2.
      // Only works for Opera, FireFox, Opera.
      // var scriptElem = document.createElement("script");
      // scriptElem.setAttribute("type", "text/javascript");
      // scriptElem.setAttribute("src", "foo.js");
      // var headElem = document.getElementsByTagName("head")[0];
      // headElem.appendChild(scriptElem);
    </script>
    <!-- expected new scrip tag being inserted here. -->
  </head>
  <body>
    Testing...<br/>
    <span id="result"></span>
  </body>
</html>

"foo.js" hanyalah satu baris kode.

success = true;

javascript scripting appendchild document.write
person 3rensho    schedule 06.02.2010    source sumber
comment
Sekadar komentar - dengan sedikit memodifikasi contoh Anda, saya berhasil mendapatkan perilaku berbeda di Opera, Firefox, Safari, dan Safari saat menelusuri kode.   -  person Josh Lee    schedule 06.02.2010
comment
kebetulan '...</'+'script> masih tidak valid. Cara valid paling sederhana untuk melindungi literal string tag akhir di dalam blok skrip adalah <\/script.   -  person bobince    schedule 06.02.2010
comment
apakah Anda pernah menemukan solusi untuk ini?   -  person Fabii    schedule 09.03.2015

Jawaban (2)


arrow_upward
4
arrow_downward

Coba ini sebagai gantinya:

var s = document.createElement('SCRIPT');
s.charset = 'UTF-8';
s.src ='foo.js';
document.getElementsByTagName('HEAD')[0].appendChild(s);

Tapi letakkan ini di tag SCRIPT di awal tag BODY

person Mic    schedule 06.02.2010

arrow_upward
1
arrow_downward

Pada saat javascript Anda dievaluasi, DOM belum sepenuhnya dibuat, elemen head bahkan belum selesai. Anda biasanya tidak dapat mengakses atau memanipulasi DOM ( getElementsByTagName dan appendChild, dll. ) sebelum halaman HTML dimuat sepenuhnya.

person Leventix    schedule 06.02.2010
comment
Anda dapat mengakses DOM sebelum halaman dimuat, tetapi memang Anda tidak dapat mengakses elemen di bawah blok skrip saat ini, dan sangat tidak dapat diandalkan untuk melakukan manipulasi seperti menyisipkan di dalam elemen yang tag penutupnya belum ditemukan. - person bobince; 06.02.2010