Java-Scripte

Zurück zum Script-DB Eingang

http://project-icarus.de/erleuchtet/Script-DB/index.htm

Browser

LocalStorage

Seit HTML5 werden Cookies durch den lokalen Datenspeicher "localStorage" abgelöst.

Diese läßt sich mit JavaScript auslesen und bearbeiten:

1) Feststellen, wieviele Einträge sich in für diese Website in der Datenbank befinden:

var count = window.localStorage.length;
alert(count);

2) Einzelne Einträge für diese Website anzeigen:

for(var y = 0; y < count; y++)
{
var Zuordnung = window.localStorage.key(y);
alert(Zuordnung);
var Inhalt = window.localStorage.getItem(Zuordnung);
alert(Inhalt);
}

4) Eintrag hinzufügen:

window.localStorage.setItem(Zuordnung, Inhalt);

5) Eintrag Löschen:

window.localStorage.removeItem(Zuordnung);
window.localStorage.removeItem(Inhalt);

Als Anwendungsbeispiel:

http://project-icarus.de/kalender/js-kalender_frame.html

Browser-Abfragen

Browserweichen

// ----------------------

// Check browser

// NS4 = Netscape 4x
// IE5 = MSIE ab 4
// OPR = Opera 5, 7
// MZL = Mozilla (nur)
// NEU = Netscape ab 6, Mozilla, MSIE ab 5, Konqueror 3 (Linux), Opera 7

// 'Layers' NUR in NS 4
// IE5 prüft auch AOL 4 / 6
// Opera 7 oft anders als Opera 5/6(~MSIE4)

// ----------------------

var NS4 =var IE5 = (document.all);
var OPR = (window.opera);
var MZL = ((document.getElementById) && (!document.all) && (document.documentElement));
var NEU = (document.getElementById)

// ----------------------

z.B.

if (document.getElementById)
{
alert('Alles klar');
}
else
{
alert('Ihr Browser unterstützt diese Funktion leider nicht');
}
}

____________________

ODER:

<script language=javascript>
<!--
netscape = (document.layers) ? 1:0
goodIE = (document.all) ? 1:0
MZL = ((document.getElementById) && (!document.all)) ? 1:0

____________________

Achtung: Inzwischen veraltet, insbesondere nachdem Microsoft Internet Explorer Version 11,
der 'document.all' nicht mehr erkennt.

Einfacher ist es, die fragliche Funktion selbst abzu fragen - beispielsweise, wie oben gezeigt,

if (document.getElementById)

-> wenn sie geht, geht sie.

Ansonsten hier (in JavaScript und PHP)

http://ppfeufer.de/browserweiche/

oder hier:

http://rafael.adm.br/css_browser_selector/

http://raw.githubusercontent.com/rafaelp/css_browser_selector/master/css_browser_selector.js

Netscape - Abfrage

Netscape - Abfrage und Frame-Ausstieg

<script>  </script>

------------------------------

Netscape - Abfrage II

<script language="javascript" type="text/javascript">

</script>

---------------------------

Umgekehrt ein Skript einfach nur durch skriptgeschriebene Kommentare () auskommentieren zu lassen nutzt nichts, wenn der Aufruf die Form "Script SRC=XYZ" hat.

<P>

<script language="javascript" type="text/javascript">

</script>

<P>
Ich bin kein Netscape 4.x!

<P>

<script language="javascript" type="text/javascript">

</script>

<script language="JavaScript" type="text/javascript" src="">http://123.456.com/blahblah.js">


<P>

<script language="javascript" type="text/javascript">

</script>

Netscape Fenstergröße

Netscape- Fenstergröße- Abfrage

Macromedia standard Script zur Netscape- Fenstergröße- Abfrage:

<script language="JavaScript">

</script>

Danach muß sich dann die Bildgröße richten, evtl. über document.write.

Achtung: Bei allen Bilder, die mit JavaScript in Seiten eingebunden werden,
müssen immer Angaben zu Height und Width vorhanden sein!

Ansonsten kann es zu Problemen mit dem Script kommen.

Fensternamen online festlegen und feststellen

Neuen Fensternamen online festlegen und feststellen

Stefan Münz 8

<html><head><title>Test</title>
<script type="text/javascript">

</script>
</head><body>
<a href="javascript:Fenstername()">Name des Fensters</a>
</body></html>

Vollbildzwang

Browser-Fenster Bildschirmfüllend darstellen

<script language ="JavaScript">

self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight);

</script>

Außerdem:

var Bildschirmbreite = screen.width;

var Bildschirmhoehe = screen.height;

var Farbtiefe = screen.pixelDepth;

Internet Explorer Favoriten

Internet Explorer - Abfrage: Zu Favoriten hinzufügen

[NetMechanic Home]

JavaScript Tip: Tools Encourage Repeat Visitors

Keep visitors coming back to your Web site by adding a
bookmark link with this simple JavaScript. Visitors browsing with Internet Explorer can add your Web page to their Favorites section
with just one click.

This simple JavaScript code will work in Internet Explorer.

Place this section
inside the <HEAD> section of your page:

<Script Language = "Javascript" Type="Text/Javascript">


</script>

In this script, you're declaring two variables and using them in a function.

* The first variable, urlAddress, ist the address of your Web page.
* The second, pageName, is the descriptive text that you want visitors to see when they refer to their Favorites list.
* Netscape Navigator doesn't support the window.external property, so we check first to see if the visitor is using a browser that does. If their browser doesn't support the function, they see an alert box instead.
* The function, addToFavorites, tells the browser to save both variables so the visitor can add the information to their Favorites section.
* Remember to replace the variable names with your own page URL and description.
*
Use The Function In The BODY Section

Once you have your function set up, you can refer to it anywhere in the
<BODY> section of your document. The most obvious place to put it is a few
lines before the content of your document.

Reference the function inside a form to get a different look:

Bookmark this page! <INPUT TYPE="button" VALUE="Add Favorite" onClick="addToFavorites()">

Anzeige und Prüfung

Zeichen zählen

Ein bestimmtes Zeichen zählen

Manchmal will man wissen, nicht ob, sondern wie oft ein bestimmtes Zeichen in einem Text vorkommt.

Das folgende Skript zählt die Zahl der Teilstücke, in die eine Zeichenkette an Hand des gesuchten Zeichens zerlegt werden kann und stellt so fest, wie oft es in der Zeichenkette vorhanden ist. Hier: Das Anführungszeichen

var Zeichen = '\"';
var quotes = (((document.forms.Suche.SuchTextEingabe.value.split(Zeichen)).length)-1);
alert (quotes);

// Prüft, ob eine gerade Anzahl vorliegt:
if (!(quotes % 2 == 0))
{
alert ('Bitte die Wortkette mit " abschließen!');
return false;
}

else
{alert ('OK');}

Gerade oder ungerade

JavaScipt Abfrage, ob eine Zahl gerade oder ungerade ist

if(y % 2 == 0) // gerade, inkl. der Null
if(y % 2 != 0) // un- gerade

Die ersten zehn ungeraden Quadratzahlen ab Basis 0:

<script type="text/javascript">

var z = 5; // Zeilenzahl
var i = 0; // Basis Anfang
var x = 0; // Zähler Anfang

while (x < z)
{
y=(i*i);
if(y % 2 != 0) // un- gerade
{
document.write("<br>" + i + "*"+ i +" = " + y);
x = x + 1;
}
// i = i + 1;
i++;
}

</script>

Ergibt:

1*1 = 1
3*3 = 9
5*5 = 25
7*7 = 49
9*9 = 81

----

<script type="text/javascript">

document.write("0-10: Gerade oder Ungerade?<P>");

for (var i = 0; i < 11; i++)
if (i % 2 == 0) // == IF GERADE! incl. Resultat 0!
{
document.write(i);
document.write(" - ");
}

document.write("<P>");

for (var i = 0; i < 11; i++)
if (i % 2 != 0) // == IF UN-GERADE! wg. anfang 0
{
document.write(i);
document.write(" - ");
}

</script>

Ergibt:

0-10: Gerade oder Ungerade?
0 - 2 - 4 - 6 - 8 - 10 -
1 - 3 - 5 - 7 - 9 -

Zahl oder nicht Zahl

Schreibt man die Anweisung 1+1, dann ist das Ergebnis entweder 2 oder 11, je nachdem, ob JavaScript die 1 als Zahl (Number) oder Zeichen (String) interpretiert.

var Eins = "1";
// var Eins = "01";
// var Eins = 1;

Die Variable sicher als Nummer erkennen:

PlusEins= Number(Eins)+1;
// oder
PlusEins= parseInt(Eins)+1;

// Beseitigt als Rechenoperation übrigens auch eine führende Null

Und das Ergebnis wieder in einen String (eine Zeichenkette) konvertieren:

PlusEins= PlusEins.toString();

// Achtung: Jede Rechenoperation in JavaScript prüft, ob die Faktoren Zahlen sind, und kann deshalb zur Prüfung benutzt werden, bzw. um diese umzuwandeln.

--------

Prüft, ob die Eingabe eine Zahl ist oder nicht:

<html>
<head>
<title>check</title>
</head>
<script language="JavaScript">
function pruefen(){
Eingabe=document.test.zahl.value;
Angabe=Number(Eingabe);
if(isNaN(Angabe))
{
alert(Eingabe + " ist keine Zahl!"); ;
}
else { alert(Eingabe + " ist eine Zahl!");
}
}
</script>
<body>
<form action="" name="test" id="test">
<input type="text" name="zahl" value="123">
<input type=button value=Test Onclick="pruefen();">
</form>
</body>
</html>

Zeichen trimmen

Auch in JavaScript lassen sich Zeichenfolgen trimmen - d.h. Leerzeichen am Anfang und Ende beseitigen:

function trim(str)
{
return str.replace(/^\s+|\s+$/g,"");
}

var Getrimmt = trim(Zeichenfolge);

Quelle: Netz

Online oder Offline

Prüft, ob die Seite online oder offline geladen wurde:

<script language="javascript" type="text/javascript">

</script>

</HEAD>

OnmouseOver Alert

OnmouseOver Alert - Fenster

<br>
<font face="Times">For additional information about the Council contact:
<b><br>
<a href="#" false;" onmouseover="alert('You do know this page is a joke? Sure you do!');" onclick=";return">United States Council on Problem Vacationing</a></b></font></p>

OnClick Alert

Verhindert falsches Herunterladen bzw. das Öffnen im Browser

<UL>

<LI><A HREF="TEXT2.txt" onMouseOver="window.status='Bitte mit rechter Maustaste aus dem Kontextmenue herunterladen'; return true" onMouseOut="window.status=''; return true" onClick="alert ('Zum Herunterladen bitte die rechte Maustaste verwenden'); return false">Text-File</A>

</UL>

Bildname und Text anzeigen

Wie lassen sich zu einem Bild automatisch Informationen anzeigen, zum Beispiel der Name des Bildes und / oder ein erläuternder Text? Hier zum Beispiel in einer Diaschau. Die Textausgaben lassen sich mit CSS dem Layout unsichtbar anpassen.

<HTML>
<HEAD>

<SCRIPT language="JavaScript">

var DiaschauSpeed = 5000

var Pic = new Array()

Pic[0] = 'image_1a.gif'
Pic[1] = 'image_2a.gif'
Pic[2] = 'image_3a.gif'
Pic[3] = 'image_1a.gif'

var Btxt = new Array()

Btxt[0] = 'Erstes Bild'
Btxt[1] = 'Zweites Bild'
Btxt[2] = 'Drittes Bild'
Btxt[3] = 'Schleife'

var t
var j = 0
var p = Pic.length
var preLoad = new Array()

// alert (p);
for (i = 0; i < p; i++)
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}

function runDiaschau()
{
if (j < 0) j=(p-1);
if (j > p-1) j=0;
document.images.Diaschau.src = preLoad[j].src;
j = j + 1;
t = setTimeout('runDiaschau()', DiaschauSpeed);
}

function TextAnzeigen ()
{
if (j < 1) j=p-1;
var txt = j + ": " + Btxt[j-1];

window.document.Anzeige.Text.value = txt;
window.setTimeout("TextAnzeigen()", 550);
}

function BildNrAnzeigen ()
{
if (j < 1) j=p-1;
var bld = "Bild " + j;

window.document.BildNr.Bild.value = bld;
window.setTimeout("BildNrAnzeigen()", 550);
}

function ReRunDiaschau()
{
DiaschauSpeed = 5000;
}

function runBck()
{
DiaschauSpeed = 30000;
j = j - 1;
document.images.Diaschau.src = preLoad[j-1].src;
t = setTimeout('ReRunDiaschau()', DiaschauSpeed);
}

function runFwd()
{
DiaschauSpeed = 30000
if (j > p-1) j=0;
j = j + 1;
document.images.Diaschau.src = preLoad[j-1].src;
t = setTimeout('ReRunDiaschau()', DiaschauSpeed);
}

//-->
</SCRIPT>

<TITLE>Diaschau</TITLE>

</HEAD>

<BODY bgcolor="#C0C0C0" onload="runDiaschau(); window.setTimeout('TextAnzeigen()', 550); window.setTimeout('BildNrAnzeigen()', 550);">

<P>

<HR>
<TABLE ALIGN=CENTER>
<TR>
<TD ALIGN=CENTER VALIGN=BOTTOM><IMG SRC="image_1.gif" NAME='Diaschau'></TD>
</TR>
</TABLE>
<P>
<HR>
<TABLE ALIGN=CENTER width="" border="1" cellspacing="4" cellpadding="4" bgcolor="#408080">
<TR>
<TD><form name="Anzeige" action=""> TEXT:
<input type="text" size="20" name="Text" value="Einsatz 00:00">
</form></TD>

<TD ALIGN=CENTER><A HREF="javascript:runBck();" onmouseover="window.status=' Eine zurück ';return true;" onmouseout="window.status=''"; return true;" ><IMG SRC="back.gif" ALT=" Eine zurück " Title=" Eine zurück "></A></TD>
<TD align="center">
</TD>
<TD ALIGN=CENTER><A HREF="javascript:runFwd();" onmouseover="window.status=' Eine vorwärts ';return true;" onmouseout="window.status=''"; ><IMG SRC="next.gif" ALT=" Eine vorwärts " Title=" Eine vorwärts "></A></TD>
<TD><form name="BildNr" action=""> BILD:
<input type="text" size="20" name="Bild" value="Einsatz 00:00">
</form></TD>

</TR>
</TABLE>
</CENTER>
</BODY></HTML>

Spalten in Javascript

Automatische Spalten in Javascript

- Es heißt zwar, noch gäbe es keine Möglichkeit, HTML- Inhalte automatisch in Spalten darzustellen.
- Unter bestimmten Umständen geht es aber doch:

<HTML>
<HEAD>

<script type="text/javascript" language="JavaScript">

</script>

</HEAD>
<BODY >
<P>

Mit dem alten, viel geschmähten Tabellen- Layout lassen Serien- Inhalte,
die als Array vorliegen, mit Hilfe von JavaScript automatisch in Spalten darstellen -
entweder mit einer festen Spaltenzahl -

oder mit variabler Spaltenzahl in Abhängigleit von der jeweiligen Fensterbreite:

<P>

<SCRIPT language="JavaScript" type="text/javascript">

</SCRIPT>

<P>

Das Ergebnis läßt sich, da in JavaScript, nicht speichern. Es eignet sich gut für die Darstellung temporärer Ergebnisse.

<P>

Für ein dauerhaftes Ergebniss ließe sich wohl ein ähnliches Script in PHP schreiben.

<P>

</BODY>
</HTML>

Referrer

referrer (Herkunft)

Speichert die URL, von der aus die aktuelle Seite aufgerufen wurde (geht also in der "history" des Browser genau einen Eintrag zurück). Z.B. Sie kommen von:

Und auch hier der passende Code:

<script language="JavaScript" type="text/javascript">

</script>

Dateiname

(Namen der Datei)

Datei-Namen ausgeben:

<script language="JavaScript" type="text/javascript">

</script>

Fenstername

name (Namen des Fensters)

Fenster-Namen ausgeben:

<script language="JavaScript" type="text/javascript">

</script>

Adresse

URL oder location (Adresse)

Speichert (immer nur) die vollständige (!!!) Adresse des aktuellen Dokuments.

Ähnlich: URL, Pathname, href

<script language="JavaScript" type="text/javascript">

</script>

Titel

title (Titel der Datei)

Hier wird der Titel der HTML-Datei rein gespeichert. So haben Sie bspw. die Möglichkeit, diesen dynamisch zu ändern oder einfach nur auszugeben.

<script language="JavaScript" type="text/javascript">

</script>

(aber nur, wenn der Titel im Dokument VOR dem Script steht!)

---

Seiten-Titel per Default in die Statuszeile:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</HEAD>

Alert

Alert - Fenster

<A HREF="1.htm" onClick="alert (' Hier geht's \n zur ersten Seite '); return true;">

* Wichtig: ' Text ' in ' '

* return false blockiert die Weiterleitung / beendet die Aktion (hier: Verweis wird nicht aufgerufen).

* \n = Zeilenumbruch

Auch: <SCRIPT LANGUAGE="Javascript">alert ('LALALA')</SCRIPT>

Zuletzt Aktualisiert

'zuletzt aktualisiert' Anzeige:

<body>
<script language="Javascript">
document.write( "Diese Seite wurde " + document.lastModified + " zuletzt aktualisiert.");
</script>
</body>

document.writeln() bewirkt einen Zeilenumbruch nach der Zeile:

document.writeln( "Diese Seite wurde " + document.lastModified + " zuletzt aktualisiert.");

Oder eine Leerzeile:
document.writeln();

lastModified (letzte Änderung)

----

Oder:

<script language="JavaScript" type="text/javascript">

</script>

Die Ausgabe sieht ungefähr so aus: Letztes Update: ????????????????????

Allerdings gibt das nur das letzte Speicherdatum wieder; das sagt über die Aktualität des Inhalts nichts aus. Richtiger wäre also: Letzes Speicherdatum.

----

Oder:

<body>
<a href="javascript:alert(document.lastModified)"><b>Letzter Update</b></a> </body>

Frames Verlassen

In Mein Frame

Das folgende Java Script verhindert, daß Seiten aus einem Frameset im Netz vereinzelt dargestellt werden.

Es prüft, ob eine Seite im Netz vereinzelt dargestellt wird, und lädt sie ggf. im eigenen Frameset neu- genauer: in ein zweites Frameset, das die selben Dimensionen haben sollte wie das Original.

Diesen Code in den HEAD- Bereich jeder Seite einfügen, die immer im eigenen Frameset angezeigt werden soll:

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

meineseite = document.URL;
if (top.location == self.location && self.location.protocol == "http:")
{top.location.href="TestmitJava.htm?" + meineseite};

</script>

Der Quellcode für das zweite Frameset lautet dann:

<html>
<head>
<title>Frameset 2</title>

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

origURL = parent.document.URL
contentURL = origURL.substring(origURL.indexOf('?')+1, origURL.length)

document.write('<frameset cols="20%,80%"><frame src="links.html" name="links"><frame src="' + contentURL + '" name="rechts"><\/frameset>')

</script>

</head>

</html>

- Läßt sich im IE nur online prüfen.

- Verhindert natürlich auch dann, daß die Seite außerhalb des Rahmens geöffnet wird, wenn der Betrachter das will. Es sei denn, JavaScript ist abgeschaltet.

- Verhindert auch, daß die Seite aus fremden Framesets herausgeboxt werden kann (No Frame 1-5).

- Offline ist es jedoch möglich.

Von http://www.netmechanic.com/

Frameset-alert

Frameset - Alert

(falls das Frame irgendwo als Unterseite geladen wird )

<script language = "javaScript">

</script>

oder ein Link:

<A HREF="" Target="_top">Raus aus dem Frame!</A>

No Frame 1

Frame - Killer I

<HEAD>

<script language="javascript"
type="text/javascript">

</script>

Setzt sich selbst ins obere Fenster, sprengt ein Frameset.

No Frame 1b

Frame - Killer II

<script language="javascript"
type="text/javascript">

</script>

oder

<script language="JavaScript">

</script>

Dieses Script überprüft, ob die einzelne Seite außerhalb des Framesets geladen worden ist, . wenn ja, lädt der Browser das stattdessen das Frameset 'frames.html'

<script language="javascript"
type="text/javascript">

</script>

Dieses Script überprüft, ob die aktuelle Seite zuoberst in der Browser- Hierarchie ist. Wenn nicht, dann setzt sie die Seite auf die höchste Ebene und zeigt sie als die aktuelle Seite im Browser an.

Achtung! Immer hinter "if" ein Leerzeichen; sonst Fehler in Netscape

No Frame 1c

Frame - Killer III

<script language="JavaScript">

</script>

Wenn die Seite aufgerufen wird, wird überprüft, ob ein Frameset vorhanden ist. Wenn ja, wird die Seite darübergelegt.

Alternativ:

<script language="JavaScript">

</script>

------------

Alternativ:

(Auch für den Fall, daß die Frame-Seiten selbst woanders verlinkt oder beispielsweise in Suchmaschinen angezeigt werden)

Überprüft, ob die Seite in einem fremden Frame geladen ist, und fügt in diesem Fall eine Meldung im Dokument ein:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (parent != null && parent != self)
{
var host=parent.location.hostname;
if (host != "http://www.meinedomain.de")
{
document.write("<p align=center>")
document.write("Ursprünglich " + "<a href=\""+location.href+"\" target =\"_parent\">" + " Seitenname (www.meinedomain.de) </a></p>")
}
}
</Script>

Oder: Überprüft, ob die Seite in einem fremden Frame geladen wurde, und lädt die Seiten im eigenen Frameset:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function init()
{
if (parent != null && parent != self)
{
var host = parent.location.hostname;
if (host != "http://www.meinedomain.de")
{
top.location.href = self.location.href;
}
}
}

</Script>
</HEAD>
<BODY onLoad="init(); self.focus();">

Letzteres verhindert, daß man erst in den Frame klicken muß, um ihn zu scrollen.

---------

No Frame 2

Frame - Vollbildzwang I

Verhindert die Darstellung eigener Seiten in einem Frame ( Erzwingt Vollbild )

<HEAD>
.
.
<SCRIPT LANGUAGE= "Java Script">

</SCRIPT>

</HEAD>

Achtung! Immer hinter "if" ein Leerzeichen; sonst Fehler in Netscape

No Frame 3

Frame - Vollbildzwang II - Opera

Verweis <click> mit Java aufrufen!

Aus: Stefan Münz 8;

wg. Opera, aber auch sonst interessant wg. Verweis aufrufen

<html> <head> <title>Seitenanzeige in Frames verhindern</title>
<script type="text/javascript">
 </script>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
<a name="befreien" href="seitenanzeige_opera.htm" target="_top"></a>
<h1>Keine Chance für Schaufenster-Anbieter!</h1>
</body>
</html>

Erläuterung:

Bei Opera 5.12 haben Sie keinen Zugriff auf die oberste Fensterebene 'top', wenn sich diese nicht zur eigenen Domain gehört. Sie können jedoch über einen Umweg auch diesen Browser dazu veranlassen, das Frameset zu sprengen. Dazu müssen Sie dafür sorgen, dass ein Verweis mit der Eigenschaft target="_top" angeklickt wird:

Innerhalb der Seite befindet sich ein unsichtbarer Verweis (Verweis ohne Verweistext) namens befreien. Dieser Verweis besitzt als Zielfenster _top und als Verweisziel die Seite selbst. Wird nun beim Laden der Seite festgestellt, dass diese sich innerhalb eines fremden Framesets befindet, so verwenden alle Browser außer Opera das oben beschriebene Script. In Opera dagegen wird lediglich der Eventhandler onload initialisiert. Der Aufruf window.onload=opera_befreien hat die Aufgabe, nach dem Laden der Seite die Funktion opera_befreien() aufzurufen. Innerhalb der Funktion passiert nichts weiter, als dass der Verweis mit der Methode click() angeklickt wird. Diese undokumentierte Methode funktioniert mit allen Identifikationseinstellungen von Opera. Das Verweisziel lädt sich in die oberste Fensterebene und sprengt das Frameset.

No Frame 4

Frame - Vollbildzwang III

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

<BODY OnLoad="bild()" ...>

Auch nicht schlecht!

---

Variante:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

<BODY OnLoad="bild()" ...>

Navigation und Fenster

Drop-down Menü 1

OnClick Drop-down Menü 1

(size="x" mach aus einem Dropdown-Feld ein Auswahlfeld!)

<script language="Javascript">


</script>

-----------

<P>

<FORM name="form" action="">
<select name="auswahl" size="3" onchange="auswert(form);" >
<option>Goethe</option>
<option>Schiller</option>
<option>Menü</option>
</select>
</FORM>

<P>

Drop-down Menü 2

OnClick Drop-down Menü 2

<select id="xyz-quickNav" name="xyz-quickNav" onchange="window.location.href=this.options[this.selectedIndex].value">
<option value="Diese Seite">Select a page..</option>
<option value="Home">http://www.xyz.com/">Home Page</option>
<option value="xyz">http://support.xyz.com/">xyz Support</option>
<option value="FREE">http://www.xyz.com/webtools/">FREE Web Tools</option>
<option value="Web">http://www.xyz.com/webhosting/">Web Hosting</option>
</select>

von http://www.bravenet.com/

WindowOpen

WindowOpen

Die allgemeine Syntax der Methode "window.open()" (öffnet ein extra - Fenster) ist:

fenster= window.open("url [der anzuzeigenden Seite]","ziel [=Name des Fensters im TARGET] ","merkmale[optional: -height,width- in pixel sowie -status, resizable- u.a.m ]")

var new_win=window.open(http://www.irgendwo.de,"Neues Fenster",'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=x,height=y',screenX=0,screenY=0');

// Statt 'screenX=0,screenY=0, besser
// left=0,top=0,

Neues Fenster in 30 Sek

Neues Fenster in 30 Sek

Internet Magazin 1-2000

<script language="Javascript">

function fenster_auf()
{
window.open('start.htm', 'screenX=0,screenY=0,toolbar=yes,scrollbars=yes,resizable=no,fullscreen=no,status=yes,width=200,height=40');

// Statt 'screenX=0,screenY=0, besser
// left=0,top=0,

// Zusatz: Verdeckt
// Focussiert Hauptfenster

self.focus();
}
</script>

<Body onLoad="timerOne=window.setTimeout('fenster_auf()',30000);" BGCOLOR="#000000" TEXT="#f000f0" LINK="#0000ff" VLINK="#ff00ff">

öffnet nach 30 Sekunden ein neues Browserfenster im Fenster

Öffnet erst nach Bestätigung

Öffnet nach Bestätigung

prompt() läßt Dialog-Text erscheinen: "OK" und "Abbrechen"
confirm() ergibt Dialog- Box OK / Abbrechen

<html>
<head>
<title>Oh Oh</title>

<script type="text/javascript">

</script>

</head>

<body>

Öffnet bei Bestätigung die neue Seite 'ferkel.htm'

Kürzer:

if (confirm('Soll das Frameset geladen werden ?'))
{top.location.href=yxz};

Fenster automatisch schließen

Popup- Fenster automatisch schließen:

Die Angabe:

<Body OnUnload="extramenu.window.close();" Onload="extra...

schließt das Zusatzfenster, wenn das Hauptfenster geschlossen wird.

Voraussetzung:
"extramenu" ist als Variable bekannt durch

function Fensterauf()
extramenu = window.open(url, ziel,...)

- - - -

Oder, wenn vorgesehen:

function menuweg()
if (window.extramenu)
{
window.extramenu.focus();
window.extramenu.close();
}

<Body OnUnload="menuweg();" Onload="extra...

*********

Die Angabe:

<Body OnBlur="self.close();"...

im Extrafenster schließt dieses, sobald es verlassen wird.

<Body onLoad="setTimeout('self.close();',30000);"

Schließt das Fenster nach 30 Sekunden.

<A HREF="javascript:window.close();" >Fenster zu!</A>

schließt ein Fenster manuell.

---------

function HauptfensterZu()
{
if (opener != null)
{
if(opener.closed == false)
{
opener.focus();
opener.close();
}
}
}

Schließt das Hauptfenster, wenn es noch offen ist

---------

<SCRIPT type="text/javascript" language="JavaScript">

</SCRIPT>

<body ... OnLoad="self.focus();" OnClick="FensterZu();">

Schließt das Zusatzfenster auf Anklick, wenn das Hauptfenster bereits geschlossen wurde (versuchsweise: OnFocus)

Hintergrund: Normalerweise müßte man nur den Namen des öffnenden Fensters abfragen; das wird aber von manchen Browsern abgesehen vom MSIE verweigert, teilweise auch offline mit einem "permission denied" - Fehler, der sich nicht vernünftig abfangen läßt. Daher kommt diese Abfrage an das Ende der Reihe.

Umgehung: "opener.length" gibt dagegen interessante Werte zurück; das öffnende Fenster beispielsweise den Wert "0" (also 1), bei anderen, oder späteren, je nach Konfiguration, beispielsweise Rahmen, den Wert 4.

---------

[dependent= yes|no gilt nur für Netscape4]

Achtung: Für Netscape4 gilt OPENER nur, wenn das Fenster auch mit OPEN geöffnet wurde; im IE auch mit HREF.

----------

Damit ein Zusatzfenster nicht alleine geladen wird, gilt folgendes:
(Fängt die Fehlermeldung "Ist null oder kein Objekt" ab)

// Self Close

if(! window.opener)
{
// alert ("No Opener")
stoperror();
// self.close();
}

// Fehlermeldung

function stoperror()
{alert("Allgemeiner Fehler. Bezugsseite nicht gefunden.\n\nEntweder ein Programmfehler, oder das Fenster\nwurde nicht von der Bezugsseite geladen.\n\nBitte in diesem Fall das Fenster schließen und von der Hauptseite aus neu laden.");
return true;
self.close();
}

// To test break below:
window.onerror=stoperror;

Achtung: stoperror immer VOR das abzufangende Script setzen!

---

Popup und Target

Popup + Target - Öffnet ein neues Fenster mit und ohne JavaScript

Internet Magazin 10/01

<a href="seite.htm" target="_blank"
onClick=window.open('seite.htm','fenster','width=600,height=450'); return
false">Link</a>

Popup ohne Target

<a href="javascript:void(0)" onclick="window.open('http://www.blah.com',blah.com','width=200,height=200')">
Öffne ein neues Fenster
</a>

Neues Fenster mit und ohne JavaScript

Öffnet ein neues Fenster mit und ohne JavaScript:

<a href="seite.htm" target="fenster" onClick=window.open('seite.htm','fenster','width=600,height=450'); return false">Link</a>

oder

<A HREF="hilfe.html" TARGET="Hilfe" onClick="window.open('hilfe.html','Hilfe', 'toolbar=no,location=no,scrolling=yes, directories=no,status=yes,menubar=no, scrollbars=yes,resizable=yes,width=480,height=480')"> Hilfe</A>

Wenn kein Frame gleichen Namens (hier "Hilfe") existiert, öffnet ein neues Fenster

Neue Seiten im eigenen Fenster öffnen

Neue Fenster im selben Target (Zielfenster) öffnen lassen:

<HEAD>

<script type="text/javascript">

</SCRIPT>

...

</HEAD>

Seiten im selben Fenster öffnen

Feststellen, ob eine Seite auf sich selbst verweist:

Da moderne Browser Verweise grundsätzlich im neuen Tab öffnen, ist es manchmal wichtig zu wissen, ob ein Verweis innerhalb einer Seite liegt (bzw. auf einen Anker auf der eigenen Seite verweist) oder auf eine andere Seite mit der selben Adresse, um dann mit Target = "_self" oder "_top" das öffnen des Verweises in der selben Registerkarte bzw. im selben Fenster zu erzwingen.

Achtung: Wird eine Seite online aufgerufen, beginnen für JavaScript ALLE Verweise mit http!

<SCRIPT type="text/javascript">

</SCRIPT>

Navigation im Extrafenster

Navigation im Extrafenster

Navigationsleiste als Fernbedienung im Extrafenster öffnen lassen mit einfachem Target plus Größenangabe. Siehe dazu http://www.swatch.com

<a href="seite.htm" target="_blank"
onClick=window.open('seite.htm','fenster','width=600,height=450'); return
false">Link</a>

Die Angabe:

<Body onBlur="self.focus();" ...

in der Navigationsseite verhindert, daß sie vom Hautfenster verdeckt wird.

Achtung!

Target="NAME" - öffnet alle Seiten im Fenster NAME - nach dem ersten Öffnen aber versteckt (kein Focus).

Target="_blank" - öffnet Fenster NICHT mehr versteckt

Weiterführend:

http://project-icarus.de/erleuchtet/hilfe/fensternavi2.txt

http://project-icarus.de/erleuchtet/fw/fw-index.htm#FN

Rückwärts zählende Uhr zur Weiterleitung

Rückwärts zählende Uhr zur Weiterleitung

<HTML>
<HEAD>

<META HTTP-EQUIV="Refresh" CONTENT="10; URL=">http://members.tripod.com/1.htm">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD> <BODY BGCOLOR="#6699CC"> <CENTER>
<H1>Rückwärts zählende Uhr zur Weiterleitung</H1>
<FORM NAME="form1">
<P>
<FONT SIZE="3" FACE="Geneva, Arial" COLOR="#FF0000"> <B> You are being redirected in </B> <INPUT TYPE="text" NAME="clock" SIZE="2" VALUE="10"> <B> seconds. <BR>
If you don't want to wait click <A HREF="http://members.tripod.com/1.htm" onMouseOver="window.status='Click here to continue'; return true"> here</A> . </B> </FONT> <BR>
</FORM>
</BODY> </HTML>

Zufällige Hintergrundfarbe

Zufällige Hintergrundfarbe

<HEAD>

<script language="JavaScript">



</script>

</HEAD>

<BODY BGCOLOR=#ffffff>

<script language="JavaScript">



</script>
<P>
<I>(Reload to get another background color)</I>
<P>

Scrollen ohne vorherigen Klick in Frame

Scrollen ohne vorherigen Klick in Frame- Seiten

<body... onload="self.focus();">
verhindert, daß man erst in den Frame klicken muß, um ihn zu scrollen
(Macht die Seite zum Hauptfenster)

(Internet Magazin 6/01)

Vorwärts mit Formular

Vorwärts mit Formular

<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Back" onClick="history.back();break;">
<INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.htm'">
<INPUT TYPE="button" VALUE="Next" onCLick="history.forward();break;">
</FORM>

Wichtig scheint das 'break'; (grundsätzlich bei 'location.href' oder 'history.back / forward')

Vor - Zurück

<form method="post">

<input type="button" value="Zurueck"
onclick="history.go(-1);return true;">

<input type="button" value="Vorwaerts"
onclick="history.go(1);return true;">

</form>

-------

JavaScript:history.go(0)

ruft die selbe Seite noch einmal auf (reload, aktualisieren)

Tabellenfeld-Verweis

Tabellenfeld - Javascript - Verweise

<P>
<CENTER>
<TABLE BORDER CELLPADDING="2" ALIGN="Center">
<TR>
<TD onClick="javascript:self.location.href='#Here';" >Javascript-Tabellenfeld-Link</TD>
<TD onClick="javascript:self.location.href='#Here';" ><BR>
 Click here tab<BR>
 </TD>
</TR>
</TABLE>
</CENTER>
<P>

--------

<BR>
<BR>
<A NAME="Here">Go Here</A> </B>
</BODY></HTML>

Internet Magazin 6/05 S. 31 ff

Verweise in JavaScript

Verweis ohne Ziel, nur zum Ausführen einer Javascript-Funktion:

------

<A HREF="javascript:history.back()">

(Eine Seite Zurück)

Hier OHNE 'Onclick'

Nur "javascript:" (bei Verweisen)

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a>
<area>

---

Reine JavaScript - Verweise sind zwar aktiv, wandeln den Mauszeiger aber nicht in die Hand um (zeigen ihn nicht an) und läßt auch jeden anderen Hinweis auf einen Link vermissen (nicht unterstrichen):

"<B><A OnClick="javascript:self.location.href='weiter.htm' ;"><FONT COLOR=#0000ff>

WEITER

</FONT></A></B>"

*****

Ähnlicher Effekt mit CSS:
(verhindert nur den Unterstrich)

"<B><A STYLE="text-decoration:none;" HREF="#weiter"><FONT COLOR=#0000ff>

WEITER

</FONT></A></B>"

oder für die ganze Seite mit

<style type="text/css">

</style>
</HEAD>

Gegensinnige Schleifen

Vorwärts und Rückwärts zählen und aktivieren

Hin und wieder soll in einer Funktion ein Element immer nur das nächste Element aktivieren, was unter Umständen bei einer normalen for / y++ -Schleife aber dazu führen kann, daß die Schleife grundsätzlich von 0-y durchlaufen wird und erst beim letzten Element stehen bleibt.

Das Gleiche gilt , wenn man die Schleife rückwärts durchläuft und jedes Element das vorige aktivieren soll - dann bleibt die Schleife immer erst bei 0 stehen.

Die Lösung: Die Schleifen gegensinnig laufen lassen: Die Vorwärtsschleife rückwärts, die Rückwärtsschleife vorwärts:

// Bei document.Element.length=3 existieren die Elemente:
// Element[0], Element[1], Element[2]

function Vorwaerts()
{

var Menge = document.Element.length;
// alert("Zahl der Elemente: " + Menge); // Menge = 3

var MaxVw = (Menge-1); // 2
var MinVw = (0-1); // -1

for (var y = MaxVw; y > MinVw; y--) // y=2,1,0
{
next = (y+1); // next(2, 1, 0)=>3, 2, 1

if ( document.Element[y].aktiv ) // Prüft Element[2], [1], [0]
{

if ( document.Element[next] ) // Prüft Element[3], [2], [1]

{aktiviere das nächste Element (document.Element[next]);}

// Prüft von oben nach unten
// - bleibt bei y = 2 (wenn Element[2] aktiv) stehen ( Element[3] existiert nicht)
// - aktiviert bei y = 1 (wenn Element[1] aktiv) Element[2]
// und bleibt stehen, da als nächstes (bei y=0) Element[0] geprüft wird (=inaktiv)
// - aktiviert bei y = 0 (wenn Element[0] aktiv) Element[1]
// und bleibt stehen, da die Schleife beendet ist.

}
}
}

Andersherum funktioniert es umgekehrt - Max und Min beachten!

function Rueckwaerts()

{
var Menge = document.Element.length;
// alert("Zahl der Elemente: " + Menge);

var MaxRw = (Menge+0);
var MinRw = (0+0);

for (var y = MinRw; y < MaxRw; y++)
{
next = (y-1);

if ( document.Element[y].aktiv)
{

if ( document.Element[next])
{Aktiviere das vorherige Element (document.Element[next]);}

}
}
}

JavaScript Weiterleitung

Automatische Weiterleitung mit JavaScript

von Seiten

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>

von Seiten

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>

von bestimmten Verweisen

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>

Ein (Frame-) Fenster Zurück

Ein Fenster Zurück

Öffnet das letzte FENSTER erneut:

<a href="javascript:history.back()"> < Zurueck </a><br>

oder:

<INPUT TYPE="button" VALUE=" < Zurueck "onClick="history.back()">

Mit (default)- URL kombinieren:

<A Href="x.htm" onClick="history.back()"> Zurück </A>

geht nicht (es öffnet im Zweifelsfall x.htm), Widerspruch; Besser if- Funktion bauen.

Evtl. : <a href="javascript:history.back()"> < Zurueck </a><NOscript>
<A Href="untitled1.html"> HIER </A></NOscript>

<a href="javascript:history.go(-2)"> < 2Zurueck </a><br>

--------

window.back()

Entspricht bei normalen Seiten einem Klick auf den "Zurück"-Button. Bei Frames wird jedoch - anders als bei history.back() - die letzte besuchte Seite aufgerufen, die NICHT zum Frame-Set gehörte.

<a href="javascript:window.back();">Zurück</a>

Frame - Steuerung durch Buttons

Nachträgliche Frame - Steuerung durch Buttons -
genial und nicht von mir- aber verändert.

http://project-icarus.de/erleuchtet/autostyle/_frameschalter/frameschalter.htm

FrameSet.html

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>

<FRAMESET ROWS="*,32" name="ButtonFrame" border="4">
<FRAMESET cols="30%, 70%" name="SeitenFrame" border="4">
<FRAME SRC="menu.htm" NAME="links" MARGINWIDTH="10" MARGINHEIGHT="14">
<FRAME SRC="index.htm" NAME="rechts" MARGINWIDTH="10" MARGINHEIGHT="14">
</FRAMESET>
<FRAME SRC="schalter.htm" NAME="unten" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" NORESIZE>
</FRAMESET>

<NOFRAMES>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P>
Ihr Browser kann leider keine Frames darstellen.
</BODY></NOFRAMES></HTML>

SchalterSeite.html

<HTML>
<BODY BGCOLOR="#ff0000">
<FORM>
<CENTER>
<TABLE BORDER CELLPADDING="2" ALIGN="Center">
<TR ALIGN="Center">
<TD ALIGN="Center">
<INPUT TYPE=reset VALUE="Navigationsmenü Verbergen" OnClick="ResizeFrame2();"></TD>
<TD ALIGN="Center">
<INPUT TYPE=reset VALUE="Navigationsmenü Anzeigen" OnClick="ResizeFrame1();"></TD>
</TR>
</TABLE>
</CENTER>
</FORM>
<P ALIGN=Center>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
 </SCRIPT>
</BODY></HTML>

- - - - - - - - - -

- Man könnte versuchen die Zeile:

parent.frames.SeitenFrame.cols =

- jeweils zu ersetzen durch: (mit der ID des FRAMESET!!)

parent.document.getElementById("SeitenFrame").cols = "0,*";

- Wenn im Frameset (!) definiert wurde:

<FRAMESET cols="30%, 70%" border="4" id="SeitenFrame" name="SeitenFrame" ...

- - -

Im Netscape 4 geht es nicht; er kann Framesets nicht erkennen, nur Frames.

- Beispielsweise hier zu finden:

http://project-icarus.de/erleuchtet/Script-DB/Script-Datenbank.htm

oder hier:

http://project-icarus.de/erleuchtet/fw/fw-index.htm#CCTurbo

- - - - - - - - - -

Dann lassen sich die Größen von Frames durch schieres Anklicken verändern, wenn das FRAMSET die ID "FRAMSET" erhält:

<FRAMESET rows="30%,*" border="4" id="FRAMSET" name="FRAMSET" ...

In einem Frame definieren:

<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
 </SCRIPT>

</HEAD>
<BODY BGCOLOR="#ffffff" OnClick="ResizeFrame1();" >

Im anderen Frame entsprechend.

- - -

- Es geht auch in Stufen:

var Vorlage = 30;
var Mehr = 10;
var Abstand = Vorlage;

function ResizeFrame1()
{

if ((Abstand) && (Vorlage <= Abstand) && ((Abstand + Mehr) < 100))
{
Abstand = Abstand + Mehr;
}
else Abstand = Vorlage;

// alert(Abstand);

parent.document.getElementById("FS").rows = Abstand + "%,*";
}

Das Gegenskript muß dann Abstand = Vorlage - 1; liefern

- - -

- GGf. die Frames auf NORESIZE stellen, um Konflikte zu minimieren.

- ACHTUNG! U.U. lassen sich Verweise auf der Seite nicht mehr anklicken!

Man kann auch mehrere Frames verschieben lassen.

Sollte sich insbesondere der Intenet Explorer verweigern, die Reihenfolge probeweise ändern.
Insbesondere: Rows vor Cols.

function ResizeFrame()
{
if (document.getElementById)
{
parent.document.getElementById("TerminFrame").rows = "0,100%,*";
parent.document.getElementById("KalenderFrame").cols = "50%,50%";
}
}

Zweiten Frame durch ersten öffnen

Fremdes Frame-Fenster oder zwei Frames gleichzeitig steuern

if (top != self)
// document.write(' Titel: ');
// document.write(parent.page.document.title);
{
if ((parent.seite.document.title == "Inhalt") && (parent.menue.document.title != "Das Menue"))
// Browser Security: muß beide Titel erkennen
{
// alert('Titel gefunden, wechsle Seite.');
parent.menue.location.href="menue.htm";

// Hier hönnte noch eine weitere neue Seite geöffnet werden
// parent.inhalt.location.href="neues.htm";

}
}

Statt

parent.menue.location.href="menue.htm";

geht auch:

{
var DieSeite = "menue.htm";
this.location.replace(DieSeite);
}

und zwar von der zu wechselnden Frame-Seite aus.

- Mit "Replace", um die Seite zu ersetzen und für die Rückwärts- Bewegung im Browser aus der History zu eliminieren.

Ohne Javascript: Ein neues Frameset öffnen:

<NOFRAMES>
<A HREF="Neues_Frameset.htm" TARGET="_top">Alle Frames neu setzen</A>
</NOFRAMES>

- Jeder Verweis lädt einfach ein neues Frameset, genauso groß.

Body Onload umgehen I

Manchmal möchte man, daß eine Seite, NACHDEM sie geladen wurde, einen bestimmten Befehl ausführt, z.B.an einen bestimmten Ort springt.

Das geht einerseits mit dem <BODY OnLoad...> - Befehl, aber das führt manchmal zu Konflikten im Ablauf.

(OnLoad tritt erst nach dem vollständigen Laden der Seite in Kraft - vielmehr der Skripte)

Eine Lösung ist es, diesen Befehl an das Ende der Seite zu stellen:

<P>

<A NAME="Oben">TEXT</A>

<P>

TEXT

<P>

<script language="javascript"
type="text/javascript">

</script>

</BODY></HTML>

Achtung:
- window.location.hash scheint die History-Funktion des MSIE zu stören
- wichtig scheint auch das 'break'; (grundsätzlich bei 'location.href' oder 'history.back / forward')

Body Onload umgehen II

Normalerweise werden Skripte und Funktionen, das (erst) nach dem Laden (oder Entladen) der Seite ausgeführt werden sollen, direkt in das HTML der Seite eingebaut:

<BODY Onload="funktion1();funktion2();" onunload="funktion3();" ...>

Hat man darauf keinen Zugriff oder will man nicht nachträglich sämtliche Seiten ändern müssen, kann man auf einer womöglich schon bestehenden JavaScript-Seite eine ähnliche Funktion aufrufen lassen:

window.onload = funktion1();

Allerdings ist diese Methode unsicher, da erstens die ganze Seite komplett geladen sein muß, bevor die Funktion ausgeführt wird, inklusive der Bilder etc.; und zweitens einige Skript-Elemente nicht angesprochen werden können, da sie schon durchgerauscht sind.

Da hilft manchmal eine absichtliche Verzögerung, hier um 1 Sekunde:

window.onload = window.setTimeout("funktion1();", 1000);

Aber wie immer sollte man bei solchen Sachen möglichst nur redundante Skripte ausführen lassen wollen - also solche, auf die notfalls auch verzichtet werden kann.

Am Sprungziel Öffnen I

Am Sprungziel Öffnen I

<script language="javascript"
type="text/javascript">



Zieht Seiten, wenn sie außerhalb eines Rahmens geladen werden, bis zum Anker namens OBEN hoch.

ACHTUNG: braucht immer einen eigenen Auslöser! Nicht mit reload kombinieren!

Am Sprungziel Öffnen II

Am Sprungziel Öffnen II

Frametop

<P>
<SCRIPT language="javascript">
 </SCRIPT>

</BODY></HTML>

Zieht Seiten, wenn sie außerhalb eines Rahmens mit spezifiziertem Titel geladen werden, bis zum Anker namens FRAMETOP hoch, so vorhanden. Muß vor "</ body >" geschrieben werden.

ACHTUNG: braucht immer einen eigenen Auslöser! Nicht mit reload kombinieren!

Am Sprungziel Öffnen III

Am Sprungziel Öffnen III
stoperror immer zuerst

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<script language="javascript"
type="text/javascript">

</script>

</HEAD>

<BODY BGCOLOR="#ffffff" Link=black onLoad="gehezu()">

Öffnet Seiten am Anker "Hallo"

ACHTUNG: braucht immer einen eigenen Auslöser! Nicht mit reload kombinieren!

Wichtig scheint auch das 'break'; (grundsätzlich bei 'location.href' oder 'history.back / forward')

Automatisch die Seite neu laden I

Zwangsweise die Seite neu Laden / no cache

1. <meta http-equiv="pragma" content="no-cache">

2. Mit dem META REFRESH - Tag, auf die eigene Seite gelegt, erzwingt man laufend automatische Updates des Inhaltes, z. B. von Webcam - Bildern.

3. Abstellen der Cache - Funktion ( Seite wird jedesmal neu geladen ): < Meta http-equiv="expires" content="0" > Zwingt den Browser, das Dokument jedesmal frisch vom Server zu laden.

Genauer:

Internet Magazin 10/02

Brower-Cache umgehen

Mit CONTENT="xx" kann man dem Browser mitteilen, nach wie vielen Sekunden er die Seite aus dem Web statt aus dem Cache laden soll."xx" müssen Sie dabei durch die jeweils gewünschte Sekundenzahl ersetzen. Wollen Sie also erreichen, dass die Seite nie aus dem Cache geladen wird, setzen Sie für "xx" "0" ein.

Die folgenden, weiterhin relevanten Methoden sprechen in erster Linie Proxy-Server an und müssen ebenfalls zwischen <HEAD> und </HEAD> platziert werden:

<META HTTP-EQUIV="pragma"
content="no-cache">
<META HTTP-EQUIV="cache-control"
content="private">
<META HTTP-EQUIV="Last-Modified"
CONTENT="ein Datum in der
Vergangenheit">

Eine umfangreiche Abhandlung zu diesem Thema finden Sie auch unter
www. mnot.net/cache_docs/.

Hilfreiche Erläuterungen gibt's außerdem in Stefan Münz' SelfHTML (http://de.selfhtml.org/html/kopfdaten/).

Automatisch die Seite neu laden II

Die Seite soll sich bei Aufruf genau ein Mal selber neu laden (aktualisieren):
Das geht über den Fensternamen und ein Formular

<HTML>
<HEAD>
<TITLE>Nur 1x sich selbst neu ladende Seite</TITLE>

<SCRIPT language="javascript" type="text/javascript">

function NamenAendern()
{window.name = "NeuerName"; }

function EinmalLaden()
{
if
(window.name == "NeuerName")
{
location.reload();
window.name = "AlterName";
}
}

</SCRIPT>

</HEAD>
<BODY Onload="EinmalLaden();" >
<FORM... Onsubmit="NamenAendern();>

<?PHP
...Anweisung
?>

</FORM>
</BODY></HTML>

---

location.reload=true;
statt
location.reload();

holt die Seite vom Server statt vielleicht aus dem Cache.

Automatisch die Seite neu laden III

Diese Seite lädt sich bei Aufruf automatisch genau ein Mal selber neu (aktualisiert sich selbst); und zwar auch dann, wenn durch Zurück-bewegen im Browser das Fenster einfach nur wieder erreicht wird. Auch hier wird das Argument im Fensternamen gespeichert und dieser anschließend wieder zurückgesetzt. Ausgenutzt wird die Tatsache, daß minus mal minus plus ergibt, plus mal minus aber minus (Flip-Flop). Ansonsten würde sich die Seite unendlich oft neu laden.

<HTML>
<HEAD>
<TITLE>Automatisch nur 1x sich selbst neu ladende Seite</TITLE>

<SCRIPT language="javascript" type="text/javascript">

function Selbstladen()
{

var Schalter;
if ((Schalter != 1) || (Schalter != (-1)))
{var Schalter = 1;}

if (window.name == "A1")
{var Schalter = 1;}

if (window.name == "A2")
{var Schalter = (-1);}

// alert ("Load " + Schalter);

if (window.name == "A2")
{
location.replace(self.location);
// self.location.reload;
alert ("reload");
}
else
{alert ("NO reload");}

var Schalter = eval(-(Schalter));
// alert ("Schalter: " + Schalter);

if (Schalter == 1)
{window.name = "A1";}

if (Schalter == (-1))
{window.name = "A2";}

alert ("Resultat Fenstername: " +name);

}

</SCRIPT>

</HEAD>
<BODY Onload="Selbstladen();" >

---

location.reload=true;
statt
location.reload();

holt die Seite vom Server statt vielleicht aus dem Cache.

Automatisch die letzte Seite wieder laden

Automatisch die letzte Seite wieder laden
- nach zwei Sekunden ( = 1000ms ) :

setTimeout ("history.back()",1000);

Vermischtes (JavaScript)

JavaScript-Aufruf

Ruft eine externe JavaScript- Datei auf:

<script language="JavaScript" type="text/javascript" src="xy.js"></script>

</HEAD>

----------------

Manchmal möchte man der Übersicht halber eine externe JavaScript-Datei an eine andere anhängen.

Aufruf von .js- Seiten aus .js- Seiten (Kette):

document.write("<Script src=\"..\/hier\/dateiname2.js\" type=\"text/javascript\"><\/Script>");

schreibt den Aufruf der Datei

"../hier/dateiname2.js"

in jedes Dokument und führt deren Anweisungen aus.

----------------

Ähnlich kann man direkt aus einer externen JavaScript-Datei darin enthaltene Funktionen aufrufen, ohne eine ONLOAD-Funktion in den BODY-Tag einbauen zu müssen:

Aufruf von js- Funtionen aus js- Seiten:

if (Bedingung)
{
window.onload = window.setTimeout('LinkIndex()', 1000);
}

// Oder alle:

window.onload = window.setTimeout('BildTitel()', 1500);

Die timeOut-Funktion soll sicherstellen, daß die Seiten auch wirklich vollständig geladen sind, ehe die externen JavaScript- Funktionen ausgelöst werden.

Java Script Probleme

Java Script

a) Bei allen Bilder, die in Seiten mit JavaScript eingebunden werden,
müssen immer Angaben zu Height und Width vorhanden sein!
Ansonsten kann es zu Problemen mit dem Script kommen.

b) Auch wenn es nicht mehr üblich ist: Java Script Immer
mit  auskommentieren!

<SCRIPT language="javascript">

</SCRIPT>

sonst evtl. Fehlermeldung.

c) Achtung! Immer hinter "if" ein Leerzeichen; sonst Fehler in Netscape

d) Ein Zeilenumbruch beendet in JavaScript eine Codezeile. Fehler!
- Umbrüche ggf. mit + überbrücken

e) Anführungszeichen begrenzen eine JavaScript-Anweisung.
Deshalb ' oder " innerhalb eines Textes mit \' oder \" maskieren
- oder die Akzent-Tasten benutzen: 'Freddys' statt 'Freddy's' schreiben.

ACHTUNG:

JEDER Fehler in einer JavaScript - Anweisung blockiert alle folgende!

--------------

Bei dem Aufbau einer Seite mit Java Script (oder PHP) werden die Funktionen grundsätzlich
in der Reihenfolge ihres Erscheinens abgearbeitet.

Eine JavaScript-Anweisung mit 'document.write ("...")' beim Verlassen einer Seite
(oder nach dem Laden einer Seite mit OnLoad) wird ebenso grundsätzlich in eine neue Seite geschrieben
- und nichts anderes.

Deshalb mit 'innerHTML' arbeiten, will man den Text auf einer Seite im Nachhinein dynamisch ändern:

Entweder vor den zu ändernden Text:

<SCRIPT language="javascript">

</SCRIPT>

<P>

Irgendwas

<P>

<P ID="Absatz">Text</P>

Danach die Funktion 'NeuMachen()' auslösen, und statt "Text"
steht da jetzt "Neuer Text".

---

Oder, ohne Funktion:

<SPAN ID="variabler_text"> Platzhalter </SPAN>";

<P>

Irgendwas

<P>

Und nun unten auf der Seite

<SCRIPT language="javascript">

</SCRIPT>

Wenn die Seite geladen ist, steht nun statt "Platzhalter" da "Der neue Text"

- - -

NB:

"Wenn Sie innerhalb von Funktionen Variablen ohne das Schlüsselwort var deklarieren,
dann sind diese Variablen global."

Achtung: Namen von Variablen und Elementen sollten nur einmal auf der Seite definiert werden
- sonst ist das Verhalten von JavaScript schwer vorherzusehen.

Achtung: Es ist sehr wichtig, WO die Variablen definiert wurden, je nachdem, wie das Script aufgebaut ist.

Manch undurchschaubarer "undefiniert" - Fehler, der die Ausführung eines sonst korrekten Scriptes stoppt, liegt daran, daß die Deklaration einer Variablen darin nur an eine andere Stelle verlegt werden muß - beispielsweise wenn eine Anweisung in eine Funktion umgewandelt wurde und deshalb nun zu einem anderen Zeitpunkt geladen wird. Das gilt besonders für das Auswerten von Formularen.

--------------

Wenn Seiten mit Javascript erstellt werden, insbesondere mit document.write, dann scheinen sie manchmal endlos weiter zu laden, obwohl das Script längst ausgeführt wurde; insbesondere offline.

// Beendet die Verarbeitung - offline
if (window.location.protocol == "file:")
{
window.location.reload();
}

// Am Ende des Scriptes - beendet die Verarbeitung

Gemischte JS-Ausgabe stückeln

Manchmal ist es nützlich, die Ausgabe einer HTML-Zeile in Java Script zu stückeln, Z.B. wenn ein Wert an eine Bedingung geknüpft wird:

<SCRIPT type="text/javascript" language="JavaScript">

</SCRIPT>

---

Ist im Prinzip dasselbe wie:

<SCRIPT type="text/javascript" language="JavaScript">

</SCRIPT>

- aber mit einer Bedingung.

Besuchte Links in JS prüfen

Manchmal möchte man in JavaScript feststellen, ob ein Link (Verweis) bereits besucht wurde oder nicht. ACHTUNG: Dieses Feature wurde aus Datenschutz- und Sicherheitsgründen in neueren Browsern deaktiviert.

Dieses LIEß SICH über die unterschiedliche Link-Farbe feststellen.

Zuerst werden den Links in CSS(!) unterschiedliche Farben zugeordnet:

<style type="text/css">
a:link { color:blue; }
a:visited { color:purple; }
</style>

Dann wird die Link-Farbe in JS abgefragt:

for (var i = 0; i < LinkAnzahl; i++)
{

// Fehler abfangen:

LF=0;

if(window.getComputedStyle)
// (Mozilla)
{
LF= window.getComputedStyle(document.links[i],"" ).getPropertyValue("color");
}

else if(document.links[i].currentStyle)
// (MSIE)
{
LF=document.links[i].currentStyle.color;
}

// alert(LF);

if (LF == "purple" || LF.indexOf("128") > -1)
{

.. irgendwas

}

Ausblenden mit JS

<SCRIPT language="JavaScript" type="text/javascript">

</SCRIPT>

Dieser Bereich wird ausgeblendet, wenn der Parameter "Ausblenden" den Wert "ja" erhalten hat. Allerdings nur ausgeblendet, d.h. PHP-Anweisungen arbeiten noch.

Formular-Sendebuttons z. B. aber können so ausgeblendet werden.

Allerdings nicht, wenn sich dazwischen noch ein weiteres JavaScript befindet!



(Geht auch in PHP)

Variablen zählen

Manchmal möchte man wissen, wie viele Variablen einer bestimmten Art vorhanden sind.
Das geht allerdings nur innerhalb einer Funktion.

<P>

<SCRIPT language="JavaScript" type="text/javascript">

var Variable1 = "tralala";
var Variable2 = "dideldum";

for (var i=1; i<10; i++) // Die 10 ist nur eine Vorgabe; sie muß höher sein als die zu erwartende Zahl der Variablen

{
var Variablen = "Variable" + i;
var VariablenZ = self[Variablen];

if (!VariablenZ && (VariablenZ != undefined))
{alert("Ihr Browser kennt diese Funktion nicht");}

// else
// {alert("Die Variablen werden gezählt");}

if (VariablenZ != undefined)
{
document.writeln("\<BR\>");
document.writeln("Variable" + i + ": " + VariablenZ);
}

if (VariablenZ == undefined)
{
var zv = (i-1);
// alert(zv);
break;
}
}

document.writeln("\<BR\>\<BR\>");
document.writeln("Anzahl der Variablen: " + zv);

</SCRIPT>

Achtung: Es ist manchmal wichtig zu wissen, ob eine Schleife keine, nur eine, oder mehr als eine Variable enthält.

Javascript weigert sich, eine Schleife mit nur einem einzigen Element durchzuführen -

Fehler: Variable[i] = undefined.

PHP macht das ohne Weiteres.

JS-Umschalter

Schaltet den Wert "etwas" immer von "true" auf "false" und umgekehrt:

(Und ändert hier die Dimensionen einer Tabelle)

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
 </SCRIPT>

<TITLE>JS-Tabellen-Anpassung</TITLE>

</HEAD>

<BODY>

<P>
<A HREF="javascript:umschalten()">verändern</A>
<P>

<TABLE BORDER CELLPADDING="2" id="tabelle" WIDTH="100">
<TR>
<TD>blah blah blah blah </TD>
<TD>blah blah blah blah </TD>
</TR>
<TR>
<TD>blah blah blah blah </TD>
<TD>blah blah blah blah </TD>
</TR>
</TABLE>

<P>

</BODY></HTML>

Aus: Internet Magazin 11/06

Javascript-Abfrage

Abfrage, ob Javascript aktiviert ist:

Die einfachste Möglichkeit ist, im head - Bereich einer Datei ohne Javascript eine kleines Script einzufügen:

<script language="javascript">

</script>

Das Script wird vom Browser nur interpretiert, wenn der er Javascript beherrscht. Dann kann er auch dem Befehl, zur nächsten Seite zu wechseln folgen. Auf dieser Seite kann dann Javascript benutzt werden.

--------

Zum Selbsttest (Quelle unbekannt)

<p>Ihr WWW-Browser beherrscht folgende Scriptsprachen:<br>
<script language="JavaScript" type="text/javascript">

</script>
<script language="JScript" type="text/jscript">

</script>
<script language="VBScript" type="text/vbscript">

</script></p>

Fremd: Browserabfrage:

http://wiki.selfhtml.org/wiki/JavaScript/Navigator

Javascript: Differenzierte Abfrage, ob ein Objekt oder Wert existiert:

http://wiki.selfhtml.org/wiki/JavaScript/Objektabfragen

Kein JavaScript

JavaScript - Fehlermeldung

-----------------
</HEAD>
<BODY bgcolor=#FFFFFF>
<NOSCRIPT>
<CENTER>
<font face="geneva,verdana,arial" size=+1 color=red>
Sie haben in Ihrem Browser die JavaScript - Unterstützung ausgeschaltet.<BR>
Diese Seiten sind ohne JavaScript nicht vollständig funktionsfähig!
</FONT>
</CENTER>
<BR>
</NOSCRIPT>

Bitte aktivieren Sie JavaScript

Bitte aktivieren Sie JavaScript!

<HEAD>
<NOSCRIPT>
<META HTTP-EQUIV="REFRESH" CONTENT="0; URL=test-dateien/noscript.htm">
</NOSCRIPT>
</HEAD>

führt direkt auf eine NO - JS - Seite, dort:

Bitte aktivieren Sie JavaScript!
oder gehen Sie zu: ohne_javascript.htm

JavaScript schreibt JavaScript

Textergänzung mit JavaScript

Dokumente ergänzen mit JavaScript

(Und dabei die eigene Adresse anzeigen)

Mit JavaScript Elemente mit Text an HTML-Dokumente anheften oder an einer bestimmten Stelle in ein Dokument einfügen:

---

function DokumentErgaenzen()
{

// Verweis erstellen: Variable a b c d, Verweis-Element aber immer A!
var a = document.createElement("A");
var c = document.createElement("A");

// Verweis ergänzen:
a.textContent = "PHP-Sitesuche"; // Verweistext
a.setAttribute('HREF', "http://project-icarus.de/erleuchtet/sitesuche/suche.php");

// Immer die URL der aufrufenden Seite anzeigen:

// Extrahiert den eigenen Dateinamen aus dem Dateipfad

// Dateipfad (File oder URL)
var murl = window.location.href;
// alert(murl);

// Extrahiert:
mfile = murl.split('\\').pop().split('/').pop().toLowerCase();
// alert(mfile);

mfileurl = "http://project-icarus.de/erleuchtet/hilfe/" + mfile;
// alert(mfileurl);

c.textContent = mfileurl;
c.setAttribute('HREF', mfileurl);

// Verweis formatieren:
a.setAttribute('style', 'text-align: center; line-height: 3.5em; color: maroon; font-size: 1em; font-weight: bold; ');
a.setAttribute('class', 'suche');

c.setAttribute('style', 'text-align: center; line-height: 3.5em; color: maroon; font-size: 1em; font-weight: bold; ');
c.setAttribute('class', 'eigenlink');

// Textbausteine erstellen:
var ct = document.createTextNode("Diese Seite online: ");

var t = document.createTextNode("Neu: Die ");
var tt = document.createTextNode("durchsucht die gesamte Site nach Stichworten und fasst die Ergebnisse zusammen");

// Absatz bzw. Umbruch erstellen:

// ACHTUNG:
// Nicht alle Elemente können überall eingefügt werden
// Nicht alle Elemente können überall formatiert werden
// Jedes Element kann nur einmal eingefügt werden (letztes gilt)

var p1 = document.createElement("P");
var p2 = document.createElement("P");

var b1 = document.createElement("BR");
var b2 = document.createElement("BR");

// NB:
// Absatz formatieren:
// p.style.cssText = 'width:100%; height:150px; ';
// p.align="right";

// Absatz mit Inhalt füllen:
// p.appendChild(tt);

// Absatz ans Ende des Dokuments stellen:
// document.body.appendChild(p);

// ACHTUNG:
// Nicht alle Elemente können angesprochen werden
// Nicht alle Elemente können überall ergänzt werden
// Im Folgenden wird deshalb ein Element anhand seiner ID gesucht, dann dessen Folgeelement
// Und dann wiederum dessen Umgebung

// Test:
// var umgebung = document.getElementById("EineBestimmteID").nextSibling.parentNode.nodeName;
// alert(umgebung);

// Umgebung der Ergänzung formatieren:
document.getElementById("EineBestimmteID").nextSibling.parentNode.setAttribute('style',
'text-align: center; line-height: 1.5em; font-size: 1em; ');

// JS-Ergänzung Zusammenstoppeln:

document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(p1); // Umbruch
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(ct); // Selbst Text
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(c); // Selbst

document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(p2); // Umbruch
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(t); // Text
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(b2); // Umbruch -NG -1. Instanz
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(a); // Verweis
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(b2); // Umbruch
document.getElementById("EineBestimmteID").nextSibling.parentNode.appendChild(tt); // Text

}

window.onload = window.setTimeout("DokumentErgaenzen()", 3000);

Java Script Rückwirkend

Ablauf:

Bei dem Aufbau einer Seite mit Java Script (oder PHP) werden die Funktionen grundsätzlich in der Reihenfolge ihres Erscheinens abgearbeitet.

Über CSS können aber sogar Element verändert werden, die VOR dem Befehl liegen:

if ((document.forms.Suche2.Gefunden.value != null) && (document.forms.Suche2.Gefunden.value == "nichts"))
{
document.forms.Suche1.button.style.visibility = 'hidden';
}

Läßt den den Eingabeknopf im Formblatt 'Suche 1' verschwinden

Wenn es nicht allzu wichtig ist, ist das simple Verstecken oft leichter als das tatsächliche rückwirkend Verschwindenlassen von einzelnen DIV "Elements" by ID.

---

Achtung: Allerdings werden JavaScript - Anweisungen bei jedem Öffnen der Seite neu ausgelesen!

Fehlermeldung ausschalten

Fehlermeldung durch fehlerhafte JavaScripts ausschalten

Beispielsweise um zu verhindern, daß der Browser wegen JavaScript- Tracker und Zähler versucht Online zu gehen, oder generell um den Browser bei Aufruffehlern nicht zu blockieren.

Vor(!) das jeweilige Script im Dateikopf.

<HEAD>
<script>
function stoperror()
{return true}
window.onerror=stoperror
</script>

....

geht, aber nur beim MICROSOFT Internet Explorer! Netscape läßt sich nicht beeinflussen, man muß ihn manuell auf "Offline" schalten. Oder die Scripte auslagern.

Aus Stefan Münz 8
Diese Art der Fehlerkontrolle können Sie für Netscape 4.x und MS Internet Explorer ab Version 4.x verwenden. Netscape 6 ist leider nicht in der Lage, die Parameter vollständig zu interpretieren. Er speichert jeweils im ersten Parameter das auslösende Eventobjekt. Opera 5.12 interpretiert den an das Fensterobjekt gebundenen Eventhandler window.onError nicht.

Fehlermeldung selber erstellen

Fehlermeldung bei fehlerhaften JavaScripts erstellen

Manchmal bleibt ein JavaScript reaktionslos stehen, ohne jede Fehlermeldung, und der Fehler läßt sich nicht feststellen.
Tests auf null, undefined etc. fruchten nichts.

Dies tritt beispielsweise auf, wenn der Google Chrome Browser offline auf eine andere HTML-Seiten zugreifen soll, was online ohne Weiteres möglich ist, offline jedoch nicht.

In diesem Fall geht es um einen Zugriff auf das 'parent.document', der reaktionslos bleibt.

GENAU DIESER Zugriff wird wie folgt abgefangen, damit wiederum andere Browser keine falschen Fehlermeldungen ausgeben:

function KlapptNicht()
{
if (document.getElementById)
{
// Catch Chrome Offline Error:

try {parent.document;}

catch(err)
{
alert ("Zugriff nicht möglich");
}

parent.document.getElementById("IrgendWas").value = "IrgendWasAnderes";
}
}

Dieser Abfangmechanismus läßt sich noch weiter ausbauen

JavaScript-Suchformular

Finde Text - Suchfunktion

Offene HTML-Seiten direkt im Browser nach bestimmten Begriffen
durchsuchen:

1) Die in

http://project-icarus.de/erleuchtet/fw/alg/findetext.zip

beiliegende Datei 'finde2.js' in das Verzeichnis der zu
durchsuchenden Seiten kopieren

2) An gewünschter Stelle das Suchfeld in den zu durchsuchenden Seiten
einbinden mit:

<A HREF="javascript:LadeSeite();"> Suche mit JavaScript </A>
(wenn möglich)

3) Und direkt darunter das Feld öffnen mit

<SCRIPT language="JavaScript" type="text/javascript" src="finde2.js">
</SCRIPT>

Das Suchfeld funktioniert derzeit im AOL 4x und 6x, Netscape 4x und 7x, Mozilla und MS Internet Explorer. Es durchsucht die Hauptseite nach der eingegebenen Zeichenfolge

Bei frühen, ungepatchten Versionen des MS Internet Explorer 6 und 7 kann es bei großen Seiten zu Problemen kommen.

Fundort:

Das Script wurde übernommen und adaptiert von BRAVENET:

http://www.bravenet.com/reviews/coolscripts/index.php

Die neuesten Adaptionen befinden sich jeweils in

http://project-icarus.de/erleuchtet/hilfe/finde.js

und in den jeweiligen Menü - Seiten:

Rechte Maustaste auf [xy - Menü aufrufen] und "Ziel speichern unter..."

Bilder geladen

Sanduhr- Mauszeiger / prüfen, ob alle Bilder geladen sind

Sie können Ihren Besuchern durch unterschiedliche Darstellung des Mauszeigers zeigen, ob die Seite bereits vollständig geladen ist oder nicht. Das folgende Skript benennt dazu zunächst den Body per ID mit dem Namen "koerper". Über style = "cursor: wait" wird der Mauszeiger von CSS aus auf eine Sanduhr gesetzt. Im Skript wird in Abständen von 50- Tausendstelsekunden die Funktion "bildstatus()" aufgerufen.

In der globalen Variablen "anzahlbilder" ist die Anzahl aller eingesetzten Bilder gesichert. Die Funktion "bildstatus()" setzt die Kontrollvariable "allegeladen" auf den Wahrheitswert "true". Danach prüft die Funktion per Laufanweisung den Ladezustand jedes Bildes. Der Ladezustand gibt seinerseits einen Wahrheitswert zurück: "True", falls das Bild geladen wurde, "False", falls nicht. Dieser Wert wird einfach mit dem in "allegeladen" multipliziert. Beim Multiplizieren von Wahrheitswerten ist das Ergebnis nur dann "wahr" oder "1", wenn beide Faktoren wahr sind. Für die Laufanweisung bedeutet das: "allegeladen" bleibt nur dann wahr, wenn jedes Bild vom Browser als vollständig geladen deklariert wurde. In der if- Abfrage kontrolliert das Skript genau diesen Zustand.

<body id = "koeper" style = "cursor: wait" >

...

</body>

<script>

var a = setInterval ('bildstatus()',50);
var anzahlbilder = document. images. length;

function bildstatus()
{
allegeladen = true;

for (i = 0; i <anzahlbilder; i ++)
{
allegeladen = allegeladen * document. images [i] . complete;
}

if (allegeladen)
{
clear Interval (a);
document. getElementById ("koerper"). style. cursor = 'auto';
}
}

</script>

Aus: Internet Magazin 11/07

Bilderwechsel 0

Bildwechsel - Urscript

Hier der häufig und gerne verwendete Effekt mit dem Bild, welches wechselt, sobald die Maus darüber fährt.

Hier eine Variante, die auf allen Browsern funktionieren sollte.

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>





<CENTER><A HREF=" ... "
onMouseOver="wechsleBild('mitMaus','katzmaus')"
onMouseOut="wechsleBild('ohneMaus','katzmaus')">
<IMG SRC="movehere.gif" ALT="" WIDTH=152 HEIGHT=110
BORDER=0 NAME="katzmaus"></A></CENTER>

von http://www.editorial.de/tricky/

---------

Achtung: Um den Bilderwechsel sofort zu ermöglichen, die benötigten Bilder grundsätzich in 1-Pixel-Größe auf der Seite (und damit in den Browser-Cache) vorladen:

<p>

<img src="bild1.gif" width="1" height="1" >
<img src="bild2.gif" width="1" height="1" >
<img src="bild3.gif" width="1" height="1" >

usw.

</body>
</html>

Bilderwechsel I

Grafik (Bilder-) wechsel onmouse

- Mit vorgeladenen Bildern

Achtung: Netscape 4 erkennt OnMouse nur im Verweis (HREF-) Tag, nicht im Bild (IMG-) Tag.

Im Head-Bereich:

<Script Language=JavaScript>

</Script>

---

Danach

<A href...onmouseover="xy.src=bild2.src" onmouseout="xy.src=bild1.src"> < IMG NAME="xy" SRC="bild1.jpg" ...>

Oder

<A href...onmouseover="wechseln (0,bild1)" onmouseout="wechseln (0,bild2)"> < IMG NAME="xy" SRC="bild1.jpg" ...>

Bilderwechsel II

Bildwechsel Quick and dirty -

Ohne das Wort "JavaScript"; lädt auch animierte gifs!

<A HREF="suchen.htm" title="Suche"
onMouseDown="suche.src='such3b.gif';"
onMouseOut="suche.src='such3a.gif';" >

<IMG name="suche" SRC="such3a.gif"
title="Suche" ALT="Suche" Border="0" ></A>

Geprüft in Mozilla1.5, Netscape 4, MSIE 5-6

Achtung:

Für Netscape 4

"onMouse..."

immer in den Verweis-Tag, nicht in den Bild (IMG-) Tag legen.

Bilderwechsel III

Bilder ( wechseln )

Vorher: array!

Mit Bildern zu:

f.gif, a1.gif, a2.gif, ein1.gif, ein1a.gif, ein2.gif, ein2a.gif, aus1.gif, aus1a.gif, aus2.gif, aus2a.gif

<IMG name= "f" SRC="f.gif Alt= "Bild F" >

<IMG name= "a1" SRC="a1.gif Alt= "Bild A1" ></A>

<IMG name= "a2" SRC="a2.gif Alt= "Bild A2" ></A>

<A HREF = "Link1.htm"
onmouseover= "f.src= ein1.src; a1.src = ein1a.gif;"
onmouseout= "f.src= aus1.src; a1.src = aus1a.gif;">

<A HREF = "Link2.htm"
onmouseover= "f.src= ein2.src; a2.src = ein2a.gif;"
onmouseout= "f.src= aus2.src; a2.src = aus2a.gif;">

Bilderwechsel IV

Alternatives Bild statt "ALT"-Text -
zeigt bei fehlendem Bild ein Ersatzbild an:

<script language="JavaScript">
var altbild = new Image (länge, breite);
altbild.src = "http...BilderName.jpg";
</script>

<IMG SRC="xyz.jpg" onError = "this.src=altbild.src" >

(Internet Magazin 06 /06)

----

Bild erst auf Wunsch anzeigen:

<IMG SRC= "erstesbild.jpg" OnClick = "javascript:this.src= 'http://...zweitesbild.jpg'" ALT="Bild ansehen? Hier Klicken">

Für das erste Bild kann auch ein Anklick-Symbol gewählt werden - oder gar nichts.

<IMG OnClick = "javascript:this.src= 'http://...zweitesbild.jpg'" ALT="Bild ansehen? Hier Klicken">

Bilder - Alternativer Text als Titel

Titel statt Alt

Bilder immer mit Titel versehen

Normalerweise soll die ALT- Angabe im IMG- Tag einen Alternativen Text anzeigen, wenn aus irgendwelchen Gründen die Grafik nicht angezeigt wird.

Leider gehen die Browser höchst unterschiedlich damit um, und häufig werden gerade bei kleinen Bildern die ALT- Angaben nicht oder nicht vollständig lesbar angezeigt.

Abhilfe: Die ALT-Angabe als "Titel" anzeigen lassen, wenn die Maus über die Grafik fährt. Das geschieht dann immer; der Text wird also auch dann angezeigt, wenn das Bild geladen wurde.

Eigentlich wäre das ganz einfach:

for (var i = 0; i < document.images.length; i++)
{
document.images[i].title=document.images[i].alt;
}

Aber da es immer Umstände zu bedenken gibt, ist es am Ende komplizierter:

// Bilder immer mit Titel versehen
function BildTitel()
{

for (var i = 0; i < document.images.length; i++)
{

// Name der Grafik
BildNameKpl=document.images[i].src;
var BildName = BildNameKpl.split("/");
BildName.reverse();
BildName = BildName.shift(0);

// Wenn die Grafik noch keinen übergeordneten
// Titel aus einem HREF-Verweis hat

if (document.images[i].parentNode.title == "")
{

// Und wenn die Grafik überhaupt eine ALT-Angabe besitzt

if (document.images[i].alt != "")
{
document.images[i].title = document.images[i].alt;
}

else
{
document.images[i].title = BildName;
}

}

else
{
document.images[i].title = BildName + " / " + document.images[i].parentNode.title;
}

}
}

Mailto aufteilen

Mails per JavaScript aufteilen:

<script language="Javascript">

document.write( '\<A HREF\=\"mailto:' + 'name' + '@'+ '123\.com\"\>mail abschicken\<\/A\>' );

</script>

Drucken lassen

Ruft die Druckfunktion des Browsers auf:

"javascript:window.print();"

oder

<Body onLoad="print()" >

Bravenet: Soundklick

Von Bravenet Webmaster Tips and Tricks February 17, 2003:

Make a sound on mouseover. Some of our members have been requesting a script that would generate a sound on when a visitor mouses over a link or other object on the webpage. We found this one and thought we would pass it along.

http://www.bravenet.com/newsletters/tips.php

<HTML>
<HEAD>

<SCRIPT language="JavaScript">


</SCRIPT>

</HEAD>

<BODY>

<P>
Place this code where you want it to appear on the page:

<A HREF="#" onMouseOver="playSound(0)" onMouseOut="stopSound(0)"><B>Move
mouse over to play sound</B></A>

</BODY></HTML>

---------------------------------------------------

Kommentar:

- Geht in Netscape und MSIE, hängt bei letzterem das Sytem aber komplett auf, wenn der Soundplayer nicht richtig konfiguriert ist.

- Erlaubt mehrere verschiedene Sounds einzeln abzurufen, auch unterschiedliche Formate.

- Erlaubt im Gegensatz zum AudioBox Applett mehrere Script-Aktionen gleichzeitig und stoppt beim Verlassen des Link.

Siehe auch:

http://project-icarus.de/erleuchtet/hilfe/sounds1.htm

Kein umrandeter Internet Explorer Link

Internet Explorer gepunktete Link-Umrandung abstellen

Internet Magazin 6/2000

Der Internet Explorer umrandet angeklickte Objekte ( Links, Bilder ) mit gestrichelten Linien. Dies stört vor allem bei Frames. Abstellen läßt sich dies durch kleines JavaScript, das entweder in BODY - Tag des Dokuments oder in HREF - Tags eingefügt wird:

<BODY onclick="if (document.all) body.focus();">
<A HREF "http://www.yahoo.com/" onclick="if (document.all) body.focus();">

---

Sie können den gepünktelten Rahmen auch verhindern, indem Sie im Verweis notieren:
<a href="ziel.htm" onFocus="if(document.all) this.blur()">Text</a>

Beachten Sie jedoch, dass Sie dem Anwender damit die Möglichkeit nehmen, mit der Tabulatortaste auf diesen Verweis zu positionieren und diesen dann mit der Return-Taste auszuführen.

---------------------------------------

Lösung über ein Java Script:

<head>

...

<script language="JavaScriptl.2">



</script>

</head>

<body>

<p>

<a href="ziel.html" onclick="kill-linkrahmen(this);">Ein Link ohne punktierten Rahmen</a>

</p>

</body>