Werken met de jQuery.load() functie
Hieronder zie je een rechthoek, met daarin het item op deze website over Jets.js. Die is daar in gezet met de jQuery-function load(). Op deze pagina wordt uitgelegd hoe je dat aanpakt.
Als je deze tekst ziet, ben je niet verbonden met een webserver.
Dat is voor deze techniek wel nodig!
Zie de code onderaan de bladzijde.
Met load() laad je een bestand in de huidige pagina. Dat doe je door de naam van het bestand als parameter mee te geven
(tussen aanhalingstekens). Dat mag een HTML-file zijn, maar ook een gewoon tekstbestand. De browser negeert de <head>
en neemt alleen de <body> over.
Je hebt jQuery nodig om load() te kunnen gebruiken. Die haal je het beste van een CDN. Op deze pagina is versie 1.11.1 gebruikt.
Je moet verbonden zijn met een webserver om load()
Op deze pagina (html-449.htm) is het bestand html-450.htm in de rechthoek geladen.
De oplettende lezers valt het op dat de achtergrond geel is in plaats van het gebruikelijke paars-blauw. Dat komt doordat
de achtergrondkleur van de rechthoek is ingesteld met CSS. De achtergrondkleur van (bijna) alle pagina's van deze site is
ingesteld met het attribuut bgcolor van de <body>-tag.
Instellingen via CSS gaan voor instellingen met attributen, dus is de achtergrondkleur geel en niet paars-blauw. (Voor dit
voorbeeld is dat wel handig…)
N.B.: De rand om de ingevoegde pagina staat er alleen voor de duidelijkheid. Vaak zou je die moeten/kunnen
weglaten. Als je scrollbars nodig hebt is het duidelijker hem te laten staan, zeker als je de achtergrondkleur van de pagina
en de ingevoegde pagina gelijk houdt.
De rechthoek is gemaakt met <div id="Venster">. De code om het bestand html-450.htm daar in
te laden luidt:
$('#Venster').load('html-450.htm')
Je kunt eenvoudig elementen selecteren uit het bestand dat je invoegt. Bijvoorbeeld: html-450.htm bevat een lijstje
namen. Die staan in de <div id="JetsContent">. Als je alleen dat blok wilt laden gebruik je:
$('#Venster').load('html-450.htm #JetsContent')
Dit werkt bij alle HTML-elementen, klassen en id's. Als je een selectie maakt, wordt toch eerst de hele pagina opgehaald.
De browser verwijdert de overbodige code en toont het gevraagde. Deze methode werkt dus niet als je het dataverkeer wilt beperken.
Als je een pagina invoegt waar een script in staat, is het niet zeker of het zal werken. In elk geval kun je er op rekenen dat de browser vastloopt als het script allerlei grafische zaken moet regelen. Een item als Sneeuwbuien en ballonnen loopt gegarandeerd vast. Maar in de op deze bladzijde ingevoegde pagina (html-450.htm) bevat óók een script, en die werkt vlekkeloos.
De function load() geeft geen foutmeldingen. Als je een bestand probeert in te voegen dat niet bestaat, gebeurt
er niets. Dat is op te vangen door het element waar de code ingeladen wordt, te voorzien van een melding. Op deze pagina is
dat gedaan.
Als de ingevoegde code een script bevat dat vastloopt (of vast zou kunnen lopen), wordt dat niet gemeld. Dat is lastig. Mede
om deze reden wordt aangeraden om de 'echte' AJAX-functies van jQuery te gebruiken. Als je echter alleen bestanden wilt inladen
en geen zaken die uit een database moeten komen, is load() een prima optie.
De function load() is beschikbaar in jQuery 1 en 2. In jQuery 3 gaat deze verdwijnen.
De Same Origin Policy
Je kunt met load() niet zomaar elk bestand in je website invoegen. In JavaScript is een aantal beperkingen ingebouwd
om problemen met de veiligheid te voorkomen. Als je met load() een bestand invoegt moet dat:
• Van hetzelfde domein komen. Voor deze website geldt dus dat google.nl
niet kan worden ingevoegd:
De code $('#Venster').load('https://www.google.nl')
werkt dus niet.
• Met het zelfde protocol werken. Deze website gebruikt https://
De code $('#Venster').load('https://home.hccnet.nl/s.f.boukes/index.html')
werkt dus niet.
• Op dezelfde IP-poort werken. Deze website gebruikt poort 80, wat standaard is voor surfen op het worldwide web.
De code $('#Venster').load('html-450.htm:8080')
werkt dus niet.
Het is niet moeilijk om de same origin policy te omzeilen. Er bestaat een workaround die bekend is onder de naam JSONP. Daarbij wordt gebruikt dat scripts van een andere server gewoon kunnen worden aangeroepen. Bespreking daarvan valt buiten het bestek van deze bladzijde.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
(Zet dit in de <BODY>, op de plaats waar de pagina moet worden geladen).
<div id="Venster">
<div style="padding-top:40px; text-align:center">
<span class="Kop2">Hier komt de pagina die geladen is
met $.load</span>
<p>Als je deze tekst ziet, ben je niet verbonden
met een webserver.<br>
Dat is voor deze techniek wel nodig!</p>
</div>
</div>
N.B.: De class Kop2 staat in de CSS van deze pagina.
(Zet dit aan het eind van de <BODY>, bij voorkeur net voor de </BODY>-tag).
<script>
$(document).ready(function(){
$('#Venster').load('html-450.htm')
});
</script>
