JavaScript verplaatsen van de webpagina

Wanneer u voor het eerst een nieuw JavaScript schrijft, is de eenvoudigste manier om het in te stellen, de JavaScript-code rechtstreeks in de webpagina in te sluiten, zodat alles op één plaats staat terwijl u het test om het goed te laten werken. Evenzo, als u een vooraf geschreven script in uw website invoegt, kunnen de instructies u vertellen om delen of het hele script in de webpagina zelf in te sluiten.

Dit is prima om de pagina in te stellen en in de eerste plaats goed te laten werken, maar zodra uw pagina naar behoren werkt, kunt u de pagina verbeteren door JavaScript uit te pakken in een extern bestand zodat uw pagina inhoud in de HTML is niet zo vol met niet-inhoudsitems zoals JavaScript.

Als u alleen JavaScripts kopieert en gebruikt die door andere mensen zijn geschreven, kunnen hun instructies over het toevoegen van hun script aan uw pagina mogelijk hebben geresulteerd in het feit dat een of meer grote delen van JavaScript daadwerkelijk zijn ingesloten in uw webpagina zelf en hun instructies niet vertellen hoe je deze code van je pagina naar een apart bestand kunt verplaatsen en toch JavaScript kunt gebruiken. Maak je geen zorgen, want ongeacht welke code de JavaScript die je op je pagina gebruikt, je kunt de JavaScript eenvoudig uit je pagina verplaatsen en instellen als een afzonderlijk bestand (of bestanden als je meer dan één JavaScript-bestand hebt ingebed in de pagina). Het proces om dit te doen is altijd hetzelfde en kan het beste worden geïllustreerd met een voorbeeld.

Laten we eens kijken hoe een stuk JavaScript eruit zou kunnen zien wanneer het in uw pagina is ingesloten. Uw werkelijke JavaScript-code zal verschillen van die in de volgende voorbeelden, maar het proces is in alle gevallen hetzelfde.

Voorbeeld één

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

Voorbeeld twee

Voorbeeld drie

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

Uw ingesloten JavaScript moet er ongeveer uitzien als een van de bovenstaande drie voorbeelden. Natuurlijk zal uw daadwerkelijke JavaScript-code verschillen van de getoonde, maar het JavaScript zal waarschijnlijk worden ingesloten in de pagina met behulp van een van de bovenstaande drie methoden. In sommige gevallen kan uw code de verouderde gebruiken language = "javascript" in plaats van Type = "text / javascript" in dat geval wilt u misschien eerst uw code actueler maken door het taalkenmerk te vervangen door het type één.

Voordat u JavaScript in een eigen bestand kunt uitpakken, moet u eerst de te extraheren code identificeren. In alle drie de bovenstaande voorbeelden moeten twee regels werkelijke JavaScript-code worden geëxtraheerd. Uw script zal waarschijnlijk veel meer regels bevatten, maar kan gemakkelijk worden geïdentificeerd omdat het dezelfde plaats op uw pagina inneemt als de twee JavaScript-regels die we in de bovenstaande drie voorbeelden hebben gemarkeerd (alle drie de voorbeelden bevatten dezelfde twee regels) van JavaScript, het is gewoon de container om hen heen die iets anders is).

1. Het eerste wat u moet doen om JavaScript in een afzonderlijk bestand te extraheren, is een teksteditor openen en toegang krijgen tot de inhoud van uw webpagina. Vervolgens moet u het ingesloten JavaScript zoeken dat wordt omgeven door een van de codevariaties die in de bovenstaande voorbeelden worden weergegeven.
2. Nadat u de JavaScript-code hebt gevonden, moet u deze selecteren en naar uw klembord kopiëren. In het bovenstaande voorbeeld wordt de te selecteren code gemarkeerd. U hoeft geen scripttags of optionele opmerkingen te selecteren die rond uw JavaScript-code kunnen verschijnen.
3. Open een ander exemplaar van uw teksteditor (of een ander tabblad als uw editor het openen van meerdere bestanden tegelijk ondersteunt) en plaats de JavaScript-inhoud daar.
4. Selecteer een beschrijvende bestandsnaam voor uw nieuwe bestand en sla de nieuwe inhoud op met die bestandsnaam. Met de voorbeeldcode is het doel van het script om uit frames te breken, dus een geschikte naam zou kunnen zijn framebreak.js.
5. Dus nu we het JavaScript in een apart bestand hebben, keren we terug naar de editor waar we de originele pagina-inhoud hebben om de wijzigingen daar aan te brengen om te linken naar de externe kopie van het script.
6. Omdat we het script nu in een afzonderlijk bestand hebben, kunnen we alles tussen de scripttags in onze oorspronkelijke inhoud verwijderen, zodat de
7. De laatste stap is om een ​​extra attribuut aan de script-tag toe te voegen, waarmee wordt aangegeven waar het externe JavaScript kan worden gevonden. We doen dit met behulp van een src = "filename" attribuut. Met ons voorbeeldscript zouden we src = "framebreak.js" specificeren.
8. De enige complicatie hierbij is als we hebben besloten om de externe JavaScripts op te slaan in een aparte map van de webpagina's die ze gebruiken. Als u dit doet, moet u het pad van de webpagina naar de JavaScript-map voor de bestandsnaam toevoegen. Als de JavaScripts bijvoorbeeld worden opgeslagen in een js map in de map met onze webpagina's die we nodig zouden hebben src = "js / framebreak.js"

Dus hoe ziet onze code eruit nadat we JavaScript hebben gescheiden in een apart bestand? In het geval van ons voorbeeld JavaScript (ervan uitgaande dat JavaScript en HTML zich in dezelfde map bevinden) staat onze HTML op de webpagina nu:

We hebben ook een apart bestand met de naam framebreak.js dat bevat:

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

Uw bestandsnaam en bestandsinhoud zullen er veel anders uitzien omdat u hebt geëxtraheerd wat JavaScript in uw webpagina is ingesloten en het bestand een beschrijvende naam heeft gegeven op basis van wat het doet. Het daadwerkelijke extractieproces is echter hetzelfde, ongeacht de regels die het bevat.