gecompliceerde links

Status
Niet open voor verdere reacties.

dafje95

Gebruiker
Lid geworden
5 dec 2008
Berichten
103
Hallo,

Ik ben voor school een site aan het maken, maar ik heb een probleempje:

Ik heb 3 pagina's:
1. Index.html
2. Games/Gameframe.html
3. Games/Games/Game.html

Nu probeer ik met een link in Index.html pagina 3 te openen in een iFrame genaamd GameFrame in pagina 2.
Na wat zoeken op het internet is mij dit nog steeds niet gelukt, dus hebben jullie misschien ideeen?

Het liefste alleen in html, css, en eventueel javascript.

Mvg Mike
 
De vraag die je stelt, vind ik erg onduidelijk. Zou je het duidelijker willen uitleggen? Evt. met een afbeelding o.i.d.
 
Ik probeer een site als Spele.nl na te maken, je hebt meerdere pagina's, maar ik pak nu even deze 3:
De index(met alle links), het spelletje zelf, en een pagina met een iFrame waar je dat spelletje in speelt.
Ik kan wel allemaal aparte pagina's gaan maken, iedere pagina met het spel er al in, maar dat is moeilijk aan te passen aangezien je dan op elke pagina waar een spel op staat, de code aan kan gaan passen. Als je gewoon 1 pagina gebruikt, en elk spelletje dan apart in een leeg html bestand zet, hoef je maar 1 pagina aan te passen als je iets wil veranderen.

Stel pagina 1 is Index.html,
pagina 2 bevind zich in de map Game/Gameframe.html
en pagina 3 (het spelletje) bevind zich in Game/Games/Meppen.html

Nu zoek ik een mogelijkheid om, als je op de index op een link klikt, het spelletje ( pagina 3) in het iframe in pagina 2 komt.

Ik snap dat het een beetje vaag kan zijn :P dus als je het nog steeds niet begrijpt, kan ik het misschien anders uitleggen
 
Aha, ik zou eigenlijk niet weten hoe je dat met html, css of javascript moet doen. Wel heb ik een idee met PHP :)
 
Als het niet anders kan mag het ook wel met php, maar gezien de opdracht gaat de voorkeur uit naar html, of javascript
 
gast0187, ik snap hoe iframes werken, je snapt het probleem niet helemaal:
Het iframe dat ik als target moet hebben bevind zich niet op diezelfde pagina, ik wil een pagina openen in een iframe op een andere pagina.

Ik heb even snel een tekening gemaakt zodat jij, en de volgende die dit leest snapt wat ik bedoel:
schematisch.jpg

Snap je het nu beter?
 
Als je target blank doet krijg je een nieuw tabblad/venster die je pagina 2 OF 3 laat zien, maar ik moet hebben dat de link pagina 2 opent, en in het iframe in pagina 2, pagina 3 wordt geopend, met 1 link
 
Hoi dafje95,
Het probleem is krakie-helder; ik heb 4 oplossingen voor je. :)

1. Javascript
Normaal gesproken kan je een andere pagina geen wisselende opdracht geven voor een iframe. Maar met javascript kan het wel (bezoekers zonder javascript of met uitgeschakeld javascript hebben daar niets aan).
Dan kan je achter de links op je pagina speloverzicht.htm voor elk spel iets anders zetten, bv. spelletjesspelen.htm#spel-01, spelletjesspelen.htm#spel-02, enz.
Op die pagina (die dus altijd de spelletjesspelen.htm pagina is!), laat je door javascript ontrafelen wat er achter de # in de adresbalk staat. Staat er #spel-01, dan wordt spel 01 in het <iframe> op de pagina gezet. Bij #spel-02 gaat spel 2 er in, enz.

=======
2. Een cookie
Wat ook kan is op de keuze-pagina een "cookie" laten plaatsen op de computer van de bezoeker (bezoekers met uitgeschakelde cookies en geen javascript hebben daar niets aan). Afhankelijk van de keuze voor een spel wordt dan (ook weer met javascript) als inhoud van het cookie "spel-01", "spel-02", enz. meegegeven op het moment dat je op een spel klikt.
Op de vervolgpagina spelletjesspelen.htm kan dan het cookie worden opgehaald, en de uitkomst ervan bepaalt welk spelletje er in je iframe komt.

=======
3. Server-side invoegen van pagina-onderdelen
Als ik op spele.nl kijk, dan is zo'n linken-pagina bv.: spele.nl/reactie-spelletjes/. Dat is in jouw schema'tje: Pagina 1.
Klik ik bij de reactie-spelletjes bv. op de tweede link (Crazy Guitar Maniac 3), dan kom ik op: spele.nl/crazy-guitar-maniac-3-spel/. Dat is in jouw schema'tje dus Pagina 2, waar het spelletje (jouw Pagina 3) in een iframe in zou moeten zitten.

Maar ... het spelletje daar zit helemaal niet in een <iframe>! :shocked: Als je de broncode bekijkt zit het als een Flash-<object> in een <div id="game">.
Hetzelfde geldt bv. voor het 3e spelletje: Super Crazy Guitar Maniac 2, dat zit ook helemaal op een eigen pagina.

En toch ... lijkt het alsof de spelletjes er in een <iframe> in zitten, want bv. de kop met het menu (en ook het tabblad "Laatst gespeeld" in de rechterkolom) zijn precies hetzelfde.
Schijn bedriegt! ;)
Het is daar de omgekeerde wereld: het spelletje zit op de pagina zelf (en de commentaren er onder enz. ook), en de standaard rest van de pagina wordt op een andere manier binnengehaald: met een insluiting door de server. In het geval van spele.nl is dat gedaan met ASP (ze zitten kennelijk op een Windows-server), bij andere sites/servers kan dat gedaan worden met PHP.


  • ASP en PHP zijn "server-side" programma's, die (met een eenvoudige code op de pagina zelf) hele brokken materiaal kunnen invoegen die ergens anders dan op de pagina staan. Als bezoeker van de pagina merk je daar niets van, want de ASP-/PHP-machine op de server werkt als pre-processor, en timmert alles in elkaar vóórdat de pagina naar de bezoeker wordt gedownload.

Zoiets zou jij ook kunnen doen, bv. alles wat op de combi-pagina 2+3 niet het spelletje is, uitknippen en opslaan als PHP-fragmenten.

=======
4. Toch <iframe>-werk
En wat ook nog kan: toch gebruik maken van de iframe-mogelijkheden (hoewel dit wordt afgeraden, zie Alles over frames).
Maar dan doe je het op de omgekeerde manier, net zoals in nummertje 3: het worden allemaal losse pagina's, het spelletje zit telkens op de pagina zelf, en de rest in een (1 of meer) <iframe>('s).
Zo hoef je "de rest" ook maar één keer aan te maken, en verschijnt die op alle 500 vervolg-pagina's met een bepaald spel vanzelf.

=======
Als ik zelf zou moeten kiezen, zou ik nummer 3 nemen. Die werkt altijd voor alle bezoekers. :)

Met vriendelijke groet,
CSShunter
 
O, ik zie dat het een kruispost is geworden: terwijl ik bezig was heeft intussen gast0187 ook suggesties gedaan.
Zal zo even kijken wat zijn oplossing is.

Met vriendelijke groet,
CSShunter
 
@gast0187
Aha:
het zou dit moeten zijn. (Alle code is getest) :d
Dit zie ik inderdaad kloppen als het spelletje altijd angrybird is.
Maar wat zet je dan in het rijtje links op Pagina 1, die nu allemaal <a href="Gameframe.html" target="_blank">link</a> heten? ;)
Dat gaat niet lukken: dan zouden het toch allemaal verschillende Pagina's 2 moeten worden (en dan heb je ook geen aparte Pagina's 3 nodig).

=======
... kan hij nog altijd kiezen voor welke oplossing hij gaat
dafje95 zou ook een "zij" kunnen zijn. :)

=======
Ik zie nog wel een andere mogelijkheid.

5. Een Dreamweaver-template
  • Dit gaat alleen als je Dreamweaver als html-editor hebt.
Dan maak je ook allemaal verschillende pagina's aan, maar wat hetzelfde moet blijven haal je binnen met een Dreamweaver-template (een .dwt-bestand, waar de codes van de rest in zitten). Dan hoef je ook niet steeds de kop, het menu, enz. op elke pagina in te plakken; dat maak je 1 keer, en dan plakt DW het er in. In de "editable region" zet je dan steeds de verwijzing naar het bepaalde spel op die pagina.



Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
@gast0187 , wat jij doet staat vast, je opent gewoon Gameframe.html en daarmee is het klaar. In gameframe.html moet dan een vast iets staan. Wat ik wil is dat je op de hoofdpagina op een van de links kan klikken en dat per link het iframe in de 2e pagina anders word gevuld, dus druk je bijvoorbeeld op het spelletje Toren Verdedigen, dan komt er in het iframe dat spel, maar wil je een ander spel dan kan dat niet, volgens jou code, omdat daarin niet aangegeven word bij de links op de hoofdpagina wat er in het iframe moet komen te staan.

@csshunter , heb je van die eerste oplossing met javascript ook een code, ik ben nogal een beginner in javascript, dus zou je dit even kunnen maken? Als ik het goed begrijp leest de link dus wat er achter de # staat en pakt dan vervolgens de pagina die die naam heeft in de map met alle games. Indien je dit wil/kan doen, hier is de structuur van mijn site zodat je het script daar een beetje op kan aanpassen:
de hoofdpagina is Index.html en staat gewoon in de bovenste map. Dan heb je een map Games, waar het "Gameframe" in staan. En in die map heb je nog een map Games, waar elk spel in een htmlpagina staat. Dus:

Site/Index.html (Hoofdpagina waar je een spel kiest)
Site/Games/Gameframe.html (Pagina met het frame waar het spel in komt)
Site/Games/Games/Meppen.html (Spel)
 
@dafje95:
Voordat ik met een volgende vraag kom, zeg ik altijd eerst even dankjewel voor de antwoorden :),
zeker als mensen de moeite hebben genomen om een testpagina te maken en/of een antwoord te geven van langer dan 1,5 zin.
En in plaats van iemand te vragen een script voor je te bakken, kan je ook een Google-visje uitwerpen. ;)



Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
@gast0187 , Bedankt voor je uitleg, maar het was juist mijn doel om iets te vinden dat de content van het iframe aanpast op de tweede pagina. Het maken en linken naar een iframe kon ik ook al, maar het linken naar een target op een andere pagina moest ik weten. Toch bedankt voor alle moeite!

@csshunter , Ik zal eens gaan googlen en iets gaan proberen met javascript, van zelf doen leer je het meeste he :P Ook jij bedankt voor de informatie.
 
Karawatsjie! :)
Nu kom ik toch opeens op een ander idee. Dat ik daar toch niet eerder op gekomen was!

6. Met javascript: Pagina 2 overslaan!
Dat kan als volgt:
  1. Op de overzichtspagina met alle links zet je óók alle onderdelen die in je Pagina 2 moeten komen, inclusief het iframe.
  2. Maar met css maak je die onzichtbaar.
  3. De links naar de spelletjes gaan niet naar een pagina, maar hebben een onclick="showSpel(01)", onclick="showSpel(02)", enz.
  4. De functie showSpel(n){...} doet het volgende:
    (a) de onderdelen van de gewone pagina (het linken-overzicht) worden uitgeschakeld (= via een style-eigenschap met javascript onzichtbaar gemaakt),
    (b) de onderdelen van de "Pagina 2" (met het iframe) worden zichtbaar gemaakt, en
    (c) de Pagina 3 van het juiste spel (nummer "n") wordt in het iframe gezet.
  5. Je kunt op je "Pagina 2" gedeelte ook een knop zetten met een functie onclick="showAll()", die het "Pagina 2"-deel weer uitzet en terugschakelt naar het zichtbaar maken van het linken-overzicht: want je zit nog steeds op dezelfde pagina!

7. Met javascript: alles op één pagina!
Maar ook alle losse Pagina's 3 kunnen gemist worden.
  1. Eerst doe je alles van nummer 6 hierboven
  2. Vervolgens zet je wat in het <iframe> zou moeten komen ook als gewone code op Pagina 1, en maakt dat ook weer onzichtbaar met css.
  3. Het script hoeft dan niet een iframe te openen met een aparte pagina voor elk spel, maar stopt gewoon het juiste spel in een <div id="spelcontainer">.
  4. Klaar! Naast 1 pagina heb je dus alleen maar een vergaarbak waar alle spelletjes in zitten, en geen enkele extra pagina. :)

=======

Een voorbeeld hoe je zoiets met javascript in elkaar kunt zetten staat hier: bliksekaters.nl/subs/galery


  • Dit is een verzamelpagina met allerlei foto's in plaats van spelletjes.
  • Bij een klik op een foto wordt (a) de gewone pagina uitgezet, en (b) een <div id="bigBox"> ingeschakeld.
  • In de #bigBox-container wordt (c) de opgevraagde grote foto (=het spelletje) geplaatst.
  • Je zit nog steeds op dezelfde pagina (de URL in de adresbalk verandert niet): met een klik op de grote foto ben je weer terug.
  • De grote foto's (lees: spelletjes) worden alléén opgevraagd (=gedownload) als je op een link klikt.
  • De pagina is dus beresnel, want niet alle grote foto's (=spelletjes) hoeven eerst gedownload te worden: het gaat per vergroting (spelletje).
  • Uitleg staat op de pagina en in de broncode's. :)

En kom je er niet uit, dan kan je je altijd hier weer melden!

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan