✔ Slidemenu aus IFrame ansprechen

K

Karlzberg

Erfahrenes Mitglied
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?
 
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>
 
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: 
<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?
 
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) ;)
 
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 ;-) ).
 

Anhänge

  • frames.zip
    2,5 KB · Aufrufe: 17
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: 
document.onkeypress=menuengine

in

Code: 
document.textarea.onkeypress=menuengine

abwandeln?! Zumindest so ähnlich, oder?

Aber soweit schon mal ein riesen großes Dankeschön, Du hast uns sehr weitergeholfen :)
 
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: 
<textarea onkeydown="name_der_auszuführenden_funktion()" name="" cols="" rows="">
</textarea>
 
Ok, wenn ich den Quellcode so stehen lasse und einfüge:

Code: 
textarea onkeydown="menuengine(e)"

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

dann bleibt alles beim Alten.

Habe daher mal

Code: 
document.onkeypress=menuengine;

rausgenommen, woraufhin er garnix mehr macht.
Ich glaube, ich bin zu blöd :(
 
vielleicht brauchst du auch nur mal ne Pause,

eine Möglichkeit für das iframe wäre zb
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">
<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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück