✔ Zielgenaues Scrollen im fremden Inhalt eines iFrames

N

Netzwerkidi

Hallo,

ich suche eine Möglichkeit, in einem iFrame mit Inhalt, den ich nicht kontrollieren kann, vorzuscrollen (scrollTo, scrollBy) bzw. sonst irgendwie einen genau definierten Bereich/Startpunkt (linke obere Ecke) der fremden Seite innerhalb des iFrames anzuzeigen.

Im Test ist der iFrame 250x400 Pixel groß und soll oben links beginnend von der Seite "Bundesregierung.de" nur den Bereich "WEITERE MELDUNGEN" anzeigen.

Leider, es wird nicht vorgescrollt.

Habe es auch schon mit CSS Clip versucht, geht aber auch nicht.


Code: 
<html>
  <body>
  
  <script type="text/javascript">
  function scrollFrame() {
	var frame=document.getElementById("FrameId");
	frame.focus();
  frame.scrollTo(194,2496); // Mitte unten Bereich "WEITERE MELDUNGEN"
  }
  </script>
  
  <iframe 
    onload   ="scrollFrame();" 
    id       ="FrameId"
    name     ="FrameName"
    src      ="http://www.bundesregierung.de" 
    style    ="width:400px; height:250px;"
    scrolling="yes" 
    target   ="_self"> 
  </iframe>

  </body>
</html>

Vielleicht weiß einer, wie es geht - falls es geht.


Danke + Grüße
 
Da du CSS Clip bereits versucht hast, gehe ich davon aus, dass es nicht unbedingt "echtes" Scrollen sein musst. Das hier ist vielleicht etwas unorthodox, aber es tut.
Das blöde ist, dass die absoluten Pixel-Angaben nicht immer stimmen werden.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Beschneiden der Bundesregierung</title>
	
	<style type="text/css">
		#wrapper {
			width:400px;
			height:250px;
			overflow:hidden;
		}
		
		#frm {
			width:1000px;
			height:9999px;
			position:relative;
			left:-194px;
			top:-2550px;
		}
	</style>
</head>

<body>
	<div id="wrapper">
		<iframe id="frm" src="http://www.bundesregierung.de"></iframe>
	</div>
</body>

</html>
 
@CPoly

Danke für die fixe Rückmeldung.

Das Problem ist, dass der Iframe innerhalb eines DIV-Elements sein muss, das in Abhängigkeit von anderen Elementen aufgebaut wird.

Die Positionierung müsste irgendwie relativ zum DIV-Element sein, das wie gesagt, irgendwo rechte Seite mitte liegt in meinem Dokument.

Ich habe noch mal etwas Code beigefügt, der die Lage verdeutlichen soll: also DIV rechts, unterhalb anderer DIVs und dann in dem DIV nur den kleinen Auschnitt mit dem bereits gescrollten iFrame-Inhalt (wird jetzt im Code falsch darstellt, weil oben links beginnend auf der Bundesseite).


Grüße

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Beschneiden der Bundesregierung</title>
	
	<style type="text/css">
		#wrapper {
		  margin-top: 300px;    // Nur für Demo, folgt eigentlich unterhalb anderer DIVs
		  width: 400px;
			height:250px;
			overflow:hidden;
			float: right;         // Nur für Demo
			background-color:red; // Nur für Demo
		}
		
		#frm {
			width:1000px;
			height:9999px;
    	position:relative;
    	left:-194px;
			top:-2550px;
		}
        	
	</style>
</head>

<body>
	<div id="wrapper">
		<iframe id="___frm" src="http://www.bundesregierung.de"></iframe>
	</div>
</body>

</html>
 
Die Angaben beziehen sich immer auf das nächste Eltern Element, welches relativ oder absolut positioniert ist.
Gib dem Div mal "position:relative;", dann sollte es gehen.
 
Ups, die habe ich schlicht übersehen! Sorry, war keine böse Absicht - nur eine Zeile! Grüße
 
@CPoly - Nein, geht auch nicht, ich habe den DIV ja extra zum Test fest positioniert. Aber um den geht's ja auch nicht. Das ist ja nur die Box, die den iFrame begrenzen soll.

@spicelab - Ich bin nicht sicher, ob die "Same Origin Policy" in diesem Fall eine Rolle spielt, da ich ja nicht im Dokumentenbaum suchen will, sondern einfach nur "dumm" vorscrollen will.
 
Netzwerkidi hat gesagt.:
Ups, die habe ich schlicht übersehen! Sorry, war keine böse Absicht - nur eine Zeile! Grüße
Zum Vergrößern anklicken....
Gut zu wissen, zukünftig mind. zwei Zeilen zu verfassen, um von dir nicht übersehen zu werden :suspekt:

Netzwerkidi hat gesagt.:
@spicelab - Ich bin nicht sicher, ob die "Same Origin Policy" in diesem Fall eine Rolle spielt, da ich ja nicht im Dokumentenbaum suchen will, sondern einfach nur "dumm" vorscrollen will.
Zum Vergrößern anklicken....
Und das Scrollen zur definierten Position soll mit JS auf ein Dokument angewendet werden, das nicht aus derselben Quelle stammt, wie dein Hauptdokument, das den <iframe>-Tag beinhaltet.

Das Scrollen funktioniert mit diesem Code einwandfrei, wenn "SOP" erfüllt ist, also wenn Hauptdokument und das im iFrame zu ladende Dokument aus derselben Quelle stammen, auf dem selben Server liegen, zur selben Domain gehören.

Rufe zum Abgleich im src-Attribut ein Dokument auf, das der gleichen Herkunft entspricht, und eines, das ihr widerspricht.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>...</title>
    <script type="text/javascript">
      function scrollFrame() {    
        parent.FrameId.scrollTo(100,100); 
      }
    </script>
  </head>
  <body onload="scrollFrame();">
    <iframe src="..." name="FrameId"></iframe>
  </body>
</html>

//edit

Übrigens funktioniert CPolys Vorschlag tadellos, wenn der im Stylesheet deklarierte ID-Bezeichner #frm auch im <iframe>-Element aufgerufen wird, was in deinem zuletzt gezeigten Code mit dem Attribut id="___frm" überhaupt nicht der Fall ist.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    <title>Beschneiden der Bundesregierung</title>
    
    <style type="text/css">
        #wrapper {
          margin-top: 300px;    // Nur für Demo, folgt eigentlich unterhalb anderer DIVs
          width: 400px;
            height:250px;
            overflow:hidden;
            float: right;         // Nur für Demo
            background-color:red; // Nur für Demo
        }
        
        #frm {
            width:1000px;
            height:9999px;
        position:relative;
        left:-194px;
            top:-2550px;
        }
            
    </style>
</head>
 
<body>
    <div id="wrapper">
        <iframe id="frm" src="http://www.bundesregierung.de"></iframe>
    </div>
</body>
 
</html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück