Ik heb een scriptje gemaakt om zoals facebook content in een iFrame in te laden en zo te displayen in een div om een pagina reload te vermijden.
Dit werkt, maar de history is vrij om zeep.
Het probleem doet zich voort in mijn processhash-functie.
Als de oproep naar loadPage in commentaar staat dan lijkt de history wel goed te zitten, uiteraard moet ik deze functie wel oproepen om mijn pagina te laden.
Dit is het script:
Code:
<html>
<head>
<script type="text/javascript">
function processHash(){
//https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
var hash = window.location.hash;
var urlAfterHash = hash.substring(1);
if(urlAfterHash.length > 0){
//loadPage(urlAfterHash);
}
}
function loadDone()
{
var myiframe = document.getElementById("myIFrame");
if(document.getElementById("myIFrame").src)
{
if (myiframe.contentDocument)
{
//firefox
myiframe = (myiframe.contentDocument);
}
else if (myiframe.contentWindow)
{
//IE
myiframe = (myiframe.contentWindow);
}
if(myiframe.document)
{
myiframe = (myiframe.document);
}
set(myiframe.getElementById("content"));
}
}
function set(s)
{
var placeHolder = document.getElementById("placeHolder");
placeHolder.innerHTML= s.innerHTML;
}
function loadPage(url)
{
var placeHolder = document.getElementById("placeHolder");
placeHolder.innerHTML = "<strong>Loading...</strong>";
document.getElementById("myIFrame").src = url;
}
</script>
<body onhashchange="processHash();">
<script type="text/javascript">
//Please go to next code block for java script functions
</script>
<iframe id="myIFrame" width=300 height=300 style="width:0px;height:0px;border:0px;" onload = "loadDone();">
</iframe>
<div id="placeHolder"></div>
<script type="text/javascript">
loadPage("a.html");
</script>
<a href="#b.html">bbbbbb</a> <a href="#c.html">cccccc</a>
</body>
</html>
Iemand enig idee of ik iets over het hoofd zie? Of moet ik het history object zelf gaan manipuleren?