Slidemenu aus IFrame ansprechen @ tutorials.de: Tutorials, Forum & Hilfe

Karlzberg · 24.06.07 21:52

Es geht um folgendes Problem:

Eine Seite soll aus zwei Frames/IFrames bestehen, zuzüglich eines Slidemenus.
Soweit, so gut.
Der oberste Frame beinhaltet ein "LaPlace-Script", der zweite eine dazugehörige Konsole, inklusive einer Textarea.
Das Slidemenu soll nun die Eingabe der Textarea des zweiten Frames, sprich der Textarea überprüfen und die korrekte mathematische Schreibweise ausgeben.
Bevor die korrekte Schreibweise allerdings integriert werden kann, stellt sich zunächst die Frage, wie ich das Menü überhaupt vom IFrame aus ansprechen kann.
Momentan funktioniert es so, dass es sich bei onkeypress im Hauptfenster ausfährt. Dies soll es aber Bei der Konsole machen. Also, sobald ich etwas in die Textarea eingebe, soll das Menü ausfahren.

Inzwischen habe ich nun schon fast das gesamte Internet nach der Lösung abgesucht (mit nem Kollegen zusammen) und zu fast allem etwas gefunden. Nur zu diesem Problem nicht. Vielleicht kann mir hier wer weiterhelfen?

hans jörg · 24.06.07 22:35

Hallo,

die Kommunikation mit dem Hauptfenster funktioniert im Javascript über den Begriff "parent". Hast du zum Beispiel in deinem Hauptfenster eine funktion zb:
function xyz()
{
alert("test");
}
kannst du siese aus dem iframe heraus mit

HTML-Code:

parent.xyz();

ausführen. Hier ->http://de.selfhtml.org/javascript/objekte/frames.htm# findest du mehr dazu.

Karlzberg · 25.06.07 02:41

Hallo Hans Jörg,

erst einmal danke für Deine Antwort

Wenn es nur so einfach wäre, diese Code-Zeile findet man ja überall im Netz

Um es etwas genauer zu machen, hier mal der Quelltext, vielleicht könnt Ihr mir dann ja eher etwas zu sagen:

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       >
<html>
<head>
<title>Math-Coach</title>
<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
border:1,5px;
background:transparent;
layer-background-color:#F0f0f0;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>
</head>
<body>
 
 
<script language="JavaScript1.2">
 
/***********************************************
* Sliding Menu Bar Script 2- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
 
var slidemenu_width='100%' //specify width of menu (in pixels)
var slidemenu_reveal='12px' //specify amount that menu should protrude initially
var slidemenu_top='17px'   //specify vertical offset of menu on page
var slidemenu_height='1px'
 
var ns4=document.layers?1:0
var ie4=document.all
var ns6=document.getElementById&&!document.all?1:0
 
if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+'" title="Press x to expand the menu, z to contract it">')
else if (ns4){
document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' visibility=hide>')
}
 
var sitems=new Array()
 
///////////Edit below/////////////////////////////////
 
//siteitems[x]=["Item Text", "Optional URL associated with text"]
 
sitems[0]=["<big><font face='Arial'>Site Menu</font></big>", ""]
sitems[1]=["Menus And Navigation aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", "http://www.dynamicdrive.com/dynamicindex1/"]
sitems[2]=["Document Effects", "http://www.dynamicdrive.com/dynamicindex3/"]
sitems[3]=["Scrollers", "http://www.dynamicdrive.com/dynamicindex2/"]
sitems[4]=["Image Effects", "http://www.dynamicdrive.com/dynamicindex4/"]
sitems[5]=["Links And Buttons", "http://www.dynamicdrive.com/dynamicindex5/"]
sitems[6]=["Dynamic Clocks & Dates", "http://www.dynamicdrive.com/dynamicindex6/"]
 
 
//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""
 
/////////////////////////////////////////////////////////
 
if (ie4||ns4||ns6){
for (i=0;i<sitems.length;i++){
if (sitems[i][1])
document.write('<a href="'+sitems[i][1]+'" target="'+target+'">')
document.write(sitems[i][0])
if (sitems[i][1])
document.write('</a>')
document.write('<br>\n')
}
}
 
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4){
document.slidemenubar.left=((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)
document.slidemenubar.visibility="show"
setTimeout("window.onresize=regenerate",400)
}
}
window.onload=regenerate2
 
rightboundary=0
leftboundary=(parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1
 
if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}
 
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10+"px"
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}
 
function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-10+"px"
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}
 
if (ns4)
document.captureEvents(Event.KEYPRESS)
function menuengine(e){
if (ns4||ns6){
if (e.which==120)
pull()
if (e.which==122)
draw()
}
else if (ie4){
if (event.keyCode==120)
pull()
if (event.keyCode==122)
draw()
}
}
document.onkeypress=menuengine
</script>
 
<table border="1" style="border-collapse:collapse" height="100%" width=100%" marginwidth="0" marginright="0">
<tr>
<td valign="top">
<iframe src="<%=response.encodeURL( "../servlet/LaplaceServlet?" + request.getQueryString() )%>" name="servlet" align="left"
        scrolling="no" marginheight="0" marginwidth="0" frameborder="1" width="100%" height="100%">
</iframe>
</td>
</tr>
 
<tr>
<td valign="bottom" height="220px">
<iframe src="<%=response.encodeURL( "./console.jsp" )%>" name="console" align="left" align="bottom"
        scrolling="no" marginheight="0" marginwidth="0" frameborder="1" height="220px" width="100%">
</iframe>
</td>
</tr>
</table>
 
</body>
</html>

Es mag sein, dass wir (also mein Kollege und ich) bei all den zig Versuchen etwas übersehen haben.
Aktuell ist in diesem Code-Stück das Menü ja so eingestellt, dass es auf einen Tastendruck (X) im Hauptfenster ausfährt.
Wie beschrieben, soll dies aber ausschließlich über die Textarea im zweiten IFrame funktionieren.

Für die Konsole im zweiten IFrame sei als Beispiel zum Aufbau einmal eine ganz einfache Texteingabe genannt:

Code :

<html><head><title>Test</title>
 
 
</head><body>
<form name="Test">
Kurzbeschreibung Ihrer Homepage (max 50 Zeichen):<br>
<textarea rows=2 cols=30 name="Eingabe">
</textarea><br>
<input type=text readonly size=30 name="Kontrolle"><br >
<input type=reset>
</form>
 
 
</body></html>

hans jörg · 25.06.07 08:53

Hallo noch mal,
ich hab zwar nicht ganz verstanden was ihr genau machen wollt, aber hier mal ein Beispiel wie man bei eurer Seite aus dem Iframe das Menü anspricht:
Die Datei im zweiten Iframe muss folgenden leicht geänderten Code aus eurem Hauptfenster beinhalten:

HTML-Code:

<script>
var ns4=document.layers?1:0;
var ie4=document.all;
var ns6=document.getElementById&&!document.all?1:0;
if (ns4)
{
	document.captureEvents(Event.KEYPRESS);
}
function menuengine(e)
{
	if (ns4||ns6)
	{
		if (e.which==120)
		{
			parent.pull();
		}
		if (e.which==122)
		{
			parent.draw();
		}
	}
	else if (ie4)
	{
		if (event.keyCode==120)
		{
			parent.pull()
		}
		if (event.keyCode==122)
		{
			parent.draw();
		}
	}
}
document.onkeypress=menuengine;
</script>

und schon kann der iframe (wenn er den Fokus erhält!) die Steuerung des Slidmenüs übernehmen. Das war doch das nach dem ihr gefragt habt?

Karlzberg · 25.06.07 11:15

Auch Dir abermals hallo

Wenn ich Dich richtig verstehe, meinst du also, dass wir das Menü in das zweite IFrame packen sollen?
Das wäre natürlich zu einfach

Das Problem ist nämlich, dass das Menü -wie schon gesagt- die mathematisch korrekte Schreibweise dessen enthalten soll, was im zweiten Frame/Iframe eingegeben wird. Praktisch als Kontrolle. Der zweite Frame stellt dabei nur eine kleine Konsole dar, das Menü soll allerdings beide Frames überlappen. Wird das Menü nun in den zweiten Frame gepackt, wird es auch nur dort angezeigt, zumindest, wenn ich nicht ganz blöd bin

Vielleicht habe ich Dich aber auch nur falsch verstanden?
Falls ja, dann wäre es nett, wenn Du es mal nochmal für jemanden erklären könntest, der auf dem Schlauch steht (damit bin ich gemeint)

hans jörg · 25.06.07 11:47

Nein, nicht das gesamte Menü in das Iframe sondern nur die Steuerung des Menüs, sowie du das in deinem ersten beitrag geschrieben hast (sofern ich dich richtig verstanden habe

).

Karlzberg · 25.06.07 19:38

Hallo Hans Jörg,

hätte ich jetzt ein Foto von Dir, würd ich Dir nen Schrein bauen, obwohl noch zwei kleine Verbesserungen reinmussten

Damit aus dem Schrein aber ne Kirche wird, sollte das Menü nur aus der Textarea aus ansprechbar sein, also nicht aus dem kompletten IFrame heraus.

Wenn ich nicht ganz blöd bin, müsste ich dafür doch nur:

Code :

1	document.onkeypress=menuengine

in

Code :

1	document.textarea.onkeypress=menuengine

abwandeln?! Zumindest so ähnlich, oder?

Aber soweit schon mal ein riesen großes Dankeschön, Du hast uns sehr weitergeholfen

hans jörg · 25.06.07 20:19

abend,
freut mich, dass ich helfen konnte - ein Schrein wäre dann aber vielleicht doch ein bisschen zu viel der Ehre

.
Wenn nur die Textarea den Event abfangen soll ist das ganze noch einfacher

HTML-Code:

<textarea onkeydown="name_der_auszuführenden_funktion()" name="" cols="" rows="">
</textarea>

Karlzberg · 25.06.07 21:29

Ok, wenn ich den Quellcode so stehen lasse und einfüge:

Code :

1	textarea onkeydown="menuengine(e)"

usw. (mit oder ohne das "e" in Klammern),

dann bleibt alles beim Alten.

Habe daher mal

Code :

1	document.onkeypress=menuengine;

rausgenommen, woraufhin er garnix mehr macht.
Ich glaube, ich bin zu blöd

hans jörg · 25.06.07 22:00

vielleicht brauchst du auch nur mal ne Pause,

eine Möglichkeit für das iframe wäre zb

HTML-Code:

<!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>Unbenanntes Dokument</title>
<script>
function new_menuengine(txt)
{
	var char = txt.substr((txt.length-1), 1);
	char = char.toLowerCase()
	if (char=='x')
	{
		parent.pull();
	}
	if (char=='z')
	{
		parent.draw();
	}
}
</script>
</head>

<body>
<textarea onkeyup="new_menuengine(this.value)"  name="" cols="" rows="">

</textarea>
</body>
</html>

weitere findest du zb hier:
http://www.mediaevent.de/javascript/event_listener.html

Karlzberg · 26.06.07 00:12

Super! Vielen Dank, funktioniert jetzt astrein

Jetzt kann endlich die eigentliche Arbeit beginnen, nachdem wir uns Ewigkeiten an diesem Mist aufgehalten haben

Also vielen Dank nochmal

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

iFrame Parent ansprechen... (JQuery)

Image im IFrame ansprechen

Element in IFrame ansprechen

Wie iframe mit css ansprechen?

IFrame von außen ansprechen

E-Mail:

Abonnieren Abbestellen