Wenn man clientseitig per Javascript HTML erzeugen möchte, so muss man die gewünschte Ausgabe mit Hilfe der Javascript-Anweisungen write() oder writeln() ausgeben.
Für komplexere Ausgaben wird das sehr schnell unübersichtlich, da man ja Anführungen etc. richtig maskieren muss. Das erledigt folgendes Formular deshalb automatisch.
Der Javascript-Code kann dann einfach per Copy+Paste übernommen werden. Nebenbei ist es auch ein Beispiel für ein sog. Affenformular.
<?php
function MakeJsWriteln($s)
{
// escape backslashes
$s = str_replace('\\','\\\\', $s);
// escape single quotes
$s = str_replace('\'','\\\'', $s);
// anhand der newline Zeichen zerlegen
$s = explode("\n", $s);
// Zeilen trimmen, also unnötigen whitespace entfernen
$s = array_map('trim', $s);
// leere Zeilen entfernen
$s = array_filter($s);
// aus array eine Folge von Javascript writeln-Anweisungen erzeugen
$js = 'document.writeln(\''. join('\');'."\n".'document.writeln(\'',$s).'\');';
// schliessendes script tag verbergen
$js = str_replace ('</script>', "</scr'+'ipt>", $js);
return $js;
}
if (!empty($_POST['theValue'])){
$_POST['theValue'] = get_magic_quotes_gpc()
? stripslashes($_POST['theValue'])
: $_POST['theValue'];
$jsw = MakeJsWriteln($_POST['theValue']);
$data = htmlentities($jsw);
if (!isset($_POST['doitnow'])) {
$jsw = '';
}else{
$jsw = '<script type="text/javascript">'."\n".$jsw."\n</script>";
}
echo <<< JSDATA
<pre style="background-color:#e1e1e1;padding:20px;border:2px solid #000;">
<script type="text/javascript">
<!--
$data
//-->
</script>
</pre>
$jsw
JSDATA;
}
// textarea content
$theValue = isset($_POST['theValue'])
? htmlentities($_POST['theValue'])
: '';
// checkbox checked?
$ischecked = isset($_POST['doitnow'])
? ' checked="checked" '
: '';
echo <<< EOT
<form action="{$_SERVER['PHP_SELF']}" method="post" enctype="multipart/form-data">
<textarea style="display:block;" cols="50" rows="10" name="theValue">$theValue</textarea>
<input type="checkbox" name="doitnow" value="1" id="cb1" $ischecked>
<label for="cb1">Als Javascript auf Antwortseite einbauen</label>
<input style="display:block;" type="submit" value="Snippet hochladen">
</form>
EOT;
?>
