Wij programmeren achter de schermen. Gegevens ontvangen van de server zonder de pagina opnieuw te laden. Incompatibiliteit met verschillende browsers

Naam: document.f.h.value=window.navigator.appName;

8.5.

Gegevens verzenden vanuit verborgen formuliervelden

Nadat u op de knop in de adresbalk heeft geklikt, ziet u dat er naast gebruikersnaam=naam ook h=uw_browsernaam staat. Het h-veld was niet zichtbaar in het formulier dat u heeft ingevuld. Het formulier heeft dus naast uw wens aanvullende informatie naar de server verzonden. Dit is al onaangenaam, hoewel de informatie zelf in dit geval (browsernaam) niets crimineels vertegenwoordigt. Als POST niet als gegevensoverdrachtmethode werd gebruikt (zoals in ons voorbeeld standaard), zou de gebruiker deze verborgen gegevensoverdracht niet eens opmerken.

Voorbeeld 8.3. Het voorbeeld bestaat uit twee frames (bevindt zich in de left.htm- en right.htm-bestanden) die hetzelfde formulier bevatten. Daarnaast wordt het volgende script ook in het rechterframe geplaatst:

functie copyFields() ( hier = document.forms.elements; daar = window.top.frames.document.forms.elements; hier.value = daar.waarde; hier.value = daar.waarde; hier.value = daar.waarde ; hier.waarde = daar.waarde; setTimeout("copyFields()",100);

De functie copyFields() wordt elke 0,1 seconde uitgevoerd. Wanneer de gebruiker gegevens in het linkerframe invoert, worden dezelfde gegevens in de overeenkomstige velden in het rechterframe geplaatst. Gegevens uit het ene venster kunnen dus door een programma uit een ander venster (of frame) worden gelezen. De vraag is alleen of je wilt dat dit gebeurt. Hoe deze problemen worden opgelost, wordt hieronder beschreven in het gedeelte 'Beveiligingsmodel'.

Een ander voorbeeld is het verzenden van gegevens over een evenement zonder dat er een zichtbaar formulier op de webpagina staat:

document.f.h.value = venster.navigator.appName;

De kwestie van de toegankelijkheid van JavaScript-code wordt vanuit twee gezichtspunten bekeken: identificatie, wat resulteert in de noodzaak om de code te verbergen, en gebruikersveiligheid, wat toegankelijkheid van de code betekent.

Met programmeertechnieken voor verborgen code kunt u verschillende andere problemen oplossen die geen verband houden met beveiliging.

We zullen de mogelijkheden van het gebruik van verborgen code overwegen, zonder een oordeel uit te spreken over de voordelen van de ene of de andere aanpak. Laten we verschillende opties overwegen:

• onzichtbaar frame;
• code in extern bestand;
• gegevensuitwisseling via geïntegreerde grafische weergave.

Strikt genomen verbergen de eerste twee opties de code niet volledig. Ze zijn ontworpen voor onervaren gebruikers of voor onnieuwsgierigen. Op de een of andere manier kijk je niet elke keer naar de brontekst van de pagina.

De technologie van programmeren in een onzichtbaar frame is gebaseerd op het feit dat u bij het beschrijven van een framestructuur een configuratie kunt instellen zoals:

8.6.

Het rechterframe heeft een breedte van nul (rand zichtbaar)

In dit geval zal het linkerframe het gehele werkgebied van het venster beslaan en zal de inhoud van het rechterframe verborgen zijn. In dit onzichtbare frame plaatsen we de programmacode (bijvoorbeeld het bovenstaande script voor het lezen van velden uit het formulier in het linkerframe). Functies voor het wisselen van afbeeldingen worden soms in een onzichtbaar frame geplaatst, waardoor de gebruiker al met het hoofdframe kan werken terwijl de rest van de afbeeldingen wordt geladen.

In dit voorbeeld lieten we de gebruiker echter de mogelijkheid om ons bloot te stellen: langs de rechterrand van het venster is een verticale streep zichtbaar - dit is de grens tussen de frames. De gebruiker kan het naar links verplaatsen en het rechterframe zien. Het is niet moeilijk om jezelf hiertegen te beschermen - stel gewoon de dikte van de randen van de frames in en geef aan dat het onmogelijk is om de grootte van elk frame te wijzigen:

Het rechterframe heeft een breedte van nul (de rand is onzichtbaar)

Code in extern bestand

Deze techniek is gebaseerd op twee ideeën: de mogelijkheid om een ​​grafische afbeelding te verwisselen zonder de pagina opnieuw te laden en de mogelijkheid om deze grafische afbeelding te verwisselen, niet door de URL van het grafische bestand op te geven, maar via een CGI-script dat Content-type retourneert: image/ ... of voert een omleiding uit. Houd er rekening mee dat u in formulieren alleen een andere methode dan GET kunt gebruiken. In het volgende voorbeeld hebben we een functie change_image() gemaakt, die technisch gezien de waarde van de src-eigenschap van een afbeelding verandert. Maar als neveneffect kan de server weten of de gebruiker cookies heeft ingesteld (als het CGI-script image.cgi op de server dienovereenkomstig is geprogrammeerd):

function change_image(x) ( document[x].src = "http://abc.ru/image.cgi?" + document.cookie; )

Deze onschadelijke reeks JavaScript-instructies laat ons weten of de klant een cookie heeft ontvangen. Cookies worden om verschillende redenen mogelijk niet ondersteund. In dit geval draagt ​​het programma de cookies die het heeft ingesteld als scriptparameter over naar de server, onder het mom van het wijzigen van de afbeelding.

Bij het programmeren in JavaScript is het mogelijk mogelijk om vanuit het programma toegang te krijgen tot de persoonlijke gegevens van de gebruiker. Dit probleem doet zich altijd voor wanneer iets dat op een computer draait, de mogelijkheid heeft om zelfstandig gegevensuitwisseling via het netwerk met een externe server te organiseren. Van versie tot versie wordt het beheer van de bescherming van dergelijke gegevens voortdurend verbeterd, maar u moet altijd in gedachten houden dat veel ‘padvinders’ dit probleem onderzoeken en voortdurend meer en meer nieuwe manieren ontdekken om beveiligingsmechanismen te omzeilen. We zullen alleen de hoofdpunten van de principes van informatiebeveiliging in JavaScript uitleggen en de zoektocht naar mogelijke zwakke punten als huiswerk overlaten aan de meest nieuwsgierige lezers.

Standaard omvatten JavaScript-beveiligde gegevens:

Beschrijving

De eenvoudigste en meest voorkomende manier is om een ​​verborgen frame te gebruiken waarin de gegevens worden geladen. Typisch wordt een dergelijk frame geïmplementeerd met behulp van een IFRAME-element.
Het opvragen en ontvangen van gegevens gebeurt asynchroon, meestal met behulp van een callback-functie die is gedefinieerd in de context van de hoofdpagina:

Wanneer het script gegevens van de server moet ontvangen, geeft het de opdracht om de pagina in dit iframe te laden:

Raam. frames[ "buffer" ] . locatie = url;

// url - GET-verzoek naar de server

U kunt ook een onzichtbaar formulier indienen met target="buffer" . Hierdoor kunt u gegevens naar de server overbrengen met behulp van de POST-methode.

• ouder. frameCallback("ontvangen gegevens" );
• Voordelen

• De mogelijkheid om gegevens van welke vorm dan ook (inclusief dynamisch gecreëerd) naar IFRAME te verzenden, waardoor problemen met gegevenscodering worden opgelost (alle transcodering wordt uitgevoerd door de browser).
• Gebreken
• Browsergeschiedenis verstopt.
• Problemen tussen browsers: elke browser heeft zijn eigen en uiterst onstabiele functies bij het werken met IFRAME's.

• Moeilijkheden in Opera: u heeft alleen toegang tot de inhoud van het IFRAME, wanneer u bij het maken het src-attribuut hebt opgegeven dat overeenkomt met de naam van de huidige site.
• XMLHttpRequest en ActiveX Microsoft.XMLHTTP-voordelen

• De componenten worden gebruikt waarvoor ze bedoeld zijn.

• De oplossingen zijn specifiek voor IE en Mozilla/Firefox (in IE werkt het helemaal niet als ActiveX uitgeschakeld is), in Opera is er pas ondersteuning vanaf versie 8.
• SCRIPT: Gegevens laden via een dynamisch gegenereerde SCRIPT-tag. Voordelen
  • Goede compatibiliteit tussen browsers. Identieke code en werkwijze in verschillende browsers (ook werkt in Opera).
  • Geheugenbesparing vergeleken met IFRAME.

• De geschiedenis raakt niet beschadigd.
• De methode is niet afhankelijk van browserfuncties en werkt in IE5.0+, Mozilla 1.7+, Firefox 1.0+ en Opera 7.3+ (hier betekent “+” “in deze en nieuwere versies”). Bovendien maakt het geen gebruik van ActiveX of IFRAME.
• Het is niet mogelijk om heel veel gegevens naar de server te sturen (beperking op de lengte van QUERY_STRING).

Frames zijn HTML-elementen waarmee u een webbrowservenster in verschillende onafhankelijke vensters kunt verdelen, die elk een afzonderlijk HTML-document kunnen laden. Elk dergelijk venster (frame) kan zijn eigen schuifbalken hebben en onafhankelijk van andere onafhankelijke vensters functioneren of, integendeel, de inhoud ervan controleren. Ze kunnen worden gebruikt om een ​​menu te organiseren dat zich voortdurend in één venster bevindt, terwijl de informatie zelf in een ander venster staat. Gebruikers hebben op elk moment toegang tot het menu en hoeven niet terug te gaan naar de vorige pagina om een ​​ander menu-item te selecteren. Door frames te gebruiken, kunt u afbeeldingen of andere statische interface-elementen aan het browservenster 'vastzetten', terwijl de rest van de pagina binnen het frame scrolt.
Het is echter vermeldenswaard dat frames tegenwoordig als een verouderd hulpmiddel worden beschouwd en dat sites met frames nu als onwaardig worden beschouwd, omdat professionele webmasters nooit frames in hun projecten gebruiken. Frames kennen een aantal beruchte problemen. Ze verwarren bijvoorbeeld zoekmachines omdat de pagina's die de inhoud bevatten niet naar andere documenten linken. Als u bezoekers via zoekmachines wilt krijgen, vergeet dan frames. Het is voor een gebruiker onmogelijk om een ​​pagina die hij leuk vindt in het bladwijzergedeelte van de browser te plaatsen, omdat frames het adres verbergen van de pagina waarop hij zich bevindt en altijd alleen het websiteadres tonen. Om deze reden veroorzaken ze problemen voor browsers bij het bijhouden van de geschiedenis, en ze zijn ook niet erg aanpasbaar aan verschillende schermformaten en mobiele apparaten.
Ondanks het feit dat projecten met frames steeds zeldzamer worden op het World Wide Web, zou het leren van HTML onvolledig zijn zonder het onderwerp frames in ogenschouw te nemen. Frames hebben, naast hun nadelen, ook enkele voordelen waardoor we deze technologie niet als weinig belovend kunnen afdoen.

De structuur van een HTML-document met frames lijkt qua uiterlijk sterk op het formaat van een gewoon HTML-document. Net als in een gewoon HTML-document wordt alle code tussen paired en tags geplaatst, en bevinden de headers zich in de container. Het belangrijkste verschil tussen een document met frames en een gewoon HTML-document is dat een document met frames een gepaarde tag gebruikt in plaats van een tag (uit de Engelse frameset - een set frames).
Het volgende voorbeeld toont de structuur van een HTML-document met frames:

• Probeer het zelf »

Document met kaders

In het bovenstaande voorbeeld bevat de pagina drie gebieden, die elk aanvankelijk zijn geladen met HTML-documenten frame_top.html, frame_left.html en frame_right.html. Naast HTML-documenten kan een frame ook afbeeldingen bevatten. Om dit te doen, moet u bijvoorbeeld het adres van de overeenkomstige afbeelding opgeven in het src-attribuut src="afbeelding.gif". Merk op dat het element zonder afsluitende tag wordt gebruikt.
Een container kan alleen tags bevatten of een andere set frames die onder tags en vallen.
De tag heeft de volgende kenmerken:

• rijen - beschrijft hoe een pagina in rijen is verdeeld:
• cols - beschrijft hoe u een pagina in kolommen kunt splitsen:

De waarde van de attributen rows en cols moet niet het aantal rijen of kolommen aangeven, maar de breedte en hoogte van de frames. Alle waarden in de lijst worden gescheiden door komma's. Afmetingen kunnen worden opgegeven in absolute eenheden (pixels) of percentages:

• cols="20%, 80%" - het browservenster is opgesplitst in twee kolommen met behulp van het cols-attribuut, de linkerkolom beslaat 20% en de rechter 80% van het browservenster.
• rows="100, *" Het browservenster wordt gesplitst in twee horizontale vensters met behulp van het rows-attribuut, waarbij het bovenste venster 100 pixels beslaat en het onderste venster de resterende ruimte in beslag neemt die wordt aangegeven door het asterisk-symbool.

Zoals uit dit voorbeeld blijkt, maakt een container met het rows-attribuut eerst twee horizontale frames, en in plaats van het tweede frame wordt een ander frame vervangen, waardoor het onderste horizontale frame in twee kolommen wordt gesplitst met behulp van het cols-attribuut. De linkerkolom neemt de ruimte in beslag. 20%, en de rechter 80% van het browservenster.
Als de browser geen frames ondersteunt, wordt in het venster tekst tussen de tags en weergegeven. Alles tussen de tags en wordt genegeerd door browsers die frames ondersteunen. De ontwikkelaar moet dus code schrijven die de inhoud van de frames op een andere manier dupliceert, en deze code in een container plaatsen, zodat alle gebruikers zijn webpagina kunnen zien.
Zoals reeds opgemerkt, wordt een ongepaarde tag gebruikt om een ​​afzonderlijk frame in een document in te voegen. Het src-attribuut specificeert het document dat binnen dit frame moet worden weergegeven, bijvoorbeeld: . Als het src-attribuut ontbreekt, wordt een leeg frame weergegeven.

Standaard toont de browser een grijze, meestal 3D-lijnrand tussen frames, waarmee bezoekers de grootte van het frame kunnen aanpassen.
De framerand kan net als elk ander frame-element worden gemanipuleerd. Om dit te bereiken zijn er verschillende elementattributen waarmee u de randen van frames kunt aanpassen. De dikte van de randlijn wordt bepaald door het randattribuut. De standaardwaarde voor de randdikte is vijf.
Om de rand van een frame te verbergen, moet u de randbreedtewaarde op nul instellen of het frameborder-attribuut op "no" of "0" instellen. Het framebord attribuut kan slechts twee tegengestelde waarden aannemen. Als de waarde van het frameborder-attribuut “ja” of “1” is, wordt de framerand weergegeven, en als “0” of “nee” dan niet. Houd er rekening mee dat de frameborder-attribuutwaarden variëren tussen browsers. Om dit probleem op te lossen, gebruikt u het frameborder attribuut twee keer, en voor sommige browsers moet u ook het framespacing attribuut toevoegen met de waarde “0”:

In het volgende voorbeeld verwijderen we de rand tussen frames:

• Probeer het zelf »

Kaders zonder randen

Als u de rand tussen frames verwijdert, kunnen bezoekers het formaat van het frame in de browser niet wijzigen. U kunt ook voorkomen dat het formaat van het frame wordt gewijzigd door de randen te behouden met behulp van het noresize attribuut:

Het bordercolor attribuut kan worden gebruikt om de kleur van de rand van een frame te wijzigen; het enige dat u hoeft te doen is een code of een geschikte gereserveerde kleurnaam opgeven.
Hieronder ziet u een voorbeeld van een HTML-pagina die de hierboven beschreven kenmerken voor framerandcontrole bevat: de randkleur is rood, de grootte van het bovenste frame kan niet worden gewijzigd:

• Probeer het zelf »

Framegrensbeheer

Als u de weergegeven pagina binnen het frame dichter bij de randen wilt plaatsen, of juist verder weg wilt verplaatsen, wijzigt u de kenmerken marginheight en marginwidth van de tag. Het attribuut marginheight specificeert de marge tussen de inhoud van het frame en de boven- en onderrand. Syntaxis:

Het marginwith-attribuut specificeert de marge tussen de inhoud van het frame en de rechter- en linkerrand. Syntaxis:

Deze html-regel positioneert de weergegeven pagina bijvoorbeeld dicht bij de rand van het frame:

Als de pagina een schuifbalk weergeeft die u niet wilt, kunt u dit probleem oplossen door het scrolling ="no" attribuut op te geven in het . Maar houd er rekening mee dat als het frame niet groot genoeg is om de volledige inhoud van de pagina weer te geven, de bezoeker niet door de weergegeven pagina kan scrollen.

Het volgen van een link in een gewoon HTML-document gaat als volgt: klik op de link en het huidige document wordt vervangen door een nieuw document in het huidige of in een nieuw browservenster. Bij het gebruik van frames verschilt het laadschema voor HTML-documenten van het gebruikelijke, en het belangrijkste verschil is de mogelijkheid om een ​​HTML-document vanuit een ander frame in het ene frame te laden.
Om een ​​document in een specifiek frame te laden, gebruikt u het doelattribuut van de tag . De waarde van het doelattribuut is de naam van het frame waarin het document, gespecificeerd door het naamattribuut van de tag, zal worden geladen. Het is ook vermeldenswaard dat de framenaam moet beginnen met een cijfer of een Latijnse letter. De volgende namen worden gebruikt als gereserveerde namen:

Googlen

Het rechterframe krijgt een naam frame_rechts:

Gebruik de constructie om een ​​document in een opgegeven frame te laden target = "frame_right", zoals weergegeven in het voorbeeld:

• Probeer het zelf »

Link naar een ander frame

Uw browser geeft geen frames weer

Met een element (een afkorting van de Engelse term ‘floating frame’) kunt u een afzonderlijk HTML-document of ander hulpmiddel ergens op een webpagina insluiten. De inhoud van een zwevend (ingesloten) frame kan elke HTML-pagina zijn, afkomstig van uw bron of van een andere website. Zoals je al hebt begrepen, worden zwevende frames gemaakt met behulp van het element, dat, in tegenstelling tot de tag, niet tussen de tags en wordt ingevoegd, maar tussen de tags en.
Het element kan dezelfde attributen gebruiken als een frame, met uitzondering van het noresize attribuut - in tegenstelling tot gewone frames kunnen inline frames niet van grootte worden aangepast op het scherm:

In het volgende voorbeeld zijn de afmetingen van het zwevende frame opgegeven in pixels, maar u kunt deze ook in % opgeven:

Frames verdelen het browservenster in afzonderlijke gebieden die naast elkaar liggen. Elk van deze gebieden laadt een afzonderlijke webpagina. Omdat er veel over frames wordt gesproken over de noodzaak ervan, zullen we hieronder de voor- en nadelen van frames presenteren, zodat u zelf kunt beslissen of ze de moeite waard zijn om op uw website te gebruiken.

Frames worden gebruikt om een ​​webpagina in twee gebieden te verdelen die de navigatie en inhoud van de site bevatten. Met het framemechanisme kunt u een document in één frame openen vanuit een link waarop u in een heel ander frame hebt geklikt. Deze indeling van een webpagina in componenten is intuïtief en logisch.

Lay-out zonder frames kenmerkt zich door het plaatsen van zowel navigatie als inhoud op één pagina. Dit vergroot de omvang van elke pagina en kan in totaal een aanzienlijke invloed hebben op de hoeveelheid informatie die van de site wordt gedownload. En omdat frames gebruik maken van de verdeling van informatie in delen, zullen pagina's daarmee sneller laden.

Frames bieden een unieke mogelijkheid om informatie precies daar te plaatsen waar u deze nodig heeft in het browservenster. U kunt dus een kader onder aan de browser plaatsen en ongeacht of u door de inhoud bladert, verandert dit gebied niet van positie.

U kunt het formaat van frames direct wijzigen, iets wat de traditionele HTML-indeling niet toestaat.

De webpagina wordt alleen in het opgegeven venster geladen, de rest blijft ongewijzigd. Met JavaScript kunt u tegelijkertijd twee of meer pagina's in frames laden.

Vaak komt de gebruiker op een website terecht zonder enig idee waar hij terecht is gekomen, omdat hij gewoon op een link heeft geklikt die hij in een zoekmachine heeft ontvangen.

Slechte indexering door zoekmachines

Er kunnen geen bladwijzers worden aangemaakt voor interne pagina's

Incompatibiliteit met verschillende browsers

Respectloos

Een heel vreemd nadeel dat niets te maken heeft met de technische kenmerken van het maken van de site, maar eerder ideologisch van aard is. Sites met frames worden als onwaardig beschouwd en de auteurs ervan vallen onmiddellijk buiten de categorie van professionals die nooit frames in hun werk gebruiken. De uitzondering vormen chats, waarbij het mogelijk is om zonder frames te doen, maar het gebruik van nogal sluwe methoden en het gebruik van frames om chats te maken is vrij eenvoudig.