Nightfire Webworker Archiv - JavaScript

[DHTML-Einstellungen mit Cookies]

Eine Webseite kann beim Laden dynamisch geändert werden, entweder damit sie eine bestimmte Farbe annimmt, oder etwa eine bestimmte Grösse oder Schriftart. Ein nächster Schritt ist die Verwendung von Methoden, die die Eigenschaften der Seite gemäss den Einstellungen des Lesers speichern, und diese dann laden, wenn der Leser zum nächsten Mal auf diese Seite zugreift.

Die folgenden Listings zeigen eine Webseitenanwendung, die ein Konfigurationsfenster öffnet, in dem die Einstellungen für eine Webseite gesetzt und gespeichert werden können.

Listing 1

Dieses Listing enthält die komplette Webseite für das Konfigurationsfenster. Die Seite beinhaltet zwei Schaltflächen. Eine davon schliesst das Fenster, ohne die Einstellungen zu übernehmen, die andere speichert die Einstellungen und schliesst dann das Fenster. Ausserdem enthält sie zwei Dropdownlisten, eine für verschiedene Farbkombinationen, die andere für verschiedene Schriftgrössen. Ausserdem enthält die Seite Optionsfelder, die die Grösse und die Auflösung der Bilder bestimmen.

<HEAD>
<title>test</title>
<STYLE type="text/css">
BODY { background-color: #993333 }
</STYLE>

// set cookies for new formats
function set_cookie() {
   var thefont, thecolors, theimage, theimagesize;
   if (navigator.appName == "Microsoft Internet Explorer") {
thefont = document.forms[0].font;
thecolors = document.forms[0].colors;
theimage = document.forms[0].imageon;
theimagesize = document.forms[0].imagesize;
}
   else {
thefont = document.formdiv.document.forms[0].font;
thecolors = document.formdiv.document.forms[0].colors;
theimage = document.formdiv.document.forms[0].imageon;
theimagesize = document.formdiv.document.forms[0].imagesize;
}
   var thefontvalue = thefont.options[thefont.selectedIndex].value;
   var thecolorsvalue = thecolors.options[thecolors.selectedIndex].value;
   if (theimagesize[0].checked)
theimagesizevalue = 0;
   else
theimagesizevalue = 1;
   if (theimage[0].checked)
theimagevalue = 0;
   else
theimagevalue = 1;
   set_long_cookie("colors", thecolorsvalue);
   set_long_cookie("font", thefontvalue);
   set_long_cookie("images", theimagevalue);
   set_long_cookie("imagesize",theimagesizevalue);
   window.close();
   }

// for Navigator and IE set component values
function setup() {
if (navigator.appName != "Microsoft Internet Explorer") {
document.layers["layerinset"].bgColor=inset_color;
}
else {
document.body.style.backgroundColor=other_color;
document.body.style.color=inset_color;
document.body.style.fontSize=font_size;
document.body.style.fontFamily=font_type;
document.all.item("inset").style.backgroundColor=inset_color;
var thegroup = document.all.tags("H1");
for (i = 0; i < thegroup.length; i++)
thegroup[i].style.fontSize=header_size;
document.all.item("formdiv").style.color=other_color;
document.all.item("formdiv").style.fontSize=font_size;
document.all.item("formdiv").style.fontFamily=font_type;
}
}
//-->
</SCRIPT>

</HEAD>
<BODY onload="setup()">

<DIV id=formdiv
style="position:absolute; left: 5%; top: 5%; width:95%; height:95%;">
<FORM>
<input type=button value="Set Profile" onclick="set_cookie()">
<input type=button value="Close Window" onclick="window.close()">
<p>
<SELECT name="colors">
<OPTION VALUE="ig">ivory/dark green
<OPTION SELECTED VALUE="ir">ivory/rust
<OPTION VALUE="wl">white/black
<OPTION VALUE="wb">white/blue
<OPTION VALUE="ar">aqua/rust
</SELECT>

<SELECT name="font">
<OPTION VALUE="A8">Arial 8/16pt
<OPTION SELECTED VALUE="A10">Arial 10/20pt
<OPTION VALUE="A2">Arial 12/28pt
<OPTION VALUE="C8">Cursive 8/16pt
<OPTION VALUE="C1">Cursive 10/20pt
<OPTION VALUE="C2">Cursive 12/28pt
</SELECT>
<p>
Low Resolution Images: <INPUT TYPE="radio" NAME="imageon" VALUE="Low Res" CHECKED>
High Resolution Images: <INPUT TYPE="radio" NAME="imageon" VALUE="Hi Res">
<p>
Small Images: <INPUT TYPE="radio" NAME="imagesize" VALUE="Small Images">
Large Images: <INPUT TYPE="radio" NAME="imagesize" VALUE="Large Images" CHECKED>

</FORM>
</DIV>
</BODY>

In dieser Anwendung ruft die Funktion set_cookie eine weitere Funktion auf, set_long_cookie, um die Einstellungen in Cookies abzulegen. Diese Cookies sollen 30 Tage lang gültig sein. Das Konfigurationsfenster setzt nicht nur die Cookies für die Einstellungen, sondern verwendet sie auch, um für die Seiten einer Anwendung ein konsistenteres Aussehen zu präsentieren.

Alle seitenspezifischen Einstellungen, die nach dem Laden der Seite und nach dem Anlegen aller Elemente angewendet werden müssen, befinden sich in der Funktion setup. Schichten und DIV-Blöcke stehen dem Script erst nach dem vollständigen Laden der Seite zur Verfügung. Die Seiteneinstellungen für IE und die elementspezifischen Einstellungen für NS sind im setup enthalten. Die Funktionen zum Laden und Setzen der Cookies sowie Code, der Werte ermittelt, die für alle Webseiten verwendet werden, befinden sich in der JavaScript-Datei present.js.

Listing 2

Zeigt den Code aus der Datei present.js. Er wird in alle Webseiten aufgenommen, die die Cookies zur Anzeige verwenden.

// globals
thecolors="";
thefont="";
theimage="";
theimagesize="";
inset_color = "ivory";
other_color = "firebrick";
font_size = "12pt";
header_size = "28pt";
font_type = "Arial";

// find document cookie values
function find_values() {

// find colors
thecolors = get_cookie("colors");
// find font
thefont = get_cookie("font");
// find images
theimage = get_cookie("images");
// find image size
theimagesize = get_cookie("imagesize");

}

// for name, return cookie value
function get_cookie(name) {
   var results = "";
   if (document.cookie.length > 0) {
      var search = name + "=";
      offset = document.cookie.indexOf(search)
      if (offset != -1) { // if cookie exists
          offset += search.length
          // set index of beginning of value
          end = document.cookie.indexOf(";", offset)
          // set index of end of cookie value
          if (end == -1)
              end = document.cookie.length
              results= unescape(document.cookie.substring(offset, end))
              }
      }
   return results;
}

// set 10 minute cookie
function set_short_cookie(name, value) {
   var cookieDate = new Date();
   cookieDate.setTime (cookieDate.getTime() + (1000 * 60 * 10));
   document.cookie = name + "=" + escape (value) +
"; expires=" + cookieDate.toGMTString();
}

// set 30 day cookie
function set_long_cookie(name, value) {
   var cookieDate = new Date();
   cookieDate.setTime (cookieDate.getTime() + (1000 * 60 * 60 * 30));
   document.cookie = name + "=" + escape (value) +
"; expires=" + cookieDate.toGMTString();
}

// pull out values for setting page
// these are attribute settings shared across pages
find_values();
if (thecolors.substring(0,1) == "w")
inset_color="white";
else if (thecolors.substring(0,1) == "a")
inset_color="aqua";

if (thecolors.substring(1,2) == "l")
other_color="black";
else if (thecolors.substring(1,2) == "b")
other_color="blue";
else if (thecolors.substring(1,2) == "g")
other_color="darkgreen";

if (thefont.substring(0,1) == "C")
font_type = "Arial";

if (thefont.substring(1,2) == "8") {
font_size = "8pt";
header_size = "16pt";
}
else if (thefont.substring(1,2) == "1") {
font_size = "10pt";
header_size = "20pt";
}

// for Navigator use JASS to set document formats
if (navigator.appName != "Microsoft Internet Explorer") {
document.tags.BODY.backgroundColor=other_color;
document.ids.inset.backgroundColor=inset_color;
document.tags.BODY.color=other_color;
document.tags.BODY.fontSize=font_size;
document.tags.BODY.fontFamily = font_type;
document.tags.H1.fontSize=header_size;
}

Mehrere globale Variablen nehmen die Werte für die Darstellung auf. Sie werden aktualisiert, sobald die Seite geladen wird. Weil der Navigator keine Veränderung von CSS1-Attributen erlaubt, nachdem die Seite geladen ist, wird der Cookie in diese Datei aufgenommen und, sobald das Script verarbeitet wird, geparst, um mit JASS die Navigator-Formatierung vorzunehmen.
Die Farben und Schriften werden codiert, um sicherzustellen, dass sie innerhalb des Cookies möglichst wenig Platz benötigen. Die Werte werden dann zur Einrichtung der CSS1-Attribute entschlüsselt.

Listing 3

Die Haupt-Webseite, die zeigt, wie Einstellungen für die Seitenanzeige gesetzt oder geladen werden.

<HEAD>

// open profile window
function open_window() {
if (navigator.appName == "Microsoft Internet Explorer")
window.open("profile.htm","Preferences",
"width=450,height=300,menubars=yes,resizable=no,toolbars=yes");
else {
newwin=window.open("profile.htm","Preferences",
"innerWidth=450,innerHeight=300,menubars=yes,resizable=no,toolbars=yes");
}
}

// for Navigator and IE set component values
// and presentations
function setup() {
   if (navigator.appName != "Microsoft Internet Explorer") {
document.layers["layerinset"].bgColor=inset_color;
if (theimagesize == "0") {
         if (theimage == "0")
document.therock2.document.images[0].src="diopsl.jpg";
    else
document.therock2.document.images[0].src="diopsh.jpg";
    document.therock2.visibility="inherit";
    document.thetext.top=170;
    }
else {
    if (theimagesize == "1")
document.therock1.document.images[0].src="diopll.jpg";
    else
document.therock1.document.images[0].src="dioplh.jpg";
    document.therock1.visibility="inherit";
    }
document.thetext.visibility="inherit";
}
   else {
document.body.style.backgroundColor=other_color;
document.body.style.color=inset_color;
document.body.style.fontSize=font_size;
document.body.style.fontFamily=font_type;
document.all.item("inset").style.backgroundColor=inset_color;
document.all.item("thetext").style.color=other_color;
document.all.item("thetext").style.fontSize=font_size;
document.all.item("thetext").style.fontFamily=font_type;
var thegroup = document.all.tags("H1");
for (i = 0; i < thegroup.length; i++)
thegroup[i].style.fontSize=header_size;
if (theimagesize == "0") {
         if (theimage == "0")
document.images[1].src="diopsl.jpg";
    else
document.images[1].src="diopsh.jpg";
    document.all.item("therock2").style.visibility="inherit";
    document.all.item("thetext").style.pixelTop=170;
    }
else {
    if (theimagesize == "1")
document.images[0].src="diopll.jpg";
    else
document.images[0].src="dioplh.jpg";
    document.all.item("therock1").style.visibility="inherit";
    }
document.all.item("thetext").style.visibility="inherit";
}

}

//-->
</SCRIPT>

</HEAD>
<BODY onload="setup()">
<DIV id="inset"
style="position:absolute; left:2%; top:2%; width:98%; height:98%; background-color:ivory">
</DIV>
<LAYER name=layerinset width=90% height=90% top=5% left=5%
bgColor="ivory">
</layer>
<DIV id=formdiv style="position:absolute; left: 2%; top: 2%; width:80; height:50">
<form>
<INPUT type=button value="Save Preferences" onClick="open_window()"><p>
</FORM>
</DIV>
<DIV id="therock1" style="position:absolute; left: 250; top: 60; width: 200; height: 194; visibility:hidden">
<img id=imagelrg width=200 height=194>
</DIV>
<DIV id="therock2" style="position:absolute; left: 250; top: 60; width: 100; height: 94; visibility:hidden">
<img id=imagesm width=100 height=94>
</DIV>
<DIV id=thetext style="position:absolute; left: 250; top: 270; width: 300; visibility:hidden">
Dioptase is from the Greek words <em>dia</em> meaning "through" and <em>optasia</em>
meaning "view". The sample pictured was from the Tsumeb mine, in Nambia, SW Africa.
Dioptase is a Basic copper silicate, CuSiO<sub>2</sub>(OH)<sub>2</sub>.<br>
Hardness: 5<br>
Cleavage: Perfect in three directions<br>
Specific Gravity: 3.3 to 3.4<p>
</DIV>
</BODY>

Navigator und InternetExplorer verwenden unterschiedliche Attribute für die window-open-Methode. Sie werden verwendet, um ein kleines Konfigurationsfenster mit einer minimalen Ausstattung zu erzeugen. Basierend auf diesen Einstellungen werden unterschiedliche Seitenelemente angezeigt. der Navigator erlaubt nicht, dass die Bildgrösse nach dem Laden der Seite geändert wird, sonst bräuchte man dazu nur eine Schicht (layer).