Come avere uno script nello script di aggiunta <head> alla fine di <body>

Un client utilizza Sharetribe che consente di aggiungere JS personalizzato tramite admin, ma solo in testa. Voglio caricare il mio script dopo jQuery, ma jQuery viene caricato alla fine del corpo. Come posso scrivere vanilla JS che aggiunge il mio script principale alla fine del caricamento del doc?Come avere uno script nello script di aggiunta <head> alla fine di <body>

Ho provato questo:

<script> 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://cdn..."; 
    document.body.appendChild(script); 

    var script2 = document.createElement("script"); 
    script2.type = "text/javascript"; 
    script2.text = "$(SOME.CODE.HERE);" 
    document.body.appendChild(script2); 
</script>

Ma Viene eseguito prima che il documento è terminato il caricamento (e in particolare, prima jQuery è disponibile). L'unica cosa che posso pensare è impostare un timer, ma sembra difettoso.

Qualche consiglio?

fonte

2015-04-21 Peter R

non è possibile avvolgere il codice in window.onload? – Kalish

Uso DOMContentLoaded evento:

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

document.addEventListener("DOMContentLoaded", function (event) { 
    console.log("DOM fully loaded and parsed"); 

    // Your code here 
});

DOMContentLoaded è uguale a quello ready caso di jQuery.

Documentation

fonte

2015-04-21 13:05:52 Tushar

Per ogni lettore in dubbio: la migliore pratica è non aspettare che la pagina venga caricata per includere degli script aggiuntivi, dovresti avvolgere questo script in un listener DOMContentLoaded e caricarlo inizialmente. – AsTeR

Come siete in attesa di jQuery per caricare, si può semplicemente avvolgere il vostro codice all'interno $(document).ready() method di jQuery:

$(document).ready(function() { 
    // Your code here. 
});

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $(document).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

mi rendo conto che hai detto che si desidera che questo in "vanilla" JS, ma poiché stai aspettando il caricamento di jQuery, comunque, sembra un po 'ridondante.

fonte

2015-04-21 13:06:00

@Tushar L'ho letto, ma sembra inutile se OP sta aspettando il caricamento di jQuery. Puoi anche usare il codice che jQuery ha già fornito. –

@JamesDonnelly Ottiene "Uncaught ReferenceError: $ is not defined", poiché jQuery viene aggiunto alla fine della pagina. –

@PeterR dovrai inserire quel codice * dopo * il tuo file jQuery viene aggiunto (o dopo di esso nell'elemento 'head' - dove viene caricato - o ovunque nel' corpo' del documento). –

Informi il codice di attendere che il DOM per completare il caricamento:

window.onload = function() {   
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    //.... 
}

o utilizzando jQuery:

$(document).ready(function() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    //.... 
});

fonte

2015-04-21 13:07:11 ElGavilan

Quando il browser esegue il codice in <head>, l'elemento <body> non esisteva ancora. Quindi, document.body era null.

per creare uno script di un elemento <body>, utilizzare evento 'carico' di document, ad esempio:

............. 
document.addEventListener('load', function(event){ 
    var script = document.createElement('script'); 
    ............... 
    document.body.appendChild(script); 
}, false); 
............

fonte

2015-04-21 13:16:45 DMaster

$(document).ready(){} viene eseguito quando il vostro elemento DOM di rendering con successo.

fonte

2015-04-21 13:29:44

Come avere uno script nello script di aggiunta <head> alla fine di <body>

risposta

Problemi correlati