Variablen aus iframe senden

  • Themenstarter Themenstarter MaxivB
  • Beginndatum Beginndatum
M

MaxivB

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?
 
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!
 
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();
 
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;
 
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>
Zum Vergrößern anklicken....
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;
Zum Vergrößern anklicken....

Drehe es doch einfach mal anders herum ;)

Code: 
document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML=document.getElementById('ta').value;
 
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!
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück