Close-Button nur bei aktivem JavaScript

D

Drogist

Erfahrenes Mitglied
Hallo,

ich bin nun schon geraume Zeit mit einem Problem beschäftigt, zu dem ich (wahrscheinlich wegen integrierter Scheuklappen ;)) keine Lösung finde.

Das Problem: Ich rufe ein Kind-Fenster auf. Bei aktivem JS ist das ein PopUp, sonst ein normales getrenntes Fenster/Tab. In diesem Fenster soll entweder ein Text wegen des Schließens stehen (<noscript>) oder bei aktiviertem JS ein Button die Arbeit erledigen. Vom Prinzip sieht das Kind-Fenster so aus:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Seitentitel</title>
	<script type="text/javascript"></script>
</head>

<body>
<p>Dieses ist ein KIND - Fenster oder Popup</p>
<p>Alles in XHTML</p>

<noscript>
	Schließen Sie das Fenster mit der Schaltfläche Ihres Browsers
</noscript>
	
   <!--
   Dieser Button soll (natürlich) nur bei aktivem JS gezeigt werden
   -->
   <input name="CloseButton" type="button" value="Dieses Fenster schlie&szlig;en" />

<script>
/*	auch das nutzt (natürlich) nichts ...
*/	document.write('<input name="CloseButton" type="button" value="Dieses Fenster schlie&szlig;en" \/>');
	CloseButton onClick="self.close";
</script>
</body>
</html>
Ich glaube, dass document.write eh nicht das Gelbe vom Ei ist, wegen XHTML.
Bleibt noch der Hinweis, dass im "Original" eine externe *.js existiert. Und dieses ist mindestens die 20. Version, die buggy ist und nicht t ...

Und nun die 100.000$-Frage ;): Wie mache ich es richtig?
 
Moin,

da gibt es diverse Möglichkeiten, z.B. das erzeugen und einhängen des Buttons per createElement()....appendChild()


Ich bevorzuge da eher folgende Variante, welche den JS-Code sehr klein hält und das per CSS regelt:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-06-01" />
<title>Test</title>
<script type="text/javascript">
<!--
document.getElementsByTagName('html')[0].className='scripted';
//-->
</script>
<style type="text/css">
<!--
html .ifScripted.show{
  display:none;
}
html.scripted .ifScripted.show.inline{
  display:inline;
}
html.scripted .ifScripted.show.block{
  display:block;
}
html.scripted .ifScripted.hide{
  display:none;
}
-->
</style>
</head>
<body>
<input class="ifScripted show inline" type="button" value="mich gibts nur bei akiviertem JS">
<span class="ifScripted hide">mich sieht man nicht mit aktiviertem JS</span>
</body>
</html>

Das <html>-Element erhält per JS nen Klassennamen(scripted)
Dadurch hat man einen prima Selektor, mit dem man in CSS unterschiedlich auf JS an/aus reagieren kann.

Ausserdem kann man das komplett extern auslagern, und muss nicht wie bei den erwähnten DOM-Methoden warten, bis ein bestimmter Teil des Dokumentes geladen ist...denn das <html>-Element ist garantiert überall bekannt :)
 
Hallo Sven Mintel,

die Idee, CSS zum Ein- Ausblenden zu verwenden, finde ich irgendwie genial ... Und die Antwort war ja richtig schnell da! Mein Dank dafür!

So weit, so gut. Nur frage ich mich, wie weise ich dem Button nun noch beispielsweise ein self.close oder was auch immer zu? Im Moment bin ich da ein wenig "blind" (blond?) ...
 
Hallo Sven,

dein Beitrag ist ja Beerware und jch habe natürlich auch ein großes Bier auf dein Wohl getrunken, wie es ja auch "gefordert" ist ;-) Aber es war wohl eins zu viel.

Eigentlich wollte ich ja nur "Autsch!" als Antwort schreiben, denn ich hatte es in dieser Form zumindest so ähnlich probiert. Aber offensichtlich habe ich da irgendwie eine Blockade ... :mad: So ganz blöd bin ich beim Coden (VB, VBA) ja nicht, aber hier wollen meine Finger wohl immer etwas anderes, als sie eigentlich sollen. Eigentlich sollte das doch hinhauen:
HTML: 
<head>
<meta http-equiv="Content-Type" content="text/html;
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-06-01" />
<title>Test</title>
<script type="text/javascript">
<!--
document.getElementsByTagName('html')[0].className='scripted';
//-->
</script>
<style type="text/css">
<!--
html .ifScripted.show{
  display:none;
}
html.scripted .ifScripted.show.inline{
  display:inline;
}
html.scripted .ifScripted.show.block{
  display:block;
}
html.scripted .ifScripted.hide{
  display:none;
}
-->
</style>
</head>

<body>
<input type="button" onclick="self.close()" value="mich gibt es nur bei akiviertem JS" class="ifScripted show inline" >
<span class="ifScripted hide">mich sieht man nicht mit aktiviertem JS</span>
</body>
</html>
Ich habe nur im Body die Zeile <input type="button" ... geändert. Nur ... Das Fenster bleibt auf. WARUM NUR? Natürlich wirst du mir helfen können und ich werde mich wohl voller Scham in die Ecke stellen :). Jetzt schon einmal mein Dank und ich gelobe Besserung, denn normalerweise komme ich mit einigem Experimentieren weiter. Aber irgendwie liegt mir die "Sprache" JS nicht. Vielleicht fehlt mir auch die richtige Literatur dazu. SelfHTML ist halt "nur" ein phantastisches Lexikon, aber zum Lernen für mich nicht zu gebrauchen.

Und danach werde ich versuchen, den CSS-Teil auszulagern und einen entsprechenden Link (<link href="my.css" rel="stylesheet" type="text/css" />) einfügen, da ich die ganze Sache recht oft einsetzen werde.

[EDIT] Hatte eben einen "Geistesblitz" und probierte das einmal im IE (7) statt im FF (3.0.10). Wieso geht das Da? Und nicht im FF? Habe ich da zu viel an den Einstellungen gedreht? Also, Script ein/aus geht natürlich, nur self.close() mag der Fuchs nicht. [/Edit]
 
Zuletzt bearbeitet:
Moin,


und danke für die Umsetzung der Lizenzbestimmungen :-)

Daran lag es aber nicht, dass es nicht geht.
Per close() kann man nur Fenster öffnen, welche per open() geöffnet wurden, hätte ich vielleicht dazuschreiben sollen.:-(
Dass der IE das trotzdem macht, würde ich "Feature" nennen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück