Tipps fürs Webauthoring |
JavaScript Library |
|
|
|
|
JavaScript LibraryViele Probleme tauchen immer wieder auf. Da lohnt es sich, wenn man zentrale Probleme in Funktionen auslagert und diese Funktion mit LINK-Tag einfach in das HTML-Dokument einbindet, wenn man sie braucht. Solche immer wieder benötigten Funktionen stelle ich hier vor. Alle Sourcecodes dürfen in eigenen Projekten - gratis - verwendet werden, solange der Verweis auf ihren Ursprung erhalten bleibt.
proceed.js: Automatische Weiterleitung nach ZeitEine automatische Weiterleitung nach Zeit ist an für sich einfach. Meine Funktion ist ein klein wenig komplexer, weil sie noch auch berücksichtigt, dass die Verbindung manchmal so schlecht ist, dass zum gewünschten Zeitpunkt die Seite noch gar nicht ganz geladen sein könnte (insbesondere beim Prefetching von Grafiken). In dem Fall wartet sie noch so lange, bis die Seite vollständig angezeigt wurde.
<!--
// Proceed to another page after a certain time,
// but wait till page has been fully loaded.
// Usage: LINK to your HTML page and call it in the
// BODY tag like:
// onload="proceed('<new-url>',<seconds to wait>)"
var seconds=0, dest_url="", dest_time=0;
function proceed (where, when)
{
seconds++;
if (where > "") {
dest_url = where;
dest_time = when;
}
if (dest_url > "" && seconds > dest_time) {
window.clearInterval(intvl);
if (top.location.href == origin_url) {
top.location.href = dest_url;
}
}
}
var intvl = window.setInterval('proceed()','1000');
// Written by Metin Savignano, originally published
// in the JavaScript Library at www.savignano.net
// -->
Aufruf:
<body onload="proceed('new.html',10)">
Argument-1 ist die URL der HTML-Seite, zu der es weitergehen soll, Argument-2 ist die Anzahl der Sekunden, die gewartet werden soll.
resize.js: Automatische Größenanpassung für Netscape 4.xWenn man beim Netscape Navigator 4.x die Fenstergröße verändert, kann er leider den Inhalt nicht korrekt an die neue Größe anpassen. Entweder es passiert gar nichts oder er würfelt den Fensterinhalt sogar komplett durcheinander. Ein Klick auf "Neu laden" bringt die Sache zwar wieder in Ordnung, aber eleganter ist es doch, wenn der Browser das selbst kann. Und dazu verhelfen wir ihm mit dem folgenden JavaScript.
<!--
// Enable correct resizing in Navigator 4.x
// (IE 4+ and Navigator 6 do it perfectly)
// Usage: Just LINK to your HTML page
function handleResize()
{
if (window.prevWidth != window.innerWidth ||
window.prevHeight != window.innerHeight)
{
history.go(0);
return false;
}
}
if (navigator.appName.indexOf("Netscape") >= 0 &&
parseInt(navigator.appVersion) == 4)
{
window.prevWidth = window.innerWidth;
window.prevHeight = window.innerHeight;
window.captureEvents(Event.RESIZE);
window.onresize = handleResize;
}
// Written by Metin Savignano, originally published
// in the JavaScript Library at www.savignano.net
// -->
Das Script muss nur eingebunden werden und macht den Rest automatisch. Der Resize-Handler wird nur für Netscape 4.x installiert, da der Internet Explorer sowie Netscape 6 das Resizing perfekt beherrschen. Die Abfrage, ob sich die Breite oder Höhe tatsächlich geändert hat, ist übrigens notwendig, weil Netscape 4.05 einen Bug hatte, der bewirkte, dass das Laden von Seiten, die größer (z.B. länger) als eine Bildschirmseite sind, fälschlicherweise Resize-Events generierten. history.go(0) hat übrigens gegenüber document.location.reload() den Vorteil, dass die Daten aus dem Cache geholt werden.
frames.js: Frameset prüfen und wiederherstellenEin immer wiederkehrendes Problem: In den Suchmaschinen findet der Anwender nicht das Frameset, sondern die - inhaltlich relevanten - Unterseiten. Ruft er diese aber nun auf, dann sieht das nicht nur unschön aus, sondern es fehlt ihm auch oft die Navigationsleiste, denn das tolle an Frames ist es ja gerade, die Navigationsleiste immer sichtbar zu haben, auch wenn man durch längere Dokumente scrollt. Was tun? Die einfachste Möglichkeit ist die, bei Direktabruf der Einzelseite mit JavaScript das Frameset aufzurufen. Der Nachteil ist dabei, dass mit dem Frameset auch die Anfangsseite geladen wird und der Anwender die ihm von der Suchmaschine empfohlene Seite dann erst wieder suchen muss. Das ist unschön. Etwas fortgeschrittener ist da schon die Lösung, das Framset aufzurufen und ihm als Parameter die aktuelle Seite mitzugeben, so dass diese gleich angezeigt wird. Unschön ist dabei, dass fortan immer die aktuelle Seite als Parameter im Eingabefeld angezeigt wird, was zu elend langen URLs führt. Viel eleganter ist da schon das folgende Script, das sich zunutze macht, dass window.name auch beim Wechsel des Dokuments erhalten bleibt. Man übergibt also in window.name die URL des aktuellen Dokuments, ruft das Frameset auf und holt dann die URL wieder heraus und lädt die gewünschte Seite ins Frameset. Da window.name nur bestimmte Zeichen enthalten darf, muss man dabei etwas tricksen (siehe Funktion x_escape), aber es funktioniert perfekt. Aber Ehre wem Ehre gebührt: Die Idee basiert auf einem Artikel von Hatto von Hatzfeld und wurde von mir für die Frameset-Problematik lediglich adaptiert. Zusätzlich wird bei diesem Script der originale window.name wiederhergestellt.
<!--
/*
frames.js - version date 18-04-2003
Checks, if document is presented in its frameset.
If not, loads frameset with current document.
Usage: LINK to all HTML pages in the frame
and call it in the HEAD section like this:
checkFrames(myFrameName,FramesetURL);
*/
// Misc string functions we need
function replace(text,from,to) // replace strings in strings
{
while (( ti=text.indexOf(from) ) >= 0)
{
text = text.substr(0,ti)+to+text.substr(ti+1);
}
return text;
}
function x_escape(text) // extended escape function
{
var x_chars = "*2A+2B-2D.2E/2F_5F";
text = escape(text);
for (ci=0; ci < x_chars.length; ci+=3)
{
text = replace(text,x_chars.substr(ci,1),
"%"+x_chars.substr(ci+1,2));
}
return text;
}
function store_url(url)
{
var storevar = "STORED_URL="+url+" ORIG_NAME="+top.window.name;
top.window.name = replace(x_escape(storevar),"%","_");
}
function retrieve_url()
{
var url = "";
var storevar = unescape(replace(top.window.name,"_","%"));
if (storevar.indexOf("STORED_URL=")==0 &&
(ni=storevar.indexOf("ORIG_NAME=")) > 0)
{
url = storevar.substr(11,ni-11);
top.window.name = storevar.substr(ni+10);
}
return url;
}
// Check frame name and load frameset when necessary
function checkFrames(frameset_url,frame_name)
{
if (parent.frames[frame_name] &&
parent.frames[frame_name].document == document)
{
if(( stored_url=retrieve_url() ) > "") {
document.location.replace(stored_url);
}
}
else
{
store_url(document.location.href);
top.location.replace(frameset_url);
}
}
/*
Written by Metin Savignano, originally published
in the JavaScript Library at www.savignano.net,
based on an idea by Hatto von Hatzfeld
*/
// -->
Das Script wird nun in jede Unterseite gelinkt, die in dem betreffenden Frame angezeigt werden kann. Wichtig: Dazu gehört auch die als Startseite im Frameset angegebene! Aufgerufen wird dort dann die Funktion checkFrames() direkt aus der HEAD-Section. Argument-1 ist die URL des Framesets, zu der die Seite gehört; Argument-2 ist der Name des Frames, in dem das Dokument angezeigt werden muss. Beispiel: Wenn das Frameset frameset.html so aussieht... <frameset cols="160,*" border="0"> <frame src="navigate.html" name="myNavigation"> <frame src="homepage.html" name="myMainFrame"> </frameset> ...dann sollen alle Seiten im Frame "myMainFrame" angezeigt werden. In homepage.html und allen anderen Seiten, die in diesem Frame angezeigt werden, wird das Script nun so eingebunden:
<html>
<head>
<title>Meine wunderbare Welt</title>
<script language="JavaScript1.2" src="scripts/frames.js"
type="text/javascript">
</script>
<script language="JavaScript1.2">
<!--
checkFrames("frameset.html","myMainFrame");
//-->
</script>
</head>
<body>
...
Das war's schon! Wenn alle Seiten im selben Frameset angezeigt werden sollen, kann man den Aufruf von checkFrames() auch direkt in frames.js als letzte Zeile aufnehmen. Dieses Script verwende ich übrigens immer, wenn ich Framesets benutzt habe, z.B. auch hier zu sehen (ruhig ausprobieren: Link öffnet in neuem Fenster).
|
|||||||||||
