✔ Div in einem Frame auslesen, aus einem anderen Frame

A

AktivArne

Grünschnabel
Hallo,
Ich habe eine oder einige Fragen zu Frames, und Javascript.

Mein Problem:
Ich habe 2 Frames, einen oberen (eine Art Toolbar) und einen unteren.
In dem unteren Befindet sich ein <div> Tag, mit der id="PhotoContrainer".In Diesem Div Tag befindet sich ein Bild. ( Mit <img src="....")
Diesen DivTag mit seiner ID und seinem Bild möchte ich gern auslesen, und später Speichern. Doch leider scheitere ich.

1. Frage:
Ist das aus Sicherheitsgründen überhaupt möglich?

Wenn ja , hier einer meiner Versuche.

Mein Code:
in index.html
HTML: 
<frameset rows="28,*" border="0" frameborder="0" framespacing="0">
<frame name="toolbar" src="toolbar.htm" scrolling="no" marginheight="3" marginwidth="10">
<frame name="Site" src="svz_site.htm">
</frameset>
in toolbar.htm
HTML: 
<body>
<style type="text/css">
<!--
body {
 margin:0px;
 background:url(toolbar.png) repeat-x;
     }
a:link {
 color:#000000;
 text-decoration:none;
       }
a:visited {
 color:#000000;
 text-decoration:none;
          }
a:active {
 color:#FFFFFF;
 text-decoration:none;
         }
a:hover {
 color:#999999;
 text-decoration:none;
        }
div.toolbar {
 margin-left:250px;
            }
-->
</style>
<script type="text/javascript">
<!--
// Versuche pic mit Div Tag zufüllen.
var pic = parent.Site.document.getElementById('PhotoContainer');
// Versuch Source in picurl zufüllen.
var picurl = pic.getElementsByTagName('img')[0]src);
// Picurl wird übergeben
function transportPicUrl(picurl) {
location.href='http://localhost/svzpicloader/?dlpic='+encodeURIComponent(picurl);
}
//-->
</script>
</head><body>
<div class="toolbar">| <a href="javascript:transportPicUrl()">Bild Speichern</a> |</div>
</body>

Hier wird die Variable nur in einem Link an eine andere Seite Weitergeleitet, welche einen Download startet. Aber das Funktioniert schon einwandfrei.

in Site.htm
HTML: 
<!-- Ganz ganz Viel unwichtiger Code...-->
<div id="PhotoContainer">
 <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>

Meine Versuche:
1. Getestet ob das Script ohne Frames Funktioniert.
2. Statt parent.Site.xy mal parent.frames[0].xy eingesetzt
3. Rückgabe wert von pic ohne Frames. (Mir wird gesagt das es sich bei dem Element um ein Div Element handelt.)


Script ohne Frames:
Code: 
var pic=document.getElementById('PhotoContainer');alert(pic);
	if(confirm('Mit einem Klick auf OK akzeptierst du, dass du ueber alle\nnoetigen Rechte zum Download des Bildes verfuegst!'))
   {
	if(!pic)alert('Du bist nicht auf einer  Bild Seite!');
	else location.href='http://localhost/picloader/?dlpic='+encodeURIComponent(pic.getElementsByTagName('img')[0]src);   }

Script für die Browserzeile oder Booklet:

Code: 
javascript: var pic=document.getElementById('PhotoContainer');if(confirm('Mit einem Klick auf OK akzeptierst du, dass du ueber alle\nnoetigen Rechte zum Download des Bildes verfuegst!')){if(!pic)alert('Du bist nicht auf einer Bild Seite!'); else location.href='http://www.picloader/?dlpic='+encodeURIComponent(pic.getElementsByTagName('img')[0].src);}

Da Semtliche Versuche mit den Frames scheiterten, habe ich mich gefragt ob es überhaupt vorgesehen ist? Also man könnte ja eigentlich somit jede Site modfizieren, oder sogar verschiedene Teile austauscht.

Frage 2:
Wenn es so nicht möglich ist, ist es überhaupt umsetztbar?
Und vorallem wie? ( Denkanstoß)

Hoffe ihr könnt mir weiterhelfen,
Gruß Arne
 
Hi,

du greifst in diesen zwei Zeilen
Code: 
// Versuche pic mit Div Tag zufüllen.
var pic = parent.Site.document.getElementById('PhotoContainer');
// Versuch Source in picurl zufüllen.
var picurl = pic.getElementsByTagName('img')[0].src;
auf das Dokument und seine Methoden zu, während es noch nicht existiert.

Versuch mal, alles mit in die Funktion zu packen.
Code: 
function transportPicUrl() {
  // Versuche pic mit Div Tag zufüllen.
  var pic = parent.Site.document.getElementById('PhotoContainer');
  // Versuch Source in picurl zufüllen.
  var picurl = pic.getElementsByTagName('img')[0].src;

  location.href='http://localhost/svzpicloader/?dlpic='+encodeURIComponent(picurl);
}
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Hallo,
Vielen dank erstmal für die Antwort.
Wenn ich jetzt versuche mir einer der beiden Variablen anzuzeigen, mit
Code: 
function transportPicUrl() {
  // Versuche pic mit Div Tag zufüllen.
  var pic = parent.Svz_Site.document.getElementById('PhotoContainer');
  // Versuch Source in picurl zufüllen.
  //var picurl = pic.getElementsByTagName('img')[0].src;
  alert(pic);
// Oder picurl
}

Kommt nichts, nicht mal ein Undefinded oder Null-:rolleyes:
Aber wenn ich jetzt zb. versuche auf den Unteren Frame zuzugreifen mit z.b.
parent.frames[1].history.back(); oder parent.Site.history.back();
zunktioniert das EInwandfrei.

Ich bekomme blos mein Div Element nicht zufassen.
Ich habe es schon einmal soweit gehabt das er mir Null ausgegeben hat.
Wenn ich mir aber direkt über die Browserzeile die Variable pic ausgeben lasse, ohne frames, sagt er mir das es sich um ein HTML Div Object handelt.

Blos verflixt, ich komm per frame irgedndwie nicht an diesen Div Container ran.

Hat nochjemand eine Idee?
 
Hi,

vielleicht liegt es am Name für den Frame - in deinem ersten Posting hiess der gesuchte Site, in deinem zweiten Script heiss er jedoch Svz_Site.

Ansonsten funktioniert folgendes bei mir.

index.html:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>www.tutorials.de</title>
</head>
<frameset rows="28,*" border="0" frameborder="0" framespacing="0">
<frame name="toolbar" src="toolbar.html" scrolling="no" marginheight="3" marginwidth="10">
<frame name="Site" src="svz_site.htm">
</frameset>
<noframes><body>
</body></noframes>
</html>
toolbar.htm:
Code: 
<html>
<head>
<title>www.quaese.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
 margin:0px;
 background:url(toolbar.png) repeat-x;
     }
a:link {
 color:#000000;
 text-decoration:none;
       }
a:visited {
 color:#000000;
 text-decoration:none;
          }
a:active {
 color:#FFFFFF;
 text-decoration:none;
         }
a:hover {
 color:#999999;
 text-decoration:none;
        }
div.toolbar {
 margin-left:250px;
            }
-->
</style>
<script type="text/javascript">
<!--
// Picurl wird übergeben
function transportPicUrl() {
  // Versuche pic mit Div Tag zufüllen.
  var pic = parent.Site.document.getElementById('PhotoContainer');
  // Versuch Source in picurl zufüllen.
  var picurl = pic.getElementsByTagName('img')[0].src;
  alert(picurl);
}
//-->
</script>
</head>
<body>
<div class="toolbar">| <a href="javascript: transportPicUrl()">Bild Speichern</a> |</div>
</body>
</html>
svz_site.htm:
Code: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<!-- Ganz ganz Viel unwichtiger Code...-->
<div id="PhotoContainer">
 <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>
</body>
</html>
Voraussetzung für das Funktionieren ist jedoch die Voraussetzung, dass sich toolbar.htm und svz_site.htm unter der gleichen Domain befinden.

Ciao
Quaese
 
Vielen dank, mein Problem ist gelöst.

Doch gibt es auch eine möglichkeit wenn die Domain nicht gleich ist?
 
Hi,

mit JavaScript hast du keinen Zugriff auf fremde Domains und deren Dokumente. Das ist Teil des Sicherheitskonzepts, bezeichnet als Richtlinie gleicher Herkunft (same-origin policy). Mehr dazu findest du hier.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück