Variablen aus iframe senden

MaxivB · 12. Mai 2008

Hallo!
Hier hab ich einen Editor -klappt auch!:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>IFrame im Designmode f&uuml;r IE und Mozilla</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
<!--
function watchFormats() {
 var editorDoc = document.getElementById('editor').contentWindow.document;
 var format = "";
 format += editorDoc.queryCommandValue('fontname') + " ";
 format += editorDoc.queryCommandValue('fontsize') + " ";
 if (editorDoc.queryCommandState('bold')) format += "bold ";
 if (editorDoc.queryCommandState('italic')) format += "italic ";
 if (editorDoc.queryCommandState('underline')) format += "underline ";
 document.getElementById('tf').value = format;
}

function shortCuts(e) {
 if(!e && document.getElementById('editor').contentWindow.event) e = document.getElementById('editor').contentWindow.event;
 if (e.which && e.altKey && e.ctrlKey) {
  if (e.which==98) document.getElementById('editor').contentWindow.document.execCommand('bold', false, null);
  if (e.which==105) document.getElementById('editor').contentWindow.document.execCommand('italic', false, null);
  if (e.which==117) document.getElementById('editor').contentWindow.document.execCommand('underline', false, null);
 } else if (e.keyCode) {
  window.status = "" + e.keyCode + e.ctrlKey + e.altLeft + e.altKey;
 }
}

window.onload = function() {
  var editorDoc = document.getElementById('editor').contentWindow.document;
  editorDoc.designMode="on";

  if(editorDoc.addEventListener) {
    editorDoc.addEventListener('keypress', shortCuts, true);
  } else {
    editorDoc.onkeypress = shortCuts;
  }

  window.setInterval("watchFormats()", 100);
};
//-->
</script>
</head>

<body>

<font color="#006296" face="Verdana" size="4px">Editor</font>
<hr width="100%" size="2" />

    <table border="0" bgcolor="#C0C0C0"><tr>
    <td><select onchange="document.getElementById('editor').contentWindow.document.execCommand('FontName', false, this.value);"><option></option><option>Times New Roman</option><option>Verdana</option></select></td>
    <td><select onchange="document.getElementById('editor').contentWindow.document.execCommand('FontSize', false, this.value);"><option></option><option>1</option><option>2</option></select></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('Bold', false, '');">B</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('Italic', false, '');">I</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('Underline', false, '');">U</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('ForeColor', false, '#880000');">Textfarbe</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('BackColor', false, '#000000');">HG-Farbe</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('InsertImage', false, 'http://url.gif');">Grafik</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('JustifyLeft', false, '');">Links</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('JustifyCenter', false, '');">Zentriert</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('JustifyRight', false, '');">Rechts</button></td>
    </tr></table><br>
<p><label>Aktuelles Format: </label><input type="text" id="tf" value="" size="50" maxlength="50"></p>
<p>Hier Text eingeben:</p> 
<iframe id="editor" name="editor" width="400" height="100">test</iframe>
<br/><button onclick="document.getElementById('ta').value=document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML;">Zeige Quelltext</button>
<br/>HTML-Code:
<p><textarea rows="5" name="editor_html" cols="50" id="ta">123</textarea></p>
</body>
</html>

Jetzt sollen aber die Variablen per POST an editor.php gesickt werden:

HTML:

<form method="POST" action="editor" id="form"> 
<input type="hidden" name="input">
</form>
<script language="javascript">
	var form = document.getElementById("form");
	form.input.value = document.getElementById('editor').contentWindow.document;
</script>
</form>

In editor.php bekoomme ich jetzt aber nur die antwort "[object HTMLDocument]"!
Was hab ich falsch gemacht?

Sven Mintel · 12. Mai 2008

Kein Wunder, dass du das bekommst, denn du sendest es ja auch.

Code:

document.getElementById('editor').contentWindow.document;

...das ist ein Objekt vom Typ HTMLDocument.
Textfelder können nur Strings enthalten und keine Objekte....ebensowenig kann man Objekte per POST versenden.
Wenn du den HTML-Quelltext dieses Dokumentes versenden willst, schau mal hier vorbei: http://www.tutorials.de/forum/javascript-ajax/194127-iframe-variable-bergeben.html

MaxivB · 13. Mai 2008

Es Klappt
Danke!

Ich frag mich nur, warum das nicht geht:

Code:

	var form = document.getElementById("form");
	form.input.value = document.getElementById('editor').contentWindow.document.body.innerHTML;
	form.submit();

und:

HTML:

<form action="editor.php" method="post" id="form">
	<input type="hidden" name="input">
	<input type="submit">
</form>

Aber wenn ich den javascript zu einer Funktion mache z.B.: SendEditor
und dann sowas benutze:

HTML:

<button onclick="SendEditor()">Abschicken</button>

oder:

HTML:

<a href="javascript:SendEditor()";>Abschicken</a>

Klappt es!

Sven Mintel · 13. Mai 2008

Wann/wo rufst du denn diesen Teil des Skriptes auf?

Code:

var form = document.getElementById("form");
	form.input.value = document.getElementById('editor').contentWindow.document.body.innerHTML;
	form.submit();

MaxivB · 13. Mai 2008

Hallo!
Im <head> natürlich, da gehöhren die doch hin?! Ich hatte den JavaScript aber auch schon mal unter dem Form aber so, wie ich es jetzt habe funktioniert es ja!:

Code:

<button onclick="SendEditor()">Abschicken</button>

Aber ich hab da noch eine andere Frage: Wie übertrage ich die Variablen vom <textarea> aus zum <iframe>. Adersrum hab ich es ja schon:

Code:

document.getElementById('ta').value=document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML;

Sven Mintel · 13. Mai 2008

MaxivB hat gesagt.:
Hallo!
Im <head> natürlich, da gehöhren die doch hin?! Ich hatte den JavaScript aber auch schon mal unter dem Form aber so, wie ich es jetzt habe funktioniert es ja!:

Code:

<button onclick="SendEditor()">Abschicken</button>

Und worin besteht dann das Problem?

MaxivB hat gesagt.:
Wie übertrage ich die Variablen vom <textarea> aus zum <iframe>. Adersrum hab ich es ja schon:

Code:

document.getElementById('ta').value=document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML;

Drehe es doch einfach mal anders herum

Code:

document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML=document.getElementById('ta').value;

MaxivB · 13. Mai 2008

Klappt, nur wenn man nachdem man es gesendet hat lässt es sich nicht mehr speichern!

So sieht mein Skript im Moment aus:

HTML:

<?php
session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>IFrame im Designmode f&uuml;r IE und Mozilla</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
<!--
function watchFormats() {
 var editorDoc = document.getElementById('editor').contentWindow.document;
 var format = "";
 format += editorDoc.queryCommandValue('fontname') + " ";
 format += editorDoc.queryCommandValue('fontsize') + " ";
 if (editorDoc.queryCommandState('bold')) format += "bold ";
 if (editorDoc.queryCommandState('italic')) format += "italic ";
 if (editorDoc.queryCommandState('underline')) format += "underline ";
 document.getElementById('tf').value = format;
}

function shortCuts(e) {
 if(!e && document.getElementById('editor').contentWindow.event) e = document.getElementById('editor').contentWindow.event;
 if (e.which && e.altKey && e.ctrlKey) {
  if (e.which==98) document.getElementById('editor').contentWindow.document.execCommand('bold', false, null);
  if (e.which==105) document.getElementById('editor').contentWindow.document.execCommand('italic', false, null);
  if (e.which==117) document.getElementById('editor').contentWindow.document.execCommand('underline', false, null);
 } else if (e.keyCode) {
  window.status = "" + e.keyCode + e.ctrlKey + e.altLeft + e.altKey;
 }
}

window.onload = function() {
  var editorDoc = document.getElementById('editor').contentWindow.document;
  editorDoc.designMode="on";

  if(editorDoc.addEventListener) {
    editorDoc.addEventListener('keypress', shortCuts, true);
  } else {
    editorDoc.onkeypress = shortCuts;
  }

  window.setInterval("watchFormats()", 100);
};
function SendEditor(){
	var form = document.getElementById("form");
	form.input.value = document.getElementById('editor').contentWindow.document.body.innerHTML;
	form.submit();
}
//-->
</script>
</head>

<body>

<font color="#006296" face="Verdana" size="4px">Editor</font>
<hr width="100%" size="2" />

    <table border="0" bgcolor="#C0C0C0"><tr>
    <td><select onchange="document.getElementById('editor').contentWindow.document.execCommand('FontName', false, this.value);"><option></option><option>Times New Roman</option><option>Verdana</option></select></td>
    <td><select onchange="document.getElementById('editor').contentWindow.document.execCommand('FontSize', false, this.value);"><option></option><option>1</option><option>2</option></select></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('Bold', false, '');">B</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('Italic', false, '');">I</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('Underline', false, '');">U</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('ForeColor', false, '#880000');">Textfarbe</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('BackColor', false, '#000000');">HG-Farbe</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('InsertImage', false, 'http://url.gif');">Grafik</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('JustifyLeft', false, '');">Links</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('JustifyCenter', false, '');">Zentriert</button></td>
    <td><button onclick="document.getElementById('editor').contentWindow.document.execCommand('JustifyRight', false, '');">Rechts</button></td>
    </tr></table><br>
<p><label>Aktuelles Format: </label><input type="text" id="tf" value="" size="50" maxlength="50"></p>
<p>Hier Text eingeben:</p> 
<iframe id="editor" width="400" height="100"></iframe>
<br/><button onclick="document.getElementById('ta').value=document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML;">Zeige Quelltext</button>
<br/>HTML-Code:
<p><textarea rows="5" name="editor_html" cols="50" id="ta"></textarea></p>
<form action="editor_save.php" method="post" id="form">
	<input type="hidden" name="input">
</form>
<button onclick="document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML=document.getElementById('ta').value;">Umdrehen</button>
<button onclick="SendEditor()">Speichern</button>
</body>
</html>

Edit: Man kann auch nicht mehr den HTML-Code anzeigen lassen!

Variablen aus iframe senden

MaxivB

Sven Mintel

Mitglied

MaxivB

Sven Mintel

Mitglied

MaxivB

Sven Mintel

Mitglied

MaxivB

Neue Beiträge