In eingebundener html datei haput-html-datei aufrufen?

etibar

Hallo Zusammen,
ich habe eine Frage und zwar: ich will, dass es auf meiner seite wenn man auf ein bild klickt, dass die seite nach unten scrollt. das geht ja leicht mit javascript.
Mein problem liegt daran, dass ich eine seite index genommen hab (wegen musik) in diese seite Index2 eingebunden hab, wo alles drin steht. Deswegen funktioniert das scrollen nicht, da wenn man sich in der seite z.b. index2/bilder.html befindet wird es versucht bilder.html zu scrollen aber da meine index2 in index eingubunden ist.

Wie kann man es machen, dass man von dieser eingebundenen seite auf hauptseite zugreifen kann bzw. steuern oder ist diese unmöglich?

Danke im Voraus!

synaptic

mit ajax, du lädst den inhalt nach und in der callback-methode rufste das scrolling zu ner bestimmten position auf

ps: habs mal verschoben

http://f-h.kaninchenrettung.de/file-listing/frame-action/ da siehste wie das mit nem workaround geht, wenn kein du keine ahnung von ajax hast.
ansonsten schau mal in die doku von jquery nach "load"
das scrolling gibbet hier nich^^

Unregistriert

Leider hilft mir es nicht weiter.
Vielleicht hat jemand ein paar andere ideen?

Danke.

synaptic

was hilft dir da denn nicht weiter? wo ist dein problem?
du zeigst keinen code, keinen link und hier wird dir niemand sonst nen anderen tip geben können.. verzichte auf musik, öffne sie in nem popup oder besorg dir jquery und lad die inhalte mit ajax nach, so dass deine index-seite bestehen bleibt und wieter musik spielt...

alternativ kannst du 8was übrigens in meinem lik auch gezeigt wird) mit parent.document.getElementByID() auf ein DOM-Element der index1 zugreifen und dort rumhantieren und manipulieren.. jedoch ist die variante mit ajax wesentlich sauberer und du brauchst keinen iframe (der im beispiel von mir is übrigens unsichtbar, falls es nicht aufgefallen is)

Unregistriert

danke, ich versuchs noch mal

idex.html
<html><head>[..........]
<div id="iframe_1"><object type="text/html" data="index2.html" height="4000" width="1277" border="0"></div>
[.........]
</html>

index1.html
<html>
[......]
script language="javascript">

function runter(zahl) {

window.scroll(0,zahl); // horizontal and vertical scroll
}
</script>
<img src="Kalender/woche1.png" onClick="runter(300)"/>
[.....]
</html>

meine methode runter() auf image-klick idex2 zu scrollen, aber ich will, dass index1 gescrollt wird.

Hoffe meine frage ist jetzt verständlich.?
wollte nicht unfreundlich rüberkommen!
Danke noch mal!

synaptic

ich muss gestehen, dass ich bisher nie so ein konstrukt gesehen hab (bei über 8 jahren clientseitiger front-end-erfahrung)
ich würde es auf diese art und weise machen:

http://f-h.kaninchenrettung.de/file-listing/scrollfaxe/

die index2 und index3 bekommen nur den inhalt, der geladen werden soll..
und hier der code von index.html:

HTML

<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


  <style type="text/css">
  #wrapper{
  width:950px;
  margin:0 auto;
  border:1px solid black;
  overflow:hidden;
  padding:40px;
  }
  #navi{
  width:130px;
  float:left;
  border:1px solid green;
  position:fixed;
  top:50px;
  }
  #content{
  width:700px;
  float:right;
  border:1px solid red;
  }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script type="text/javascript">
    $(document).ready(
        function(){
            getContent();
    });
    function runter(zahl) {
        window.scroll(0,zahl); // horizontal and vertical scroll
    }
    function getContent(){
        $('a').each(function(){
            var aktLink = $(this);
            var position = aktLink.attr('rel');
            if(position==''){
                position = 0;
            }
            aktLink.click(function(){
                $('#content').load(aktLink.attr('href'));
                alert('so, jetzt wird gescrollt bis: '+ position +' :o)');
                runter(position);
                return false;
            });
        });


    }
  </script>
</head>
<body>
 
<div id="wrapper">
<div id="navi">
<ul>
<li><a href="index2.html" rel="100">link1</a></li>
<li><a href="index3.html" rel="1000">link2</a></li>


</ul>
<div id="mp3player">
<object width="130" height="105">
<param name="movie" value="mp3player.swf">
<param name="quality" value="high">
<embed src="mp3player.swf" quality="high" width="130" height="105"></embed>
</object>
</div> 
</div>
<div id="content">
hier steht jetzt rudimentärer content drin...
<br />
bla
<br />
</div>




</div>


</body>
</html>

Alles anzeigen

geht bestimmt auch noh sauberer und evtl auch ne ecke schlanker, aber für deine zwecke wirds wohl reichen
zur erklärung:

du besorgst dir jquery, das is ne super javascript-bibliothek, damit sind ajax-requests ganz einfach zu schreiben.
dann hälste dir deine funktion vor (hab da jetzt nich geguckt, was jquery sonst zu bieten hätte, denn dein einzeiler reicht ja völlig)
hab die funktion getcontent auch mal in eine eigene funktion ausgelagert, wegen des überblicks, hätte des auch direkt in den document.ready()-aufruf packen können.

also $(document).ready(); prüft, ob die seite geladen ist, damit alle DOM-Elemente vorhanden sind wenn man sie manipulieren möchte.
sobald also die seite fertig geladen hat wird die funktion getContent(); aktiv.

diese funktion macht nichts anderes, als sich durch $('a').each(); eine liste(genauer ein array) anzufertigen, in der(dem) alle links der seite zu finden sind.
durch die funktion each() geht man quasi in einer Schleife durch das array und hat mit $(this) immer den bezug auf das aktuelle Element.
die Links selber haben ein relation-atribut, in dem kann man prima angeben wohin die seite dann scrollen soll, denn es ist ein valides attribut
über rel holt sich das script also vom aktuellen link die scrollposition, sollte in rel nichts drinstehen ist der wert ein leerer string und wird vom script auf 0 gesetzt, damit kein fehler entsteht.

anschliessend bekommt der link eine funktion zugeweisen, nämlich click(); das entspricht dem onclick-attribut (was wir bei jquery nicht mehr brauchen)

in diesem click() definieren wir eine anonyme funktion die nichts anderes macht, als den ajax-aufruf "load();" von jquery zu benutzen, um in das div mit der ID content den inhalt von index2 und index3 zu laden. dieser inhalt wird ganz normal über das href-attribut vorgehalten.

die zeile mit dem alert() kannste dann getrost entfernen, die is nur dafür gedacht dass dir gezeigt wird wohin die sau dann scrollt.

joa jetzt wird nur noch deine runter-funktion aufgerufen und fleißig gescrollt...^^

wenn man das ganze jetzt kompakter gestalten will geht das alles auch in einem abwasch:

Code

$(document).ready(
        function(){
            $('a').each(function(){
                var aktLink = $(this);
                var position = aktLink.attr('rel');
                if(position == '' || position == 'undefined'){
                    position = 0;
                }
                aktLink.click(function(){
                    $('#content').load(aktLink.attr('href'));
                    alert('so, jetzt wird gescrollt bis: '+ position +' :o)');
                    window.scroll(0,position);
                    return false;
                });
            });
    });

Alles anzeigen

hab übrigens den ellenlangen beispiel-content aus der index-seite hier gekürzt.. nich dass du dich wunderst.

Unregistriert

Vielen Dank, ich werd es heut versuchen auszuprobieren!

Pion

Mit dem Schlüsselwort "top" kannst du einfach auf alles von der index.html zugreifen...

Pack einfach die "runter" Function in dein index.html und greife mit top.runter() drauf zu im onclick

Bzw kannst auch einfach in der Funktion top.window.scroll verwenden

mfg

In eingebundener html datei haput-html-datei aufrufen?

Tags

Benutzer online in diesem Thema