2012-07-20 7 views
5

lädt, möchte ich Head JS verwenden, um alle anderen Indexe für meine Seiten dynamisch zu laden. Ich habe vor, die Version von CDNJS zu nutzen, um das bessere Caching, verringerte Latenz usw. zu nutzen.Wie man Javascript von einem CDN mit einem lokalen Fallback im <head>

Ich habe keinen Grund zu denken, dass CDNJS geht überall hin, aber auch für Google CDN gehostete Dateien wie jQuery, ich mag einen Fallback enthalten. Wenn ich jedoch jQuery verwende, sind die Dateien am Ende des Tags <body> enthalten. Aufgrund der Art von Head JS muss ich es in die <head> meiner Seite aufnehmen.

Im <body> würde ich zwei Zeilen wie diese verwenden:

<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.96/head.min.js"></script> 
<script> window.head || document.write('<script src="js/libs/head-0.96.min.js"><\/script>') </script> 

Kann ich diesen gleichen Satz von Linien im Kopf als Ausweich? Will nicht document.write() meine gesamte Seite überschreiben? Werden Skripts nicht anders geladen, wenn sie in der aufgrund der Reihenfolge vorhanden sind, in der Browser das DOM analysieren?

Ich bin immer noch ziemlich neu, also wäre jede Anleitung sehr hilfreich! Vielen Dank!

+1

document.write zerstört nur Ihr Dokument, wenn Sie es NACH dem Ladevorgang versuchen. Ein in-line document.write wird ausgeführt, wenn die Seite geladen/geparst wird und einfach die geschriebenen Daten in das Dokument einfügen, wie es ist. –

+0

ja, aber wird nicht der Head JS lädt Anrufe, die in der ' Feuer _before_ das Skript lädt von einem document.write? – stevenem

+0

nur, wenn Sie das vorherige Skript-Tag als 'async' markiert haben. Sonst werden Skripte synchron geladen. –

Antwort

0

Wie Sie wahrscheinlich bereits wissen, werden Sie nicht für window.jQuery testen, aber einige Funktionen in head.js enthalten.

Darüber hinaus haben Sie Recht, dass Sie nicht möchten, document.write() zweimal hier zu verwenden.

Statt document.write(), versuchen Sie dies:

function appendScript(url) { 
    var head = document.getElementsByTagName('head')[0]; 
    var theScript = document.createElement('script'); 
    theScript.type = 'text/javascript'; 
    theScript.src = url; 
    theScript.onreadystatechange = callback; 
    theScript.onload = callback; 
    head.appendChild(theScript); 
} 

Für die URL verwenden Sie Ihren lokalen Rückfall.

+0

Danke für den Hinweis auf den jQuery-Teil! Ich werde diesem einen Schuss geben! Wie richte ich den Callback ein, um die 'head.js()' Befehle auszuführen, nachdem der Head JS geladen wurde? – stevenem

+0

Ich bin nicht sicher, ich weiß nicht viel über head.js, aber ich weiß nicht, ob Sie garantieren könnten, dass dies vor oder nach head.js von Entwurf ausgeführt werden würde. –

Verwandte Themen