Ich lese, dass Sie Ihre JavaScript-Funktionen im -Tag definieren sollten, aber wie wirkt sich der Standort des <script> (ob in , <body> oder eines anderen Tags) auf eine JavaScript-Funktion aus.Wie beeinflusst der Speicherort eines Skript-Tags auf einer Seite eine JavaScript-Funktion, die darin definiert ist?
Wie wirkt sich das auf den Umfang der Funktion aus und wo können Sie sie aufrufen?
Menschen <SCRIPT> nur im Kopf addieren Telling klingt wie eine vernünftige Sache zu tun, aber wie andere schon gesagt haben, es gibt viele Gründe, warum dies nicht oder sogar empfohlen praktisch - hauptsächlich Geschwindigkeit und die Art, wie HTML-Seiten dynamisch generiert werden.
Dies ist, was die HTML 4 spec says:
The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
Und einige HTML-Probe. Ist es nicht ziemlich alle hier formatiert aussehen :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>
Und etwas freuen uns auf in HTML 5:
New Asynchron-Attribut in <SCRIPT>:
Note: There are ways [sic] a script can be executed:
The async attribute is "true": The script will be executed asynchrously with the rest of the page, so the script will be executed while the page continues the parsing.
The async attribute is "false", but the defer attribute is "true": The script will be executed when the page is finished with the parsing.
Wenn Sie ein Inline-Skript (externe Funktionen) vor Funktionen haben, die es aufrufen kann, erhalten Sie möglicherweise einen Fehler, da sie möglicherweise noch nicht verfügbar sind. Nicht zu sagen, es wird immer passieren, nur dass es je nach Browsertyp oder -version sein kann.
Es tut es nicht. Die meisten Programmier-Framework Scripts alle auf der ganzen Seite. Ich habe deswegen nur selten Probleme gesehen (und nur von älteren Browsern).
hey! Wer ist das ohne eine Erklärung ablehnen? vielleicht jemand, der viele probleme hatte ?? –
Einer der Aspekte der Platzierung ist die Leistung. Siehe this fine article within the YSlow discussion für warum es manchmal empfohlen wird, dass Sie sie am Ende des Dokuments platzieren.
Was die Gültigkeitsbereiche betrifft, sind die üblichen Sichtbarkeitsregeln für Javascript (vars, die innerhalb oder außerhalb von Funktionen definiert sind, lokale, globale, Schließungen usw.) nicht betroffen, soweit ich weiß.
Dieser Link scheint gebrochen zu haben. –
@CaptainBlammo - Danke, dass du das notiert hast. Ich habe den Link zu einer allgemeineren (und hoffentlich dauerhafteren) YSlow-Seite aktualisiert. – Alan
Wenn Ihr Skript auf eine ID auf der Seite verweist und die Seite nicht gerendert wurde (d. H. Skript ist vor HTML oder Ihr Skript wird mit onload ausgeführt, anstatt dass das DOM bereit ist), können Sie ebenfalls einen Fehler erhalten.
Die Scoping-Regeln von Javascript sind Perl ähnlich - Sie können jede Funktion auf der aktuellen oder einer höheren Scope-Ebene aufrufen. Die einzige Einschränkung besteht darin, dass die Funktion zum Zeitpunkt des Aufrufs definiert werden muss. Die Position in der Quelle ist irrelevant - nur die zeitliche Position spielt eine Rolle.
Sie sollten es vermeiden, Skripte in die einzubauen, wenn dies die Seitenanzeige verlangsamt (siehe Link Alan).
Die normalen Spielregeln stehen immer noch; benutze keine Sachen, bevor sie definiert sind. :)
Beachten Sie auch, dass die "Put alles an der Unterseite" Beratung die einzige Regel in dem Buch ist - in einigen Fällen kann es nicht machbar sein und in anderen Fällen kann es sinnvoller sein Lege das Skript woanders hin. Der Hauptgrund dafür, ein Skript am Ende eines Dokuments zu platzieren, ist die Leistung. Skripts werden im Gegensatz zu anderen HTTP-Anforderungen nicht parallel geladen, was bedeutet, dass sie das Laden des Rests Ihrer Seite verlangsamen. Ein weiterer Grund dafür, Skripte ganz unten zu platzieren, besteht darin, dass Sie keine "DOM ready" -Funktionen verwenden müssen. Da sich das Skript-Tag unter allen Elementen befindet, ist das DOM zur Manipulation bereit!
EDIT: Lesen Sie dieses: http://developer.yahoo.com/performance/rules.html#js_bottom
Wenn Sie Javascripts in durchziehen XMLHttpRequest, wie Diodeus sagte, wird es wahrscheinlich nicht funktionieren. In meinem Fall gab es keinen Fehler, der Browser ignoriert einfach die neuen Skripte.
landete ich dies bis verwenden, nicht sehr elegant aber funktioniert für mich so weit:
http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/
Wie execJS verwenden: http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/
Hinweis: Achten Sie auf < in dieser Zeile: for(var i=0;i<st.length; i++)
Position von Script-Tag spielt eine Rolle. Wenn Sie eine Funktion mit dem Dokumentelement verknüpfen, muss das Dokumentelement zuerst geladen werden, bevor wir die Funktion implementieren. Angenommen, getTeachers() ist eine Funktion in der Datei getTeachers.js. Dies wird Ihnen ein Fehler geben:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
<script type="text/javascript" src="getTeachers.js"></script>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};
</script>
</head>
<body>
<form>
<input type = "button" id="buttonId" value = "Press for Results" /><br />
</form>
<span id="results" /></span>
</body>
</html>
Es gibt Fehler vor dem Kopf zuerst geladen wird, und es kann mit der ID nicht angegeben finden Element. Der folgende Code ist eine Korrektur:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
<script type="text/javascript" src="getTeachers.js"></script>
</head>
<body>
<form>
<input type = "button" id="buttonId" value = "Press for Results" /><br />
</form>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};
</script>
<span id="results" /></span>
</body>
</html>
Schönes Beispiel, nur warum brauchen Sie das Skript mit getTeachers.js-Tag? es löst nur einen Fehler aus. – peresisUser
@ m4bwav - ich wollte vor allem den zusätzlichen Punkt machen, die nicht gemacht hatten, dass es in Ordnung ist SCRIPT für jedermann im Körper gelegt, die dachten, sie sollten nicht. zusätzlich erwähnt die Yahoo Leistungsregeln 'Artikel ist lesenswert und deckt das Problem gründlich Nur –
Sehen alle Tags in den Kappen geschrieben macht die Glaubwürdigkeit dieser Antwort stark fallen ... –
Der Code mit den aktivierten Tags ein direkter Kopieren/Einfügen aus der [W3.org-Spezifikation] (http://www.w3.org/TR/REC-html40/interact/scripts.html). – Homer