Verschieben von JavaScript aus der Webseite

Wenn Sie zum ersten Mal ein neues JavaScript schreiben, können Sie es am einfachsten einrichten, indem Sie den JavaScript-Code direkt in die Webseite einbetten, sodass sich beim Testen alles an einem Ort befindet. Wenn Sie ein vorab geschriebenes Skript in Ihre Website einfügen, werden Sie in den Anweisungen möglicherweise aufgefordert, Teile oder das gesamte Skript in die Webseite selbst einzubetten.

Dies ist in Ordnung, um die Seite einzurichten und in den richtigen Zustand zu versetzen. Wenn Ihre Seite jedoch so funktioniert, wie Sie es möchten, können Sie die Seite verbessern, indem Sie JavaScript in eine externe Datei extrahieren, damit Ihre Seite funktioniert Der Inhalt im HTML-Code ist nicht so übersichtlich mit nicht inhaltlichen Elementen wie JavaScript.

Wenn Sie nur JavaScripts kopieren und verwenden, die von anderen Personen geschrieben wurden, haben die Anweisungen zum Hinzufügen ihres Skripts zu Ihrer Seite möglicherweise dazu geführt, dass ein oder mehrere große Abschnitte von JavaScript tatsächlich in Ihre Webseite selbst eingebettet sind und deren Anweisungen dies nicht verraten Sie, wie Sie diesen Code aus Ihrer Seite in eine separate Datei verschieben und trotzdem das JavaScript arbeiten lassen können. Machen Sie sich keine Sorgen, denn unabhängig davon, welchen Code das JavaScript auf Ihrer Seite verwendet, können Sie das JavaScript ganz einfach aus Ihrer Seite entfernen und als separate Datei einrichten (oder Dateien, in die mehrere JavaScript-Elemente eingebettet sind) Die Seite). Der Ablauf hierfür ist immer der gleiche und wird am besten anhand eines Beispiels veranschaulicht.

Schauen wir uns an, wie ein Teil von JavaScript aussehen könnte, wenn es in Ihre Seite eingebettet ist. Ihr tatsächlicher JavaScript-Code unterscheidet sich von dem in den folgenden Beispielen gezeigten, aber der Vorgang ist in jedem Fall der gleiche.

Beispiel eins

  if (top.location! = self.location) top.location = self.location;  

Beispiel zwei

   

Beispiel drei

  / * if (top.location! = self.location) top.location = self.location; / *]]> * /  

Ihr eingebettetes JavaScript sollte in etwa so aussehen wie eines der drei oben genannten Beispiele. Natürlich unterscheidet sich Ihr tatsächlicher JavaScript-Code von dem angezeigten, aber das JavaScript wird wahrscheinlich mit einer der drei oben genannten Methoden in die Seite eingebettet. In einigen Fällen kann Ihr Code das veraltete verwenden language = "Javascript" Anstatt von Typ = "Text / Javascript" In diesem Fall möchten Sie Ihren Code möglicherweise zunächst auf den neuesten Stand bringen, indem Sie das Attribut language durch das Attribut type one ersetzen.

Bevor Sie das JavaScript in eine eigene Datei extrahieren können, müssen Sie zunächst den zu extrahierenden Code identifizieren. In allen drei obigen Beispielen müssen zwei Zeilen tatsächlichen JavaScript-Codes extrahiert werden. Ihr Skript wird wahrscheinlich viel mehr Zeilen haben, kann jedoch leicht identifiziert werden, da es auf Ihrer Seite dieselbe Stelle einnimmt wie die beiden JavaScript-Zeilen, die wir in den obigen drei Beispielen hervorgehoben haben (alle drei Beispiele enthalten dieselben zwei Zeilen) von JavaScript unterscheidet sich nur der Container um sie herum geringfügig).

  1. Das erste, was Sie tun müssen, um das JavaScript tatsächlich in eine separate Datei zu extrahieren, ist, einen Nur-Text-Editor zu öffnen und auf den Inhalt Ihrer Webseite zuzugreifen. Sie müssen dann das eingebettete JavaScript suchen, das von einer der in den obigen Beispielen gezeigten Codevariationen umgeben sein wird.
  2. Nachdem Sie den JavaScript-Code gefunden haben, müssen Sie ihn auswählen und in Ihre Zwischenablage kopieren. Mit dem obigen Beispiel wird der auszuwählende Code hervorgehoben. Sie müssen weder die Skript-Tags noch die optionalen Kommentare auswählen, die möglicherweise um Ihren JavaScript-Code herum angezeigt werden.
  3. Öffnen Sie eine andere Kopie Ihres Nur-Text-Editors (oder eine andere Registerkarte, wenn Ihr Editor das gleichzeitige Öffnen mehrerer Dateien unterstützt) und fügen Sie dort den JavaScript-Inhalt ein.
  4. Wählen Sie einen beschreibenden Dateinamen für Ihre neue Datei aus und speichern Sie den neuen Inhalt unter diesem Dateinamen. Mit dem Beispielcode besteht der Zweck des Skripts darin, aus Frames auszubrechen, damit ein geeigneter Name gefunden werden kann framebreak.js.
  5. Jetzt haben wir das JavaScript in einer separaten Datei. Wir kehren zum Editor zurück, wo wir den ursprünglichen Seiteninhalt haben, um die Änderungen vorzunehmen und auf die externe Kopie des Skripts zu verlinken.
  6. Da wir das Skript jetzt in einer separaten Datei haben, können wir alles zwischen den Skript-Tags in unserem ursprünglichen Inhalt entfernen, so dass die
  7. Der letzte Schritt besteht darin, dem Skript-Tag ein zusätzliches Attribut hinzuzufügen, das angibt, wo sich das externe JavaScript befindet. Wir machen das mit a src = "Dateiname" Attribut. In unserem Beispielskript würden wir src = "framebreak.js" angeben..
  8. Die einzige Komplikation besteht darin, dass wir uns entschieden haben, die externen JavaScripts in einem anderen Ordner als die Webseiten zu speichern, auf denen sie verwendet werden. In diesem Fall müssen Sie den Pfad vom Webseitenordner zum JavaScript-Ordner vor dem Dateinamen hinzufügen. Zum Beispiel, wenn die JavaScripts in a gespeichert werden js Ordner innerhalb des Ordners, der unsere Webseiten enthält, die wir benötigen würden src = "js / framebreak.js"

Wie sieht unser Code aus, nachdem wir das JavaScript in eine separate Datei aufgeteilt haben? In unserem Beispiel-JavaScript (vorausgesetzt, dass sich JavaScript und HTML im selben Ordner befinden) lautet unser HTML auf der Webseite jetzt:

 

Wir haben auch eine separate Datei namens framebreak.js, die enthält:

if (top.location! = self.location) top.location = self.location;

Ihr Dateiname und der Inhalt der Datei unterscheiden sich erheblich davon, da Sie das in Ihre Webseite eingebettete JavaScript extrahiert und der Datei einen aussagekräftigen Namen gegeben haben. Der eigentliche Vorgang des Extrahierens ist jedoch der gleiche, unabhängig davon, welche Zeilen enthalten sind.