Dies ist nicht, wonach es aussieht ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameset</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<frameset cols="70%,30%">
   <frame src="links.html">
   <frame src="rechts.html">
   <noframes>
     <body>
       <h1>Schade!</h1>
       <p>Ihr Browser unterst&uuml;tzt keine Frames,
       aber wenn Sie auf die folgenden Verweise klicken,
       k&ouml;nnen Sie sich die Inhalte dennoch in separaten
       Fenstern anzeigen lassen:</p>
       <p><a href="links.html" target="links"></a></p>
       <p><a href="rechts.html" target="rechts"></a></p>
     </body>
   </noframes>
</frameset>
</html>

Dies ist kein Frameset

Diese Seite sieht zwar so aus, als ob es sich dabei um ein Frameset handeln würde, so wie man es mit obigem Quellcode erzeugen könnte, in Wahrheit handelt es sich aber um ein normales HTML-Dokument, in dem drei DIV-Elemente mittels JavaScript und CSS dazu gebracht werden, sich wie zwei Frames und die dazwischen liegende verschiebbare Frameborder zu verhalten.

Den eigentlichen Quellcode sehen Sie, wenn Sie bei aktiviertem JavasScript die vermeintliche Frameborder nach links schieben.

Bei deaktiviertem JavasScript müssen Sie im hellblauen Bereich je nach Fenstergröße entspechend mehr scrollen, um alles lesen zu können.

... sondern etwas ganz anderes!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fakeframeset</title>
<style type="text/css">
<!--
html, body {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  background-color:#DDEEFF;
}

* html {
  overflow:auto;
}

#links {
  height:100%;
  padding:0;
  float:left;
  overflow:auto;
  width:70%;
  background-color:#ffffee;
}

#rechts {
  height:100%;
  margin:0;
  padding:0;
  overflow:auto;
}

#border {
  width:0;
  height:100%;
  float:left;
  border:outset ActiveBorder;
  border-width:0 2px;
  margin:0;
  padding:0;
  cursor:e-resize;
}
-->
</style>
<script type="text/javascript">
<!--
// Dank an Daniel Thoma f&uuml;r seinen Kurzartikel
// http://aktuell.de.selfhtml.org/tippstricks/dhtml/draganddrop/

var alles;

// Das Objekt, das gerade bewegt wird.
var dragobjekt = null;

// Position, an der das Objekt angeklickt wurde.
var dragx = 0;

// Mausposition
var posx = 0;

function draginit() {
  document.onmousemove = drag;
  document.onmouseup = dragstop;
  alles=document.getElementById('links');
}

function dragstart(element) {
  dragobjekt = element;
  dragx = posx - dragobjekt.offsetLeft;
}

function dragstop() {
  dragobjekt = null;
}

function drag(ereignis) {
  posx = document.all ? window.event.clientX : ereignis.pageX;
  if(dragobjekt != null) {
    alles.style.width = posx + "px";
  }
}
//-->
</script>
</head>
<body onload="draginit()">
<div id="links">
Inhalte im rechten Bereich.
</div>
<div onmousedown="dragstart(this)" id="border"></div>
<div id="rechts">Inhalte im linken Bereich</div>
</body>
</html>

Verschieb- und scrollbare Elemente

Gleich vorweg: Diese Seite soll all denen als abschreckendes Beispiel dienen, die behaupten, die Funktionalität von Framesets ließe sich grundsätzlich auch immer ohne Frames realisieren.

Zwar lässt sich der Teufel Frameset, – wie hier demonstriert – durchaus austreiben, dafür handelt man sich aber JavaScript als Beelzebub ein und auch im Bereich CSS steigt der Codierungsbedarf auf ein Vielfaches.

Ein koordiniertes Scrolling über window.scrollBy() bzw. window.scrollTo() oder das gemeinsame Anspringen von Ankerpunkten, wie es gerade für Synopsen wichtig ist, lässt sich mit dieser Technik nicht realisieren, und in Gecko-Browser versagen – anders als in Frames – auch Mausrad und Cursortasten ihren Dienst. Ein Verschieben der Pseudoframeborder ist – anders als bei echten Framebordern – nur mit aktiviertem Javascript möglich.

Der vorliegende Code versucht, die Funktionalität eines echten Framesets so weit wie möglich nachzuahmen und dabei auch Nutzer zu berücksichtigen, die Javascript in ihrem Browser deaktiviert haben. So wird etwa der waagerechte Doppelpfeilcursor, der die horizontale Verschiebemöglichkeit des Borderelements symbolisiert, diesem erst über die Initialisierungsfunktion zugewiesen.

Das Drag-and-Drop-JavaScript orientiert sich an Daniel Thomas Ansatz. Auf die in seinem Artikel berücksichtigte vertikale Verschiebemöglichkeit konnte im vorliegenden Beispiel verzichtet werden. Auch wird in diesem Beispiel kein Element in seiner absoluten Positionierung verschoben, sondern lediglich die Weite des linken Pseudoframe-Elements dynamisch angepasst. Da der rechte wie auch der linke Pseudoframe sowie das dazwischen liegende Borderelement floaten, ergibt sich alles weitere von selbst.

Im Offlinebetrieb bricht im IE der rechte, hellblaue Bereich bei Einengung durch das Borderelement nach unten aus und bildet dort drei nebeneinander liegende vertikale Scrollbalken. Im Onlinebetrieb tritt unter Windows 98 dann das Resizeevent ein, wodurch die Seite mit ihren ursprünglichen Proportionen neu geladen wird. In anderen Browsern ist dieses Verhalten nicht zu beobachten, wo in diesem Fall wie für Framesets typisch nur ein horizontaler Scrollbalken in diesem verkleinerten Bereich erscheint.

Das Cursorverhalten ist teilweise unberechenbar: So kann es vorkommen, dass ein MouseUp-Ereignis nicht registriert wird und das Borderelement so am Cursor hängen bleibt. Ebenso kann es passieren, dass das Borderelement unwiederbringlich aus dem angezeigten Bereich rutscht.

Dies ist nicht, wonach es aussieht ...

Dies ist kein Frameset

... son­dern etwas ganz ande­res!

Ver­schieb- und scroll­bare Ele­men­te

... sondern etwas ganz anderes!

Verschieb- und scrollbare Elemente