Likes: 
Automatische hoogte iFrame Crossdomain
Hallo,
Ik heb een probleem. Ik wil dat mijn leden de mogelijkheid hebben om een deel van mijn website in hun website te plaatsen via een iFrame. Ik ben meer dan een week bezig geweest een fatsoenlijk javascript hiervoor te vinden.
Nu heb ik via deze link een oplossing gevonden.... ten minste... een halve.
PROBLEEM:
Het script, voor zover ik dit kan inschatten, werkt in eerste instantie correct. Maar als ik in de iframe op een link klikt, komt deze pagina 1 seconde tevoorschijn om vervolgens 'ge-refreshed' te worden naar de vorige pagina. Ik heb op het originele forum al een bericht geprobeerd te plaatsen maar ze reageren niet..... (Ik ben geen ster in Javascript. Toch heb ik er 2 foutjes uit kunnen halen.)
Wie kan me helpen ??? Hieronder het script:
Mijn leden plaatsen de volgende code op hun website:
Pagina op mijn server die wordt geladen in de iframe van mijn leden:PHP Code:<script language="JavaScript" type="text/javascript">
var FrameManager=
{
currentFrameId:'',
// ---------------------------------------------------
currentFrameHeight:0,
// ---------------------------------------------------
lastFrameId:'',
// ---------------------------------------------------
lastFrameHeight:0,
// ---------------------------------------------------
resizeTimerId:0,
// ---------------------------------------------------
init:function(){if(FrameManager.resizeTimerId==0)FrameManager.resizeTimerId=window.setInterval(FrameManager.resizeFrames,200)},
// ---------------------------------------------------
resizeFrames:function()
{
FrameManager.retrieveFrameIdAndHeight();
if((FrameManager.currentFrameId!=FrameManager.lastFrameId)||(FrameManager.currentFrameHeight!=FrameManager.lastFrameHeight))
{
var iframe=document.getElementById(FrameManager.currentFrameId.toString());
if(iframe==null)return;
iframe.style.height=FrameManager.currentFrameHeight.toString()+"px";
FrameManager.lastFrameId=FrameManager.currentFrameId;
FrameManager.lastFrameHeight=FrameManager.currentFrameHeight;
window.location.hash='';
}
},
// --------------------------------------------------- retrieveFrameIdAndHeight:function()
{
if(window.location.hash.length==0)return;
var hashValue=window.location.hash.substring(1);
if((hashValue==null)||(hashValue.length==0))return;
var pairs=hashValue.split('&');
if((pairs!=null)&&(pairs.length>0))
{
for(var i=0;i<pairs.length;i++)
{
var pair=pairs[i].split('=');
if((pair!=null)&&(pair.length>0))
{
if(pair[0]=='frameId')
{
if((pair[1]!=null)&&(pair[1].length>0))FrameManager.currentFrameId=pair[1];
}
else if(pair[0]=='height')
{
var height=parseInt(pair[1]);
if(!isNaN(height))FrameManager.currentFrameHeight=height;
}
}
}
}
},
// ---------------------------------------------------
registerFrame:function(frame)
{
var currentLocation=location.href;
var hashIndex=currentLocation.indexOf('#');
if(hashIndex>-1)currentLocation=currentLocation.substring(0,hashIndex);
if(currentLocation)currentLocation='#'+currentLocation;
frame.contentWindow.location=frame.src+'?frameId='+frame.id+currentLocation;
}
};
window.setTimeout(FrameManager.init,100);
</script>
<iframe id="ifrSample1" scrolling="no" frameborder="0" src="http://mijn.subadres.xx/"
style="margin:0px;width:100%;" onload="FrameManager.registerFrame(this)">
Iframes not supported.</iframe>
PHP Code:<script type="text/javascript">
function publishHeight()
{
if(window.location.hash.length==0)return;
var frameId=getFrameId();
if(frameId=='')return;
var actualHeight=getBodyHeight();
var currentHeight=getViewPortHeight();
if(Math.abs(actualHeight-currentHeight)>15)
{
var hostUrl=window.location.hash.substring(1);
hostUrl+='#';
hostUrl+='frameId='+frameId;
hostUrl+='&';
hostUrl+='height='+actualHeight.toString();
window.top.location=hostUrl;
}
}
function getFrameId()
{
var qs=parseQueryString(window.location.href);
var frameId=qs['frameId'];
var hashIndex=frameId.indexOf('#');
if(hashIndex>-1)frameId=frameId.substring(0,hashIndex);
return frameId;
}
function getBodyHeight()
{
var height;
var scrollHeight;
var offsetHeight;
if(document.height)
{
height=document.height;
}
else if(document.body)
{
if(document.body.scrollHeight)height=scrollHeight=document.body.scrollHeight;
if(document.body.offsetHeight)height=offsetHeight=document.body.offsetHeight;
if(scrollHeight && offsetHeight)height=Math.max(scrollHeight,offsetHeight);
}
return height;
}
function getViewPortHeight()
{
var height=0;
if(window.innerHeight)height=window.innerHeight-18;
else if((document.documentElement) && (document.documentElement.clientHeight))height=document.documentElement.clientHeight;
else if((document.body) && (document.body.clientHeight))height=document.body.clientHeight;
return height;
}
function parseQueryString(url)
{
url=url.split('#');
url=new String(url[0]);
var queryStringValues=new Object();
var querystring=url.substring((url.indexOf('?')+1),url.length);
var querystringSplit=querystring.split('&');
for(i=0;i<querystringSplit.length;i++)
{
var pair=querystringSplit[i].split('=');
var name=pair[0];
var value=pair[1];
queryStringValues[name]=value;
}
return queryStringValues;
}
// -------------------------------
window.onload=function(event){window.setInterval(publishHeight,100)}
</script>
verdere inhoud..... bla bla bla bla bla
Quote
