Door
ben lubben
op 07-01-2013 13:04
gewijzigd op 07-01-2013 13:04
3.004 views
hallo mensen,
ik loop nu tegen een probleem aan.
ik heb een simpel menutje die telkens een pagina opent in een iframe.
nu wil ik van die iframe af en er iets moderners neer zetten zodat het ook op mobiel enz normaal werkt ben ik opzoek naar iets anders.
op google vind ik van alles; jquery, javascript, ajax enz.
maar nergens vind ik een duidelijk voorbeeld of tutorial hiervan.
mijn menu ziet er nu zo uit.
Ik toon je Ajax, met jQuery.
(Ajax maakt standaard deel uit van javascript; jQuery geeft je een gebruiksvriendelijke manier om met javascript om te gaan...)
Je moet wel wat anders gaan redeneren. De inhoud van een iframe is een volwaardig HTML document. Dus met <!doctype>, het <html>, <body>, ... heel de reutemeteut.
Wanneer je Ajax gebruikt, is dat niet de bedoeling. In de documenten, zoals
"views/pages/vnc/index.php" moet je die opmaak verwijderen en enkel het deel tonen dat je echt wil tonen.
Probeer dan dit eens
<style>
#valse_iframe {
width: 400px;
height: 400px;
border: 1px solid #000000;
}
</style>
<div id="menu">
<ul>
<li><a href="views/pages/" title="Home">Home</a></li>
<li><a href="views/pages/vnc/" title="vnc viewer">vnc viewer</a></li>
<li><a href="views/pages/stage/" title="stage">stage</a></li>
<li><a href="views/pages/editor/" title="filemanager">filemanager</a></li>
<li><a href="views/pages/brains/" title="brains">brains</a></li>
</ul>
</div>
<div id="valse_iframe"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() { // wordt uitgevoerd wanneer de pagina klaar is met laden
// we cachen de HTML elementen. Hie dus de <a> elementen.
var menu_links = $('#menu a'); // zoals met css. $('#menu ul li a'); kon ook
var valse_iframe = $('#valse_iframe');
// we gaan de click op de links van de menu kapen. We houden de normale werking tegen en doen er mee wat we willen.
menu_links.click(function(e) {
// e geeft informatie over de muisclick. We beginnen met die z'n werking te stoppen
e.preventDefault();
// "this" is hier het aangesproken element. Dus, wanneer de gebruiker op de tweede link klikt, wordt this gelijk aan die tweede link.
var link = $(this).attr('href');
// Ajax request starten
$.ajax({
url: link,
success: function(data) { // zal worden uitgevoerd wanneer de server succesvol terug is met de data die je nodig hebt
// data is het bericht van de server
valse_iframe.html(data); // steek data als innerHTML van element <div id="valse_iframe">
},
error: function(error) { // de pagina wordt niet gevonden. bv. 404 error.
valse_iframe.html('oops, foutje'); //ofwel iets nuttiger ...
}
});
});
});
</script>
bedankt,
ik heb dit getest in een nieuw bestandje maar er was geen pagina die correct word geladen.
ik heb ze nog gecontrolleerd op de opmaak maar hier zit het ook niet in.
ik denk dat het komt omdat alles gecashed word en daarna pas word vertoond.
ik heb bijvoorbeeld ene vnc viewer erin zitten van tightvnc. die gaat al onderuit.
ik zou wel kunnen leven met een iframe maar het is wel minder werkbaar. ook omdat als ik een dropdown menu wil gebruiken dit niet goed samen werkt met de iframe, de iframe pakt de muis over van het menu waardoor hij weer automatisch inklapt.
Zolang je aan het testen bent: pas wat op met relatieve adressen.
Begin eens met die pagina's in simpele .php files te zetten, bv.
<a href="viewer.php">Viewer</a>
viewer.php op de zelfde plaats als index.php.
Bij iframes moet je denken vanuit het perspectief van het document van de iframe; vooral dan het pad van het document; waardoor je soms dingen als src="../../pagina.php" hebt (bv. ook lastig om css files te laden).
Dit zal je niet meer nodig hebben.
Met deze technieken gebeurt alles vanuit het perspectief van index.php
Dan kan je dit dus losstaand testen, in een test mapje.
Daarna kan je zien wat nodig is om alles in jouw structuur te zetten.
ik heb er nu 2 uur lang ongeveer mee zitten prutsen en krijg het half werkend.
dit zou wel de oplossing moeten zijn en zal het er in gaan bouwen. het zal een hoop werk kosten want kan ongeveer alle code opnieuw schijven maar dat hoort erbij.
@kris peeters, super bedankt voor je snelle hulp. je bent geweldig.
met vriendelijke groet,
ben
[size=xsmall]Toevoeging op 08/01/2013 12:13:10:[/size]
hallo mensen,
ik heb weer even zitten prutsen er mee maar ik krijg het niet voor elkaar om een externe site te kunnen inladen. dus bij bijvoorbeeld nu.nl krijg ik "oops, foutje" in het scherm.
is er niet een (makkelijke) manier dat het ook met html tags wil( dus <html><body> enz) ?
