Archivlink: javarea.de Forum > JavaScript > iframe per javascript vertikal scrollen
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > iframe per javascript vertikal scrollen

Pages: [1]
geschrieben von phonoline am 11.01.2007 - 21:55
Hallo,

neu hier. Vielen dank für die Aufnahme!
Folgendes Problem taucht bei der Gestaltung und Umsetzung einer Seite auf (HTML+CSS): Bei Einbindung eines iframes möchte ich verhindern, dass der horizontale Scrollbalken auftaucht. Alle bisherigen CSS-Möglichkeiten sind ausgeschöpft, also: Javascript . Diverse Google-Suchen haben bisher fast nichts gebracht. Das Prob ist bekannt, nur die Lösung noch nicht.:grin:

Ich bin also auf der Suche nach einem Script, mit dem ich einen iframe (nicht veränderbare externe Quelle) vertikal scrollen kann.
Folgendes Script habe ich schon probiert: Scrolling Iframe Content Vertically. Funktioniert natürlich prächtig. Problem: ich kopiere den gesamten Quelltext, setze eine andere Quelle anstelle des iframes scroll-v1.html ein, nämlich eine EXTERNE mit http://www...., und plötzlich geht nix mehr. Weder in IE, noch in Opera, Firefox etc..

Was muss ich ändern? Gibt es Alternativen?
Leider bin ich Scriptsprachenlegastheniker und kann aus einem Code nicht viel herauserkennen. Ich entschuldige mich also im Voraus.
Vielen dank für Anregungen & Tipps!
Alex

Hier die Daten:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Scrolling Iframe Content Vertically</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="robots" content="noindex,nofollow"> 
<style type="text/css">
body { font: 14px/1.3 verdana, arial, helvetica, sans-serif }
h1 { font-size:18px }	
a:link { color:#33c }	
a:visited { color:#339 }	

iframe { border: 1px dashed #666 }
div.arrows { width:300px; text-align:center }
div.arrows img { padding:8px }
</style>
<script type="text/javascript">
/*************************************************************************
  This code is from Dynamic Web Coding at http://www.dyn-web.com/ 
  See Terms of Use at http://www.dyn-web.com/bus/terms.html 
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

var timer_id;
function scroll_iframe(frm,inc,dir) {
  if (timer_id) clearTimeout(timer_id);
  if (window.frames[frm]) {
    if (dir == "v") window.frames[frm].scrollBy(0, inc);
    else window.frames[frm].scrollBy(inc, 0);
    timer_id = setTimeout("scroll_iframe('" + frm + "'," + inc + ",'" + dir + "')", 20);
  }
}

function stopScroll() { if (timer_id) clearTimeout(timer_id); }
</script>
</head>
<body>

<iframe name="scr1" id="scr1" scrolling="no" src="scroll-v1.html" width="300" height="200" frameborder="0">Sorry, your browser doesn't support iframes.</iframe>

<div class="arrows">
  <a href="javascript:;" onmouseover="scroll_iframe('scr1', -4, 'v'); window.status='Hover here to scroll up.'; return true" onmouseout="stopScroll(); window.status=''; return true"><img src="../../images/nav/tri-up.gif" width="12" height="12" alt="" border="0"></a> 
  <a href="javascript:;" onmouseover="scroll_iframe('scr1', 4, 'v'); window.status='Hover here to scroll down.'; return true" onmouseout="stopScroll(); window.status=''; return true"><img src="../../images/nav/tri-dn.gif" width="12" height="12" alt="" border="0"></a>
</div>

<p>Please read dyn-web's <a href="http://www.dyn-web.com/bus/terms.html">Terms of Use</a> if you plan to use our code.</p>

<p><a href="http://www.dyn-web.com/">www.dyn-web.com</a></p>

</body>
</html>

geschrieben von Micha am 11.01.2007 - 22:27
Hallo,

Zitat
 Original geschrieben von phonoline am 11.01.2007 - 21:55
Funktioniert natürlich prächtig. Problem: ich kopiere den gesamten Quelltext, setze eine andere Quelle anstelle des iframes scroll-v1.html ein, nämlich eine EXTERNE mit http://www...., und plötzlich geht nix mehr. Weder in IE, noch in Opera, Firefox etc..


Ja, das ist auch richtig so. Nur auf Dokumente, die zu einer Domain gehören (auf einem Server liegen) kannst Du zugreifen. Auf fremde Sachen nicht. Du bekommst einen Hinweis im FF und im Opera - suche nach der Fehlerkonsole

Letztlich wird es an dieser oder einer ähnlichen Konstruktion scheitern:
HTML-Quelltext
1: 

window.frames[frm].scrollBy(0, inc);


Es gibt hierfür keine Alternative (über JavaScript)

Micha

geschrieben von phonoline am 11.01.2007 - 23:30
Naja, zugreifen geht schon, nur geht dieser horizontale Scrollbalken einfach nicht weg im IE6.0. Alles CSS hilft da nicht. Jedenfalls bis jetzt nicht.
Es geht nur ums scrollen, mehr nicht. Auch folgendes Script, was im Prinzip den gleichen Inhalt bietet, funzt nicht bei externen Quellen, scrolltechnisch. Warum ist dass denn so? Warum scrollt er bei interner Quelle aber nicht bei externer? Ist doch eigenartig.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Scroll iFrame</title> 
<script type="text/javascript"> 
   var myTimeout;    
   function scrollPage(dir) { 
      dir == 'down' ? frames['inhalt'].scrollBy(0,10) : frames['inhalt'].scrollBy(0,-10); 
      myTimeout = setTimeout("scrollPage('" + dir + "')", 50); 
   } 
</script> 
</head> 
<body> 
<iframe name="inhalt" id="inhalt" src="http://www.gmx.de"></iframe> 
<a href="#" onmouseover="scrollPage('down')" onmouseout="clearTimeout(myTimeout)">Runter</a> | 
<a href="#" onmouseover="scrollPage('up')" onmouseout="clearTimeout(myTimeout)">Hoch</a> 
</body> 
</html>

geschrieben von phonoline am 12.01.2007 - 00:04
Ha! Lösung (evtl. )!

Ich setze statt der externen URL einfach eine interne HTML Datei .z.b. "frame.html" in den iframe, die wiederum die externe URL in einem iframe beinhaltet. Diese HTML-Datei wird natürlich in ihren Maßen großzügig den Maßen der externen URL angepasst. Die index.html, also die HTML-Datei, in der per Javascript gescrollt werden soll, enthält den Javascript-code und den iframe zur internen "frame.html". Zack, fertich is der lack! Klappt bisher in allen Browsern.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 

<html>
<body>
<iframe id="frame" name="frame" scrolling="no" src="http://www.***.net" frameborder="0" width="800px" height="1500px" align="center">Sorry, your browser doesn't support iframes.</iframe>
</body>
</html>

geschrieben von Micha am 12.01.2007 - 09:42
Hallo,

Zitat
 Original geschrieben von phonoline am 11.01.2007 - 23:30
Naja, zugreifen geht schon


wenn es gehen würde mit externen Quelle, würdest Du nicht fragen - es geht also nicht.

Zitat
 Original geschrieben von phonoline am 11.01.2007 - 23:30 Warum ist dass denn so? Warum scrollt er bei interner Quelle aber nicht bei externer? Ist doch eigenartig.


Nö, das ist das Sicherheitskonzept von JavaScript. Du verstößt gegen die Same Origin Policy. Alle Deine aufgezählten Browser verhalten sich somit völlig korrekt.

Zu Deinem (angeblichen) Lösungsvorschlag. Du kannst es drehen und wenden wie Du möchtest: mit JavaScript greifst Du nicht auf fremde Quellen zu. Wie sinnvoll ein Frame im Frame ist, wo ein Frame allein schon zu 99% unsinnig ist, lass ich mal dahingestellt.

Warum must Du überhaupt eine fremde Quelle einbinden? Stichwort: Schaufenstereffekt

LG Micha

geschrieben von phonoline am 12.01.2007 - 11:22
Micha,

es gibt durchaus Gründe für einen iframe fernab jeglicher Unfairness oder Kriminalität. Warum so moralisch?
In diesem Falle soll eine externe Seite - wenn auch nicht auf gleichem Server, so doch in direktem Zusammenhang - auf der von mir gestalteten Seite eingebunden werden. Es handelt sich dabei um Produktangaben und - vorstellung, und eine Einbindung bietet sich an. Das Einverständnis des Eigentümers der externen URL liegt natürlich vor.

Ubrigens ging es nie um die Einbindung einer externen Seite, sondern um das sich daraus erst ergebende Problem, das ein javascript code nicht mehr greift.

Selbst ohne meinen Lösungsvorschlag kann ich auf externe Quellen zugreifen - erklär mir mal bitte, warum das möglich ist? Opera 9.00, IE 7.0 und Firefox 2.0 - alle machen das mit.

Gruß,
Alex

geschrieben von Micha am 12.01.2007 - 12:24
Hallo Alex,

Zitat
 Original geschrieben von phonoline am 12.01.2007 - 11:22
es gibt durchaus Gründe für einen iframe fernab jeglicher Unfairness oder Kriminalität. Warum so moralisch?

Die einzige Seite, auf der ich Frames als "Gut-eingesetzt" finde, ist google-Images - vgl. dieses Beispiel.
Da es sich beim Einbinden um eine externe Quelle handelt, liegt doch eine Vermutung nahe, das man Content anbieten möchte, der nicht von einem selbst ist. Im Allgemeinen wird das wohl auch ohne Zustimmung erfolgen. Das spielt hier aber für das eigentliche Problem keine Rolle; da hast Du recht!


Zitat
 Original geschrieben von phonoline am 12.01.2007 - 11:22
Ubrigens ging es nie um die Einbindung einer externen Seite, sondern um das sich daraus erst ergebende Problem, das ein javascript code nicht mehr greift.

Aus einem anderen Blickwinkel betrachtet, ist genau das, das Problem - die externe Seite. JavaScript verbietet diesen Zugriff auf externe Seiten eben...


Zitat
 Original geschrieben von phonoline am 12.01.2007 - 11:22
Selbst ohne meinen Lösungsvorschlag kann ich auf externe Quellen zugreifen - erklär mir mal bitte, warum das möglich ist? Opera 9.00, IE 7.0 und Firefox 2.0 - alle machen das mit.

Zeig mir eine Seite, auf der mit JavaScript auf eine fremde Quelle zugegriffen werden kann. Das wird weder im Opera noch im Gecko gehen - beim IE ist es hoffentlich auch so, aber da bin ich zuversichtlich. Ich kann Dir also lediglich nochmal den Link zur Beschreibung der Same Origin Policy nahe legen, dort steht beschrieben, das es _nicht_ geht. Meine Erfahrungen zeigen das auch. Einzige Ausnahme, dich ich bisher feststellen konnte, ist ein Widget für Opera, dort hat man die Zügel etwas gelockert. So kann ich bspw. mit meinem Feed-Reader-Widget auf meinen Atom-Feed zugreifen. Letztlich spielt das aber für Dein Problem aber keine Rolle.

Wie gesagt, bring den Beweis, das es angeblich geht; den Gegenbweis hast Du in Deinem Ausgangsposting ja schon erbracht.

Auf Wiederlesen
Micha

geschrieben von phonoline am 12.01.2007 - 13:37
Da hast Du natürlich recht, Micha. Per Javascript geht gar nix.
Dennoch: ich bin jetzt erstmal stolz wie Oskar, dass meine Lösung tatsächlich funzt. Voll ausgetrickst.
In diesem Falle ist es SEHR sinnvoll, einen iframe zu nutzen, da es sich um eine Produktbeschreibung handelt (Versicherung). Mein Kunde bietet diese Versicherung in Zusammenarbeit mit dem Eigentümer der externen URL an. Alles vollkommen koscher.

Kannst Du mir trotz Deiner Bedenken weiterhelfen mit dem zusätzlichen Script, wieder an den Anfang der externen Seite zu gelangen (also Anker auf 'top' oder so)?

Lmk,
Alex

geschrieben von Micha am 12.01.2007 - 14:05
Hallo Alex,

Zitat
 Original geschrieben von phonoline am 12.01.2007 - 13:37
Dennoch: ich bin jetzt erstmal stolz wie Oskar, dass meine Lösung tatsächlich funzt. Voll ausgetrickst.

Das möchte ich Dir auch in keinem Fall absprechen. Eine gefundene Möglichkeit ist immer etwas als gar nichts. Letztlich muss man sich eben entscheiden, ob man mit der Umsetzung, dem Aufwand und dem erzielten Ergebnis glücklich ist (oder eben nicht). wenn Du da Dein Ziel erreicht hast, dann ist es okay.

Zitat
 Original geschrieben von phonoline am 12.01.2007 - 13:37
In diesem Falle ist es SEHR sinnvoll, einen iframe zu nutzen, da es sich um eine Produktbeschreibung handelt (Versicherung). Mein Kunde bietet diese Versicherung in Zusammenarbeit mit dem Eigentümer der externen URL an. Alles vollkommen koscher.


Ich würde denken, das man es mit einer serverseitigen Scriptsprache etwas "besser" hinbekommen hätte. Nehmen wir mal folgende Zeilen Code:

HTML-Quelltext
1: 
2: 
3: 
4: 

<script type="text/javascript">
	if (self.location != top.location)
		top.location = self.location; 
</script>

Wenn dieser Eigentümer diese Zeilen in seinem Dokumentenkopf einbaut, war es das für Dich. Zum vergleich mal die PHP-Methode fopen. Wenn Du es schaffst, die Seite so einzulesen, benötigst Du kein Frame mehr. Nutzer hätten dann die Möglichkeiten, direkt Lesezeichen auf eine Seite zu setzen - was bei Frames nicht (oder nur erschwert) geht.

Zitat
 Original geschrieben von phonoline am 12.01.2007 - 13:37
Kannst Du mir trotz Deiner Bedenken weiterhelfen

Es sind keine Bedenken, sondern nur Hinweise. Auswerten musst Du es natürlich. Wie oben schon angedeutet bist Du letztelich der, der das Pro und Kontra abschätzen muss. Hilfestellung gebe ich natürlich trotzdem, machmal ist diese aber nicht so, wie sich das der Fragende wünscht.

Zitat
 Original geschrieben von phonoline am 12.01.2007 - 13:37
wieder an den Anfang der externen Seite zu gelangen (also Anker auf 'top' oder so)?

Dazu musst Du den Besitzer der externen Seite bitten, einen solchen Anker zu setzen. Mit der JavaScript Funktion scrollTo() wirst Du, da Du auf ein externes Dokument nicht zugreifen darfst/kannst, nichts erreichen. Hier stößt Du leider an eine Grenze von JavaScript.

Micha

geschrieben von Micha am 12.01.2007 - 14:08
Nachtrag: Du könntest versuche mit einem refresh() oder ähnlichem den Inhalt des Frames neu zuladen, dann springt er an den Anfang des Dokuments. Auch ist es möglich, die URI im Frameset zu manipulieren. Nahezu alle Browser springen nach oben, wenn man eine # (Raute) anhängt. Wie ggesagt, ungetestet und nur eine Idee.

Micha

geschrieben von phonoline am 12.01.2007 - 14:45
Probier ich aus, Micha. Vielen Dank!

PHP: geht nicht, da der derzeitige Tarif PHP nicht ermöglicht. HTML, CSS und Javascript sind für die Seite vollkommen ausreichend. Außerdem: ich habe null Ahnung von PHP und für äußerst aufwändige Fälle meinen Kollegen, der auf Typo3 spezialisiert ist. Damit geht bestimmt alles.

geschrieben von phonoline am 13.01.2007 - 19:46
Das Refresh-Script funzt gut im Opera, aber leider refreshed der Internet Explorer 6.0 die Seite nicht richtig. D.h. da, wo der iframe stehen geblieben ist, bleibt er nach dem Neuladen auch. Immer Opera und Firefox wird alles komplett neu geladen. Gibt's da einen zusätzlichen Trick?

HTML-Quelltext
1: 
2: 
3: 

<script type="text/javascript">
document.write
</script>


HTML-Quelltext
1: 

<a href="javascript:;" onmousedown="history.go(); window.status='zum Anfang'; return true"><img src="bilder/refresh.gif" width="19" height="22" alt="zum Anfang" border="0"></a>

geschrieben von Micha am 13.01.2007 - 20:40
Hi,

versuch mal (ungetestet!):

HTML-Quelltext
1: 
2: 
3: 
4: 

var uri = window.frames["frameName"].src;
function top(){
  window.frames["frameName"].src = uri+"#";
}


und dann mit

HTML-Quelltext
1: 

onclick = top();


aufrufen.

Micha

geschrieben von René am 14.01.2007 - 08:29
Zitat
 Original geschrieben von phonoline am 13.01.2007 - 19:46

HTML-Quelltext
1: 

<a href="javascript:;" onmousedown="history.go(); ...></a>

entweder history.go(-1); oder history.back();


Zitat
 go()

Springt so viele Seiten in der gespeicherten History vor oder zurück wie gewünscht. Erwartet als Parameter die Anzahl der zu springenden Seiten. Ein negativer Wert springt rückwärts (so viele Back-Vorgänge wie angegeben), ein positiver Wert springt vorwärts (so viele Forward-Vorgänge wie angegeben).

Quelle: http://de.selfhtml.org/javascript/o....ory.htm#go

geschrieben von phonoline am 15.01.2007 - 11:03
Zitat
 Original geschrieben von derletztekick am 13.01.2007 - 20:40

Hi,

versuch mal (ungetestet!):

HTML-Quelltext
1: 
2: 
3: 
4: 

var uri = window.frames["frameName"].src;
function top(){
  window.frames["frameName"].src = uri+"#";
}


und dann mit

HTML-Quelltext
1: 

onclick = top();


aufrufen.

Micha


Klappt leider nicht. Oder muss ich auf etwas Bestimmtes achten? Wie gesagt: Scriptsprachenlegastheniker!
Vielen Dank für die Unerstützung!
Alex

@René: vielen dank für Dein Script, aber ich möchte einen iframe wieder an den Anfang bringen (top), und da springt Dein Script leider nicht an, weil es komplett eine Seite zurückgeht (-1, back).


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.