Hallo,
leider waren alle Bemühungen, auch durch deine nette Hilfe, nicht von Erfolg gekrönt.
Einfach noch einmal eine kurze Zusammenfassung: (wird viel….hoffe das liest jemand)
Ich habe eine Template-Page, (Parent-Page) in diese ich eine 2. (iFrame-Page) durch den Iframeresizer (
https://github.com/davidjbradshaw/iframe-resizer) eingebunden habe. Dieser bewirkt, das sich im iFrame zu öffnende Links automatisch der Höhe her anpassen. Das geht auch soweit.
PROBLEM:
In der Page 1 (Parent) wo der iFrame eingebettet ist, sind alle Links mit einer Funktion
<a onclick="location.href='#pagemobile'" href="
versehen (iFrame-name und ID -> pagemobile), so das Links aus dem iFrame heraus, am iFramebeginn id=“ pagemobile„ sauber öffnen. (Davor befindet sich ein Menu und Slider auf der Parentseite…). ABER wenn ich direkt Links im iFrame anklicke, öffnet sich zwar der Link darin, aber an unmöglichen Positionen. Mal fährt die Seite komplett zum Seitenende, mal bleibt Sie mittig stehen, unmöglich einen Seitenbetrachter so nicht durch ständiges Scrollen auf der Seite zu halten bzw. komplett zu verunsichern. SEHR NERVIG!
Wenn ich die iFrame-Seite separat im Browser öffne, funktioniert diese, auch die Parent! Jeglicher Versuch in der iFramepage die Links anzupassen funktionierte nicht. Kleinen „Erfolg“ hatte ich nach dem ich den <body ein
onload="window.parent.parent.scrollTo(0,0)"
oder auch
onload="window.parent.parent.location.href='#pagemobile'"
„mitgegeben“ habe. Das ist zwar nicht schön, da alle Links an den obersten Rand „rumpeln“, allerdings besser als irgendwo auf der Seite „stehen zu bleiben“. Problem im iFrame befindet sich ein Shopsystem, wer da „einkaufen will“hat nach der zweiten Scrollaktion „keine List mehr!“. Auch habe ich versucht im iFrame
onload="$('html,body', window.parent.document).animate({ scrollTop: $('#pagemobile', window.parent.document).offset().top }, 6900)"
anzugeben.
Das dumme ist, nach Seitenaufbau ist mein Menu und Slider oben nicht mehr ersichtlich, wenn der onload dies zur iFrame Position (#pagemobile) nach Seitenaufbau gescrollt hat… Mit der Brechstangenmethode „onloade“ funktioniert was, leider wird dies vererbt, so das man nicht mal schnell „nir die iFrameseite“ in den Griff bekommt.
Um zu testen habe ich mir eine beliebige Template aus dem Netz gelutscht, diese lokal gestartet und mein iFrame eingebunden. ! gleiche Problem!! So gehe ich nicht davon aus, dass es an der Parentpage liegt. Das gleiche habe ich mit meinem iFrame in den Beispielseiten welche auf der Webseite des iframerersitzers versucht. Geht auch nicht. So kann es sich nur um einen Fehler des iFrame Resitzers oder ein Programmfehler meiner iFrame-Seite handeln. Ich bin die letzten zwei Tage sämtliche Scripts und css meiner iFrame-Seite durchgegangen und fand keine Fehler, welche damit zu tun hatten, habe einfach mal alles rausgeschmissen, bis auf das „Content“ an sich…. Funktionierte auch nicht. Daher denke ich entweder habe ich eine Einstellung im Resitzer falsch oder übersehen.
Momentan in der chield-iFrame-Page:
Code:
<script type="text/javascript" src="/js/iframeResizer.contentWindow.min.js"></script>
<script type="text/javascript">
(function() {
var logging = true;
try{
function addEventListener(e,func){
if (window.addEventListener){
window.addEventListener(e,func, false);
} else if (window.attachEvent){
window.attachEvent('on'+e,func);
}
}
function log(msg){
if (logging && window.console){
console.info('[Test] '+msg);
}
}
function warn(msg){
if (window.console){
console.warn('[Test] '+msg);
}
}
function init(test){
function changeContent(){
$('p').eq(0).remove();
}
function callMethod(methodName,val1,val2){
if ('parentIFrame' in window)
window.parentIFrame[methodName](val1,val2);
else
warn('window.parentIFrame methods not enabled.')
}
console.info(test);
switch (test){
case 'changeContent':
setInterval(function(){changeContent();},2);
break;
case 'close':
callMethod('close');
break;
case 'pageChange':
location.href = '../../example/frame.hover.html';
break;
case 'nested':
location.href = 'frame.nested.html';
break;
case 'size':
changeContent();
callMethod('size');
break;
case 'autoResize':
callMethod('setAutoResize',true);
setTimeout(function(){
changeContent();
},500);
break;
case 'size100':
callMethod('size',100);
break;
case 'size200300':
callMethod('size',200,300);
break;
case 'jsTrigger':
changeContent();
callMethod('trigger');
break;
case 'chkHeight':
callMethod('sendMessage',document.body.offsetHeight);
break;
case 'chkBackground':
callMethod('sendMessage',document.body.style.background);
break;
case 'chkSendMsg':
callMethod('sendMessage','message: test string');
break;
case 'chkSendObj':
callMethod('sendMessage',{message: 'test object'});
break;
case 'chkGetId':
if ('parentIFrame' in window)
callMethod('sendMessage',window.parentIFrame.getId());
break;
case 'setHeightCalculationMethod':
if ('parentIFrame' in window){
parentIFrame.setHeightCalculationMethod('max');
callMethod('size');
}
break;
case 'width':
$('p').width(3000);
break;
case 'image':
$('p').html('<img src="djb.jpg">');
break;
}
}
window.iFrameResizer = {
messageCallback: init
}
}
catch(e){
warn(e);
}
})();
</script>
In der Parent-Page:
Code:
<!--iFrame Test-->
<div style="margin:5px; padding-bottom:10px;">
<iframe seamless id="pagemobile" name="pagemobile" src="/index.php" width="100%" scrolling="no" ></iframe>
</div>
<p id="callback">
</p>
<!--iFrame Test-->
<script type="text/javascript" src="../js/iframeResizer.js"></script>
<script type="text/javascript" src="../js/ie8.polyfils.min.js"></script>
<script type="text/javascript">
iFrameResize({
log : true, // Enable console logging
resizedCallback : function(messageData){ // Callback fn when message is received
setTimeout(function(){parentIFrame.sendMessage('nested')},50);
}
});
</script>
Beide Seiten liegen auf dem gleichen Server!
Bitte versucht mir noch einmal behilflich zu sein…
