Src ile document.write içerebilecek dinamik olarak komut dosyası etiketi ekleyin

Dinamik olarak bir web sayfasına bir komut dosyası etiketi dahil etmek istiyorum ancak src = "source.js" böyle görünebilir böylece src üzerinde hiçbir denetime sahip değil.

document.write('<script type="text/javascript">')
document.write('alert("hello world")')
document.write('</script>')
document.write('<p>goodbye world</p>')

Şimdi sıradan

<script type="text/javascript" src="source.js"></script> 

kafasında iyi çalışıyor ama innerHTML gibi bir şey kullanarak source.js dinamik olarak eklemek için başka bir yolu var mı?

denediklerimin jsfiddle

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

Bu document.createElement()işlevi aşağıdaki gibi kullanabilirsiniz :

function addScript( src ) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  document.body.appendChild( s );
}

Orada onloadkomut başarıyla yüklendiğinde denilebilir fonksiyonu:

function addScript( src,callback) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  s.onload=callback;
  document.body.appendChild( s );
}

güzel bir komut dosyası birden fazla komut dosyası yüklemek için yazdım:

function scriptLoader(scripts, callback) {

    var count = scripts.length;

    function urlCallback(url) {
        return function () {
            console.log(url + ' was loaded (' + --count + ' more scripts remaining).');
            if (count < 1) {
                callback();
            }
        };
    }

    function loadScript(url) {
        var s = document.createElement('script');
        s.setAttribute('src', url);
        s.onload = urlCallback(url);
        document.head.appendChild(s);
    }

    for (var script of scripts) {
        loadScript(script);
    }
};

kullanımı:

scriptLoader(['a.js','b.js'], function() {
    // use code from a.js or b.js
});

Kod snippet'ini izlemeyi deneyebilirsiniz.

function addScript(attribute, text, callback) {
    var s = document.createElement('script');
    for (var attr in attribute) {
        s.setAttribute(attr, attribute[attr] ? attribute[attr] : null)
    }
    s.innerHTML = text;
    s.onload = callback;
    document.body.appendChild(s);
}

addScript({
    src: 'https://www.google.com',
    type: 'text/javascript',
    async: null
}, '<div>innerHTML</div>', function(){});

Bu benim için iş.

Kontrol edebilirsin.

var script_tag = document.createElement('script');
script_tag.setAttribute('src','https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js');
document.head.appendChild(script_tag);
window.onload = function() {
    if (window.jQuery) {  
        // jQuery is loaded  
        alert("ADD SCRIPT TAG ON HEAD!");
    } else {
        // jQuery is not loaded
        alert("DOESN'T ADD SCRIPT TAG ON HEAD");
    }
}

Komut dosyaları eşzamansız olarak yüklendiğinde document.write öğesini çağıramazlar. Aramalar kolayca dikkate alınmayacak ve konsola bir uyarı yazılacaktır.

Komut dosyasını dinamik olarak yüklemek için aşağıdaki kodu kullanabilirsiniz:

var scriptElm = document.createElement('script');
scriptElm.src = 'source.js';
document.body.appendChild(scriptElm);

Bu yaklaşım yalnızca kaynağınız ayrı bir dosyaya ait olduğunda iyi çalışır.

Ancak, dinamik olarak yüklemek istediğiniz ve komut dosyası etiketine sınıf, tür vb. Gibi başka özellikler eklemek istediğiniz satır içi işlevler olarak kaynak kodunuz varsa, aşağıdaki snippet size yardımcı olacaktır:

var scriptElm = document.createElement('script');
scriptElm.setAttribute('class', 'class-name');
var inlineCode = document.createTextNode('alert("hello world")');
scriptElm.appendChild(inlineCode); 
target.appendChild(scriptElm);

Dinamik javascript eklemenin birçok yolu var, bunu birçok proje için kullanıyorum.

var script = document.createElement("script")
script.type = "text/javascript";
//Chrome,Firefox, Opera, Safari 3+
script.onload = function(){
console.log("Script is loaded");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);

Gerektiği kadar çok javascript dosyası yüklemenize yardımcı olabilecek evrensel bir işlev yaratmayı çağırabilirsiniz. Burada bununla ilgili tam bir öğretici var.

Dinamik Javascript'i doğru şekilde ekleme

Bunu yapmanın tek yolu document.write, sayfanızın altına öğe ekleyecek olan kendi işlevinizle değiştirmektir . JQuery ile oldukça basit:

document.write = function(htmlToWrite) {
  $(htmlToWrite).appendTo('body');
}

Soru örneği gibi parçalarda document.write dosyasına gelen html'niz varsa, htmlToWritesegmentleri arabelleğe almanız gerekir . Belki böyle bir şey:

document.write = (function() {
  var buffer = "";
  var timer;
  return function(htmlPieceToWrite) {
    buffer += htmlPieceToWrite;
    clearTimeout(timer);
    timer = setTimeout(function() {
      $(buffer).appendTo('body');
      buffer = "";
    }, 0)
  }
})()

Her komut dosyasını tekrar tekrar ekleyerek denedim

Not Komut dosyalarınız birbiri ardına bağımlıysa, konumun senkronize olması gerekir.

İlk komut dosyalarının kullanabilmesi için büyük Bağımlılık dizide son olmalıdır

const scripts = ['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js']
let count = 0

  
 const recursivelyAddScript = (script, cb) => {
  const el = document.createElement('script')
  el.src = script
  if(count < scripts.length) {
    count ++
    el.onload = recursivelyAddScript(scripts[count])
    document.body.appendChild(el)
  } else {
    console.log('All script loaded')
    return
  }
}
 
  recursivelyAddScript(scripts[count])

Birbirine bağlı olan komut dosyalarını doğru sırada yükler.

Satyam Pathak yanıtına dayanarak, yükü sabitledi. Komut dosyası gerçekten yüklenmeden önce tetiklendi.

const scripts = ['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js']
let count = 0

  
 const recursivelyAddScript = (script, cb) => {
  const el = document.createElement('script')
  el.src = script
  if(count < scripts.length) {
    count ++
    el.onload = () => recursivelyAddScript(scripts[count])
    document.body.appendChild(el)
  } else {
    console.log('All script loaded')
    return
  }
}
 
  recursivelyAddScript(scripts[count])

Aşağıda, Google Analytics ve Facebook Pixel tarafından kullanılan kodun küçültülmüş bir snippet'i bulunmaktadır:

!function(e,s,t){(t=e.createElement(s)).async=!0,t.src="https://example.com/foo.js",(e=e.getElementsByTagName(s)[0]).parentNode.insertBefore(t,e)}(document,"script");

https://example.com/foo.jsKomut dosyası yolunuzla değiştirin .

Bir astar (yukarıdaki cevaplarda önemli bir fark yok):

document.body.appendChild(document.createElement('script')).src = 'source.js';