Ergebnis 1 bis 10 von 10
  1. #1
    th_wolfgang ist offline Routinier
    registriert
    06-01-2014
    Beiträge
    323

    window.ScrollToTop + iFrame

    Hallo,
    habe da seit geraumer Zeit das Problem. Das in einer (meiner) Seiten ein iFrame steckt… (liegt auf dem gleichen Server/URL). Die Parent-Page, welche das iFrame enthält konnte sich „sauber“ anpassen, das sämtliche Links, welche auf den Inhalt des iFrames abzielen, dann an der Stelle aufgerifen wurden, wo das iFarem beginnt… (unter dem Slider etc.)
    Die Links, welche ich im iFrame aufgerufen habe, scrollten automatisch ans Ende der kompletten Parent-Seite. Nach vielen Codeschnipseln, welche alle nicht zum Erfolg führten, habe ich jetzt eine gefunden…


    Within the Iframe page.

    window.parent.ScrollToTop(); // Scroll to top function

    On The parrent page:

    window.ScrollToTop = function(){
    $('html,body', window.document).animate({
    scrollTop: '0px'
    }, 'fast');
    };
    Das funktioniert! Allerdings alle Links, auch die vom Parent, offen jetzt ganz oben über dem Slider der Page. Mein iFrame hat einen Namen und id (id="pagemobile" name="pagemobile") wie kann ich den Codeschnipsel anpassen, das egal ob Links vom Frame oder im Parent "gekickt" werden, jeder Link unter dem Slider id="pagemobile" aufmacht und nicht an den Anfang „rumpelt“.
    PS: funktionierte nicht jeder Code, den man üblicherweise nutzt zum Erfolg, mein iFrame steckt in einem Code, welches die Höhe der einzelnen Unterseiten berechnet.

    Danke & LG Wolf

    - - - Aktualisiert - - -

    ...Hatte bereits versucht, die 0px mit #pagemobile zu bestücken… geht leider nicht.
    Geändert von th_wolfgang (18-04-2017 um 16:57 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.447

    AW: window.ScrollToTop + iFrame

    Zitat Zitat von th_wolfgang Beitrag anzeigen
    habe da seit geraumer Zeit das Problem. Das in einer (meiner) Seiten ein iFrame steckt…
    Das ist wirklich ein Problem, das du dringend angehen solltest...

    Wenn dein iFrame eine ID hat, sollte es eigentlich auch reichen, wenn du einfach den Hash-Teil der Parent-URL auf "#pagemobile" setzt. Normalerweise musst du da nicht mit irgendwelchen scroll-Positionen rumdoktoren.

  3. #3
    th_wolfgang ist offline Routinier
    registriert
    06-01-2014
    Beiträge
    323

    AW: window.ScrollToTop + iFrame

    Dank Dir!

    Allerdings habe ich bereits „sehr viel rumgedoktert“…
    Der iFrame ist mit dem: https://github.com/davidjbradshaw/iframe-resizer (nested) eingebunden um Interseiten der verschiedenen länge nach anzuzeigen. Das funzt!
    Im Parrent, habe ich alle links mit einer onclick="location.href='#pagemobile'" versehen. Die machen dann auch da „auf“, wo sie sollen, bei pagemobile. Weiteres Script:

    <script type="text/javascript">
    $(document).ready(function(){
    $('a', 'li').attr('target', 'pagemobile');
    });
    </script>
    Mit dem geht alles „aus auf dem Parant“ angeklickt wird. Direkte Links im iFrame-Feld aufzurufen marschieren ans komplette Ende der Seite, oder auch mal in die Mitte… dieser!
    Habe jetzt bereits:

    dem iFarme ein Attribut „migegeben“:

    onload="window.parent.parent.scrollTo(0,0)"
    und dies versucht:

    <script type='text/javascript'>
    var self = this;

    $(document).on('ready', function() {
    $("#pagemobile").on('load', function() {
    self.scrollTo(0,0);
    });
    });

    </script>
    ...mit den Spielereien, machen "ALLE" Links, on aus Parent oder iFrame nur noch am Seitenanfang auf.

    nicht sehr toll,

    Danke & LG
    Wolf

    - - - Aktualisiert - - -

    Hallo,
    Bitte seit so nett und helft mir ein wenig mit den Parametern…. Jetzt habe ich es so, das „ALLES“, jeder Link ob Parent oder Child nach oben „dampft“ an den Anfang der Site. Ich wollte eigentlich lediglich erreichen, dass das Child-Content bzw. derer Links sich auch an eine bestimmte Position (ID / Div) im Parent begeben. Komm nicht weiter, bitte um Hilfestellung. Die Parent an sich, ohne meine heutige „Spielerei“ macht dies… Ich hatte vor kurzem eine Augen OP und sitz jetzt wieder wegen der Geschichte 16 Stunden vor der Kiste….

    Danke & LG
    Wolf

  4. #4
    th_wolfgang ist offline Routinier
    registriert
    06-01-2014
    Beiträge
    323

    AW: window.ScrollToTop + iFrame

    Hallo,

    hmmm leider glaube ich kaum so noch einen Blumentopf zu gewinnen.... aufgrund der Vielzahl an antworten, scheint Ihr auch Ratlos zu sein.

    LG & Danke Wolf

  5. #5
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.398

    AW: window.ScrollToTop + iFrame

    welche frage hast du denn?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.447

    AW: window.ScrollToTop + iFrame

    Anstatt dem .scrollTo(...) musst du dort auch ein .location.href='#pagemobile' machen.

  7. #7
    th_wolfgang ist offline Routinier
    registriert
    06-01-2014
    Beiträge
    323

    AW: window.ScrollToTop + iFrame

    Hallo,
    dank dir!
    Ist dies dann so richtig? In den zu ladenden iFrame eingebaut…. Da es nicht funktioniert, was mich wundert.

    <script type='text/javascript'>
    var self = this;

    $(document).on('ready', function() {
    $("#pagemobile").on('load', function() {
    self.location.href='#pagemobile';
    });
    });
    </script>
    LG & Danke Wolf

    - - - Aktualisiert - - -

    NACHTRAG:

    Ich glaube das hier ein Fehler des iFrame – Codes vorliegt, welcher alles aus dem iFrame der Höhe neu anpasst. Unterordner etc. Bin im Netzt auf verschiedene Seiten gestoßen, wo das Thema angesprochen wurden ist, das dies „Progy“ funktioniert aber mit den Links Probleme hat… Leider hatte hier noch keiner eine Lösung. (iframeresizer). Der macht die Links vom iFrame auf, wo er will, die Position schwankt von mittig in der Seite bis zum untersten Rand.
    Was funktioniert ist, wenn ich dem iFrame ein onload mitgebe:

    onload="$('html,body', window.parent.document).animate({ scrollTop: $('#pagemobile', window.parent.document).offset().top }, 6300)"
    Wie bitte würde ich den onload-Code anpassen müssen, wenn dieser nicht Scrollto sondern einfach nur als Art des Skriptes oben „goto“ Div funktionieren soll.

    onload="$('html,body', window.parent.document)({ self.location: $('#pagemobile', window.parent.document).offset().top },)"
    Glaube nicht, dass dies so stimmt, geht leider auch nicht. Kann mir hier bitte diesen onload berichtigen, ich will nicht Scrollen.. ICH möchte gern, den onload dem iFrame mitgeben, dass Links welche innerhalb des iFrame „geklickt“ werden, am DIV „#pagemobile“ öffnen. Danke

    NACHTRAG:

    DAS FUNKTIONIERT LEIDER AUCH NICHT:

    onload="$('html,body', window.parent.document.getElementById('#pagemobile');"
    verstehe langsam gar nix mehr... :/

    oder:

    <iframe id="pagemobile" name="pagemobile" src="/index.php" width="100%" scrolling="no"
    onload="window.parent.document.getElementById("#pagemobile");" ></iframe>

    LG & Danke Wolf
    Geändert von th_wolfgang (25-04-2017 um 15:16 Uhr)

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.447

    AW: window.ScrollToTop + iFrame

    Zitat Zitat von th_wolfgang Beitrag anzeigen
    self.location.href='#pagemobile';
    Nicht self, sondern window.parent.parent, wenn du den Stil von oben beibehalten willst. Ich persönlich würde eigentlich top nehmen.

    Zitat Zitat von th_wolfgang Beitrag anzeigen
    Glaube nicht, dass dies so stimmt
    Ich auch nicht - v.A. da es Syntaxfehler enthält.

  9. #9
    th_wolfgang ist offline Routinier
    registriert
    06-01-2014
    Beiträge
    323

    AW: window.ScrollToTop + iFrame

    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…

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.447

    AW: window.ScrollToTop + iFrame

    Kannst du uns nicht einmal einen Link geben, wo wir uns das Problem live ansehen können? Mit Schritt-für-Schritt-Anleitung und entsprechenden Verhalten, das du gerne hättest. Ich habe so langsam ein bisschen den Überblick verloren.

    Mein Verdacht ist, dass dein Problem nur durch die Verwendung des iFrames erzeugt wird und erst einmal nichts mit irgendwelchen Skripten zu tun hat.

Ähnliche Themen

  1. window.open() ersetzen durch IFrame/DIV
    Von lemm im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 22-10-2009, 20:04
  2. Statt window.open - iframe verwenden
    Von Thaker im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 18-07-2008, 16:54
  3. Antworten: 6
    Letzter Beitrag: 27-10-2006, 20:23
  4. window.open window.opener
    Von michl4ever im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 29-06-2006, 11:15
  5. Antworten: 0
    Letzter Beitrag: 09-10-2001, 16:59

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •