mit Javascript einen Iframe erzeugen

[roger]

Hallo,

ich möchte an eine bestimmte Stelle im HTML Dokument einen iframe schreiben.
Als Platzhalter (hier soll der iframe stehen) hätte ich ein <div> Element gesetzt.

Ich benötigte einmal Starthilfer wie man so etwas lösen kann.

Hintergrund:

Ich möchte eine spezielle Eingabetastatur (Touchdisplay) "selbst" programmieren.

Hier hätte ich zwei Lösungen

1. iframe in dem die Tastaturseite geöffnet wird
2. direkt in das Dokument schreiben und löschen, wäre sicher einfacher für mich (Rückgabe des
   eingegebenen Wertes) , aber hier habe ich überhaupt keine Ahnung wie so  etwas geht.

Wie könnte ich so etwas "selbst" (mein Weihnachtsprojekt) lösen, "ohne irgendwelche Fremdprogramme" zu nutzen. Bin für jeden Tip dankbar.

Gruß
     roger

[bleicher]

Grüße,
kleine vorfrage - warum iframe? Die graphische tastatur kannst du ja direkt einblenden?
MFG
bleicher

[roger]

Grüße,
kleine vorfrage - warum iframe? Die graphische tastatur kannst du ja direkt einblenden?
MFG
bleicher

Morgen,

ich will die Tastatur auch ausblenden können, wenn kein Tochdisplay, d.h. beim laden ist die Tastatur versteckt/ausgeblendet und beim click auf ein Icon kann ich diese Tastatur EIN/AUS schalten.

Gruß
          roger

[Matthias Apsel]

Om nah hoo pez nyeetz, roger!

ich will die Tastatur auch ausblenden können, wenn kein Tochdisplay, d.h. beim laden ist die Tastatur versteckt/ausgeblendet und beim click auf ein Icon kann ich diese Tastatur EIN/AUS schalten.

Ein Iframe ist hauptsächlich für eine komplette Internetseite gedacht. Nimm ein div-Element.

Matthias

[1UnitedPower]

Meine Herren,

Ein Iframe ist hauptsächlich für eine komplette Internetseite gedacht. Nimm ein div-Element.

Ein Iframe hat aber in diesem Beispiel auch Vorteile, zum Beispiel kann man mit der postMessage [mdn] mit einer einzigen Instanz der Tastatur mehrere Browser-Fenster ansteuern. Für die semantische Auszeichnung der Tasten bieten sich das kbd-Element an.

[roger]

Hallo,

super für die Anregungen.

Zu Matthias: an ein <div> hätte ich gedacht, das ich mit einem button event beschreiben würde.

Der <div> wäre mein Platzhalter, damit die "Tastatur" immer an der gleichen stelle steht.

So und nun wird's konkrekt, wie ???

Wie spreche ich das <div> an damit später so etwas steht.

<div id="platzhalter"><table><tr><td></td></tr></table></div>

Ich hätte die Tastatur als Tabelle (Formatierung) ausgelegt.
Wie würde das Script aussehen ?

document.getElementById('platzhalter').xy = "<table><tr><td></td></tr></table>";

oder hättet Ihr anders gedacht ??
Fragen über Fragen :-)

Gruß
     roger

[1UnitedPower]

Meine Herren!

Zu Matthias: an ein <div> hätte ich gedacht, das ich mit einem button event beschreiben würde.

button-Event? Gibt es nicht. Es gibt mouse-, touch- und pointer-events, die in diesem Kontext interessant sind.

Der <div> wäre mein Platzhalter, damit die "Tastatur" immer an der gleichen stelle steht.

Das div-Element dient dir also nur als ein Container. Diesen Container willst du programmatisch mit den virtuellen Tasten befüllen. Was spricht dagegen, die Tasten nicht programmatisch, sondern manuell per Hand in das HTML zu schreiben?

Ich hätte die Tastatur als Tabelle (Formatierung) ausgelegt.

Eine Tabelle ist sowohl semantisch als auch visuell unpassend. Eine Tastatur ist nicht tabellenartig ausgerichtet.

<div id="platzhalter"><table><tr><td></td></tr></table></div>
Wie würde das Script aussehen ?
document.getElementById('platzhalter').xy = "<table><tr><td></td></tr></table>";

Es gibt verschiedene Ansätze, den DOM-Baum zu manipulieren:
innerHTML
appendChild und co.
insertAdjacentHTML

oder hättet Ihr anders gedacht ??

Tabelle rausschmeißen und das HTML für die Tastatur per Hand schreiben. Die Ereignis-Verarbeitung dann mit JavaScript.

[roger]

Guten Morgen,

da ich das "Keyboard" standardmäßig ausgeblendet habe (kein Touchdisplay), und auch mehr als ein Eingabefeld pro Seite haben könnte habe ich nachfolgendes Programm geschrieben.

Problem:
Wenn ich in den Funktionen die "id" des Textfeldes (input) fest eingebe, dann funktioniert alles. Wenn ich die "id" als Variable übergebe kommt die Fehlermeldung im debugger "ReferenceError: idtextfeld is not defined"

Anbei der Code.... vielleicht fällt etwas auf.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
  
<head>  
   <title>my Keyboardtest</title>  
   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  
   <script type="text/javascript" src="keyboard.js"></script>  
   <style type="text/css">  
      #textfeld {  
          width:122px;  
          height:25px;  
          border:1px solid #000;  
          font:16px/20px Arial;  
          color:#000;  
          text-align: right;  
          padding:2px;  
          margin:0 0 20px 0;  
        }  
  
      .tasten {  
          width:30px;  
          height:30px;  
          font:bold 16px/20px Verdana;  
          color:#000;  
          text-align: center;  
          background-color: #ccc;  
          cursor: default;  
          margin:2px;  
        }  
   </style>  
  
<script type="text/javascript">  
function keyboard()  
{ open_keyboard('textfeld', 'keyboard'); }  
  
</script>  
</head>  
  
<body>  
  
<input type="text" id="textfeld" maxlength="10"><img src="keyboard.jpeg" alt="Tastatur" width="25" height="25" onclick="keyboard();"/>  
<div id="keyboard"></div>  
  
</body>  
</html>  

und hier das Javascript

  
function writeText(taste, idtextfeld)  
{ document.getElementById(idtextfeld).value = document.getElementById(idtextfeld).value + document.getElementById(taste).value; }  
  
function backspace(taste, idtextfeld)  
{ document.getElementById(idtextfeld).value = document.getElementById(idtextfeld).value.substr(0, document.getElementById(idtextfeld).value.length - 1); }  
  
function negativText(taste, idtextfeld)  
{ if ( document.getElementById(idtextfeld).value == '' ) return; document.getElementById(idtextfeld).value = document.getElementById(idtextfeld).value *(-1); }  
  
function loeschen(taste, idtextfeld)  
{ document.getElementById(idtextfeld).value = ''; }  
  
function komma(taste, idtextfeld)  
{  
	if (document.getElementById(idtextfeld).value.length < 1)  
	{ document.getElementById(idtextfeld).value = '0.'; return; }  
  
	if (document.getElementById(idtextfeld).value.indexOf('.') < 0)  
	{ document.getElementById(idtextfeld).value = document.getElementById(idtextfeld).value + '.'; }  
}  
  
function open_keyboard(idtextfeld, idkeyboard)  
{  
	if (document.getElementById(idkeyboard).innerHTML == '')  
	{  
	document.getElementById(idkeyboard).innerHTML = "<table id=table border=\"1\" style=border:2px solid #000;><tr><td><input type=\"button\" id=\"t1\" class=\"tasten\" value=\"1\" onclick=\"writeText(this.id, idtextfeld);\"><\/td><td><input type=\"button\" id=\"t2\" class=\"tasten\" value=\"2\" onclick=\"writeText(this.id, idtextfeld);\"><\/td><td><input type=\"button\" id=\"t3\" class=\"tasten\" value=\"3\" onclick=\"writeText(this.id, idtextfeld);\"><\/td><\/tr><td><input type=\"button\" id=\"t4\" class=\"tasten\" value=\"4\" onclick=\"writeText(this.id, idtextfeld);\"><\/td><td><input type=\"button\" id=\"t5\" class=\"tasten\" value=\"5\" onclick=\"writeText(this.id, idtextfeld);\"><\/td><td><input type=\"button\" id=\"t6\" class=\"tasten\" value=\"6\" onclick=\"writeText(this.id, idtextfeld);\"><\/td></tr><td><input type=\"button\" id=\"t7\" class=\"tasten\" value=\"7\" onclick=\"writeText(this.id, idtextfeld);\"><\/td><td><input type=\"button\" id=\"t8\" class=\"tasten\" value=\"8\" onclick=\"writeText(this.id, idtextfeld);\"><\/td><td><input type=\"button\" id=\"t9\" class=\"tasten\" value=\"9\" onclick=\"writeText(this.id, idtextfeld);\"><\/td><\/tr><tr><td><input type=\"button\" id=\"t10\" class=\"tasten\" value=\"&#177;\" onclick=\"negativText();\"><\/td><td><input type=\"button\" id=\"t11\" class=\"tasten\" value=\"0\" onclick=\"writeText(this.id, idtextfeld);\"><td><input type=\"button\" id=\"t12\" class=\"tasten\" value=\".\" onclick=\"komma(this.id, idtextfeld);\"><\/td><\/td><\/tr>    <tr><td><input type=\"button\" id=\"t13\" class=\"tasten\" value=\"clr\" onclick=\"loeschen(this.id, idtextfeld);\"><\/td><td><input type=\"button\" id=\"t14\" class=\"tasten\" value=\"\"><\/td><td><input type=\"button\" id=\"t15\" class=\"tasten\" value=\"<-\" onclick=\"backspace(this.id, idtextfeld);\"><\/td><\/tr><\/table>";  
  
	}  
	else  
	{ document.getElementById(idkeyboard).innerHTML = ''; }  
}  

Bin für jeden Tip oder aber auch Verbesserung dankbar.

Gruß
    roger

[1UnitedPower]

Meine Herren!

da ich das "Keyboard" standardmäßig ausgeblendet habe (kein Touchdisplay), und auch mehr als ein Eingabefeld pro Seite haben könnte habe ich nachfolgendes Programm geschrieben.

Dein bisheriger Ansatz sieht also pro Eingabe-Feld eine eigene Tastatur vor. Es wäre wesentlich schöner, wenn du mit ein und der selben Tastatur mehrere Eingabefelder ansteuern könntest. Denk mal drüber nach.

Problem:
Wenn ich in den Funktionen die "id" des Textfeldes (input) fest eingebe, dann funktioniert alles. Wenn ich die "id" als Variable übergebe kommt die Fehlermeldung im debugger "ReferenceError: idtextfeld is not defined"

function open_keyboard(idtextfeld, idkeyboard)
{
document.getElementById(idkeyboard).innerHTML = "<input type="button" id="t1" class="tasten" value="1" onclick="writeText(this.id, idtextfeld);">";
}

  
Ich habe den Code mal auf das Wesentliche gekürzt.  
  
`idtextfeld`{:.language-javascript} ist ein Parameter der Funktion `open_keyboard`{:.language-javascript}. Dieser Parameter ist nur im Gültigkeitsbereich dieser Funktion ansprechbar. Wenn das Eingabefeld nun in das HTML eingefügt wird, hat der JavaScript-Code innerhalb des onclick-Attributs keinen Zugriff auf diesen Gültigkeitsbereich.  
  
Mit anderen Worten, das aus oben stehenden JS-Code resultierende HTML sieht wie folgt aus:  
  
`<input type="button" id="t1" class="tasten" value="1" onclick="writeText(this.id, idtextfeld);">`{:.language-html}  
  
`idtextfeld`{:.language-javascript} ist an dieser Stelle eine unbekannte Variable.  
  
Was du vermutlich erwartet hast, sollte so aussehen:  
  
`<input type="button" id="t1" class="tasten" value="1" onclick="writeText(this.id, 'textfeld');">`{:.language-html}  
  
Das erreichst mit folgendem Schnipsel:  
  
~~~javascript
function open_keyboard(idtextfeld, idkeyboard)  
{  
document.getElementById(idkeyboard).innerHTML = "<input type=\"button\" id=\"t1\" class=\"tasten\" value=\"1\" onclick=\"writeText(this.id, '" + idtextfeld + "');\">";  
}  

Beachte, dass du den gleichen Fehler noch an vielen anderen Stellen machst.

Ein weiterer Nachteil deines Ansatzes ist, dass du selbst-modifizierenden Code erzeugst. Das möchte man im Allgemeinen vermeiden, weil es sehr schlecht wartbar ist und eben zu genau solchen Fehlern führt, wie du ihn jetzt hast. Umgehen kannst du das, indem du dich in die verschiedenen Möglichkeiten der Ereignis-Behandlung von JavaScript einliest und dich in objektorientierte Programmierung einarbeitest. Das sind aber zwei sehr komplexe Themenbereiche, die man nicht von heute auf morgen erlernt.

Bin für jeden Tip oder aber auch Verbesserung dankbar.

Das scheint mir bisher leider nicht so, du gehst fast gar nicht auf die Antworten der Helfer ein, sondern stellst nur weiter Fragen. Wenn du was an einer Antwort nicht verstehst, versuche dich mit dem Thema zu beschäftigen, wenn du es dann immer noch nicht verstehst, frage einfach nochmal konkret nach, was der Antwortende gemeint hat.