✔ Document.write

messmar

messmar

Erfahrenes Mitglied
Hi,

ich will anhand Document.write() innerhalb der selben File und genau an die selben Stelle einen Div schreiben lassen.

Das ganze wird aber nicht direkt geschrieben, sondern erst wenn die Funktion aufgerufen wird.

Das Problem ist aber wenn ich die Funktion aufrufe, wird eine neue Seite erzeugt und darin bekomme ich den Div mit dem Inhalt.

Wie kann man das lösen so, dass der Div genau in die selben Seite und an die gewünschte Stelle geschrieben wir.

Ist das mittles innerHtml lösbar und was muss man dazu einfügen oder coden, damit es an die gleichen Stelle geschrieben wird.

Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
     <head><title>Untitled</title></head>
     <body>
      <script type="text/javascript" language="JavaScript">
    function writeDivError() {
     document.write("<div id='errorBackground' style='filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; position:absolute; top:14px; width:766px; height:920px; z-index:300; background-color: green;'></div>");
     document.write("<div id='errorMessage' style='position:absolute; margin:264px 0 0 174px; width:450px; height:60px; z-index:302; background-color: #FF0000;'>");
     document.write("<input type='Submit' value='ok' name='okay' class='errorMessageOkay'>");
     document.write("</div>");
    }
   </script>
   <table border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ipsum. Morbi at neque
      sit amet nibh ultricies commodo. Maecenas sapien. Class aptent taciti sociosqu ad litora
      torquent per conubia nostra, per inceptos hymenaeos.
     </td>
    </tr>
    <tr><td><input onclick="writeDivError();" type="image" src="img/login.gif" alt="schnell einloggen" /></td></tr>

   </table>
 </body>
</html>

Vielen Dank und Gruß
Messmar
 
Soweit mein JS Verständniss geht könntest du einen Div-Layer mit Text füllen mit so einem write() und nicht den Code nachträglich so einfügen...

Aber warum willst du das überhaupt so machen? Füg den Layer doch gleich ein und setzt ihn auf visibility=hidden und beim anklicken wird er sichtbar...?
 
Der Punkt ist, dass die Seite ein Formular schickt und sie wird, falls es in Form einen Fehler gibt neu geladen und die Formular-Felder dem User wieder dargestellt.

Und da Der Div dann auf die Seite Standardmäßig auf Hidden gesetzt ist, wird die Fehlermeldung nicht sehen und verschwindet der Div unmittelbar nach der neuladen der Seite:

Code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
	<head>
		<title>Untitled</title>
		<script>
<!--

function hideDiv(divName) {
  //alert("!" + divName);
  if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById(divName).style.display = 'none';
  }
  else {
    if (document.layers) { // Netscape 4
      document.divName.display = 'none';
    }
    else { // IE 4
      document.all.divName.style.display = 'none';
    }
  }
}

function showDiv(divName) {
  //alert("" + divName);
  if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById(divName).style.display = '';
  }
  else {
    if (document.layers) { // Netscape 4
      document.divName.display = '';
    }
    else { // IE 4
      document.all.divName.style.display = '';
    }
  }
}
//-->
</script>
		<style>
		 div#errorBackground {
 	filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; 
	position:absolute; 
	left:250px; _left:auto; 
	top:0px; 
	width:768px; height:1034px; 
	z-index:300; 
	background-color: green;
 }
 
 div#errorMessage {
 	position:absolute; 
	margin:271px 0 0 428px; 
	_margin:261px 0 0 174px; 
	width:450px; height:60px; 
	z-index:302; 
	background-color: #FF0000;
 }
 
 input.errorMessageOkay {
 	cursor:pointer; 
	margin:25px 10px 0 0; 
	_margin: 25px 180px 0 0; 
	background:transparent; 
	border:2px solid #113388; 
	width:100px;
 }
		</style>
	</head>
	
	<body>
		<div id="errorBackground" style="display:none;"></div>
		<div id="errorMessage" style="display:none;">
			<input onclick="javascript:hideDiv('errorBackground');hideDiv('errorMessage');" type="Submit" value="ok" name="okay" class="errorMessageOkay">
		</div>
			<form action="#" method="post">
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ipsum. Morbi at neque 
						sit amet nibh ultricies commodo. Maecenas sapien. Class aptent taciti sociosqu ad litora 
						torquent per conubia nostra, per inceptos hymenaeos.
					</td>
				</tr>
				<tr><td><input onclick="showDiv('errorBackground');showDiv('errorMessage');" type="image" src="img/login.gif" alt="schnell einloggen" /></td></tr>
				
			</table>
			</form>
	</body>
	
</html>

Gruß
Messmar
 
document.write() kann nur ausgeführt werden beovr die Seite vollständig geladen ist. Wird es danach ausgeführt öffnet sich immer ein leeres Dokument. Das lässt sich nicht umgehen und hat auch nichts mit dem Abschicken des Formulares zu tun.

Neue Inhalte fügt man nach dem lagen üblicherweise über die appenChild()-Methode ein
 
Zuletzt bearbeitet:
Ja, das ist richtig. Auf die Idee bin ich auch gekommen, aber es fehlt mir den Befehl, wie ich den Div genau oder anders gesagt direkt nach dem Body-Tag einfüge. Da der Div genau da platziert sein muss.

Ich habe versucht indem ich dem Body eine ID gab und ansparch, aber es funktonierte irgendwie nicht. Hast du eine Idee´?

Danke dir und Gruß
Messmar
 
Ich hätte zwei, die erste wäre Dom-Konform, ich habe aber keine Ahnung, ob sie auch funktioniert:
Javascript: 
var div1 = document.createElement('div'),
    div2 = document.createElement('div'),
    input = dicument.createElement('input');
div1.setAttribute('id','errorBackground');
div1.setAttribute('style','....')
.... usw. ....
input.setAttribute('type','submit');

div2.appendChild(input)

document.getElementsByTagName('body')[0].appendChild(div2);
document.getElementsByTagName('body')[0].appendChild(div1);

Die zweite ist etwas wischi-wasche, aber funktioniert dafür sicher, vorausgesetzt ich habe mich nicht vertippt und das könntest du selbst ausbessern:
Javascript: 
document.body.innerHTML =
    "<div id='errorBackground' style='filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; position:absolute; top:14px; width:766px; height:920px; z-index:300; background-color: green;'></div>"+
    "<div id='errorMessage' style='position:absolute; margin:264px 0 0 174px; width:450px; height:60px; z-index:302; background-color: #FF0000;'>"+
    "<input type='Submit' value='ok' name='okay' class='errorMessageOkay'>"+ 
    "</div>"+
    document.body.innerHTML;
Du solltest dich abe rmehr mit den absoluten Grundlagen beschäftigen denn:
http://www.tutorials.de/forum/javascript/215197-keine-ahnung-von-javascript.html hat gesagt.:
Sinn dieses Boards ist es nicht, dass User mit Ahnung von einer bestimmten Sprache für User ohne Ahnung eine Wunschliste abarbeiten.
Ebensowenig ist es Sinn des Boards, das Basiswissen einer bestimmten Sprache zu vermitteln.
Dafür gibt es mannigfaltige Adressen im Web, die sich dies zur Aufgabe gemacht haben und sehr gut tun.
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Ja die zweite Variante funktioniert, allerdings wenn ich folgenden EventHandler in dem Input-Feld in dem Div (errorMessage):
HTML: 
 [...]

"<input onclick="hideDiv('errorBackground'); hideDiv('errorMessage');" type='Submit' value='ok' name='okay' class='errorMessageOkay'>"+
 [...]

dann erhlate ich Syntax-Fehler, obwohl das ganze richtig ist.

Könntest d uevtl. weiterhelfen?

Danke und Gruß
Messmar
 
messmar hat gesagt.:
dann [sic] erhlate ich Syntax-Fehler, obwohl das ganze [sic] richtig ist.
Zum Vergrößern anklicken....
Wenn du Syntax-Fehler erhälst kann nicht "das Ganze richtig" sein. ;-]

Du bist mit den Anführungszeichen durcheinander gekommen. Schau dir alle nochmal genau an und denk mal nach, wie ein Computer das vestehen muss, was du da geschrieben hast...;)

Kleiner Tipp: Die Farbgebung in der Box hier mit deinem Code könnte dir auch weiterhelfen.
 
Ok, verstanden ;-)

so geht's :
HTML: 
"<input onclick=hideDiv('errorBackground'); hideDiv('errorMessage'); type='Submit' value='ok' name='okay' class='errorMessageOkay'>"+

Aber noch was ;-( der Button innerhab errorMessage-Div schließt den errorBackground-Div, aber sich selbst nicht.

Logischer Fehler evtl.?

Danke und Gruß
Messmar
 
Manche Browser stellen Elemente ohne Inhalt nicht da. Ist nur eine Vermutung, aber könnte daran liegen. Versuch mal ein &nbsp; zwischen Start- und Endtag zu setzen
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück