9 Frames zu einer verschmelzen lassen

brinki

Aktives Mitglied
Thread Starter
Dabei seit
27.05.2005
Beiträge
621
Reaktionspunkte
1
Hallo liebe Macuser-Gemeinde!

Ich habe das Problem, dass ich gerne eine Internetseite erstellen (nur mit HTML) würde und die in 9 Frames unterteilen möchte. Jedoch soll man nicht jedes Frame alleine Scrollen können, sondern nur alle zusammen.
Gibt es dafür vielleicht irgendein Befehl der das ganze zusammenhält?
Vielen Dank im vorraus für jegliche Art von Hilfe ;)
 
Wenn der Zweck der Frames der ist, dass sich immer nur ein Teil der Seite aktualisiert, würde ich Dir http-Requests ans Herz legen.
Statt Frames machst du dann DIV-Elemente, deren Inhalt du mit JavaScript via http-Reuests aktualisiert.

Somit bist du nur an JavaScript gebunden, was ja im Grunde auch schon fast zu HTML dazugehört (nicht schlagen, bitte).

ansonsten fällt mir nichts ein, nein,ich bin mir sicher, dass es da nichts gibt.

gruß
Lukas

PS.: Nein, ich werde es NICHT Ajax nennen!!!
 
Danke erst mal für den Tipp! Hat denn vielleicht noch jemand eine andere Idee? Also einen leichteren Weg?
 
Statt Frames machst du dann DIV-Elemente, deren Inhalt du mit JavaScript via http-Reuests aktualisiert.
Hast du da nen Link, der nichts mit Ajax zu tun hat? Ajax läuft ja über einen XML Parser. Geht das auch ohne, wenn du es schon nicht Ajax nennst?

Würde mich mal interessieren weil ich ein ähnliches Refresh-Problem hab.
 
Weil mir Deine Aufgabe nicht klar ist, rate ich mal.
Du schaltest die Frames auf nicht scrollen, stellst aber - sagen wir die Höhe der Frames auf 500px. Alle Frames liegen in einem weiteren Frame mit einer scrollbaren Höhe von - sagen wir 200 bis 500 px. Damit wird teilweise - je nach scrollen - ein Teil des Inhalts der anderen Frames verdeckt.
Ob Du so etwas gemeint hast?
Und im übrigen bin ich der Meinung, dass vermutlich auch das mit div-Boxen zu machen ist.
 
Der Link, der mich zuder Technik von HTTP-Requests gebracht hat:
http://developer.mozilla.org/de/docs/AJAX:Getting_Started

Im Grunde hab ich genau diese Funktion auch genommen, die da steht.
Als Codeschnipsel hab ich mir folgendes angelegt:
PHP:
/*
 * dat/js/request.js
 *	Requestfunktion fuer das gesamte Projekt
 *
 */
var request_funcs = new Array();
function macheRequest(url,funktion) {
	http_request = false;
	
	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
			http_request.overrideMimeType('text/xml');
	// zu dieser Zeile siehe weiter unten
		}
	} else if (window.ActiveXObject) { // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}
	
	if (!http_request) {
		alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
		return false;
	}
	http_request.onreadystatechange = function(){
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
			dw("Funktion via Variable *Yeah*");
			var func = request_funcs[funktion];
			if(undefined != func){
				func(http_request.responseText);
			}else{
				alert("Diese Funktion " + funktion + " gibt es wohl nicht");
			}
						
		} else {
				alert('Bei dem Request ist ein Problem aufgetreten.');
		}
	}
}
	http_request.open('GET', url, false);
	http_request.send(null);
}

Aufgerufen wird das ganze dann so:

PHP:
request_funcs['handle_funktion'] = handle_funktion;  // Abarbeitende Funktion
macheRequest("pfad/zur/nachzuladenden/datei.html","handle_funktion"); // Request machen

Die Funktion "handle_funktion()" sollte freillich vorher angelegt werden :) In der steht drin, was mit dem Wert, der zurückgegeben wird passieren soll.

Die Unterschiede zu der Requestfunktion in dem link und zu meiner:
Der Request wird Syncron, d.h. das Script pausiert so lange, bis die Ergebnisse da sind (Das Erste A von Ajax passt also nicht mehr)
Nicht zwingend wird XML zurckgegeben, bei mir zum Beispiel sind es zu 95% HTML-Bruchstücke (Das X von Ajax passt also auch nicht mehr).
Die abarbeitende Funktion wird als Objekt mitgeliefert.
https://www.macuser.de/forum/showthread.php?t=239490

Wenn man es einmal verstanden hat, ist es kinderleicht :)
Muss halt nur einmal "Klick" machen und das wars :D

gruß
Lukas

PS.: Kann sein, das in meiner Funktion noch ein Fehler ist, hab den aus meinem derzeitigem Projekt Schnipsel kopiert und dann ohne u testen ein wenig nachbearbeitet. Dürfte aber nur eine Klammer oder so sein, die fehlt, wenn überhaupt :D
 
Zuletzt bearbeitet von einem Moderator:
Ich finds wirklich voll super nett das du dir so mühe gegeben hast! aber wenn ich ganz ehrlich bin weiss ich so gut wie nichts damit anzufangen =(
 
EDIT: und wichtig!
Die macheRequest()-Funktion funktioniert so nur in Safari und Opera, FireFox meldet einen Syntaxfehler mit dem Ort der Geladenen Datei.
Daher bitte mehr auf die Idee der Sache achten, nicht zu sehr auf den Quelltext)
Edit ende...


Ok, ich erklärs mal anhand eines Beispiel mit HTML-Dateien :)

Wir haben die startseite, die, die wir im Browser direkt öffnen (Auf ein absolute Minimum reduziert)

HTML:
<html>
<head>
<title>blubb</title>
<script type="text/javascript" language="javascript">
var request_funcs = new Array();
request_funcs['handle_inhalt'] = handle_inhalt_func;
function macheRequest(url,funktion) {
    http_request = false;
    
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/xml');
    // zu dieser Zeile siehe weiter unten
        }
    } else if (window.ActiveXObject) { // IE
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    
    if (!http_request) {
        alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
        return false;
    }
    http_request.onreadystatechange = function(){
    if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            dw("Funktion via Variable *Yeah*");
            var func = request_funcs[funktion];
            if(undefined != func){
                func(http_request.responseText);
            }else{
                alert("Diese Funktion " + funktion + " gibt es wohl nicht");
            }
                        
        } else {
                alert('Bei dem Request ist ein Problem aufgetreten.');
        }
    }
}
    http_request.open('GET', url, false);
    http_request.send(null);
}  

function handle_inhalt_func(inhalthtml){
  document.getElementById('inhalt').innerHTML = inhalthtml;
}
</script>
<!-- Kopfdaten-->
  <body>
    <div id="navi">
       <a href="javascript:macheRequest('home.html',handle_inhalt)">Home</a><br>
       <a href="javascript:macheRequest('impr.html',handle_inhalt)">Impressum</a><br>
       <a href="javascript:macheRequest('fotos.html',handle_inhalt)">Fotos</a><br>
    </div>
    <div id="inhalt">
<!-- Hier steht der Inhalt drin, für diese Demo braucht aber nichts drin stehen-->
    </div>
  </body>
</html>

So, und dann haben wir noch drei weitere Dateien, eine fürs "Home", eine fürs Impressum und eine mit Fotos.
Die sehen dann so aus: (Ich machs mal mit nur einer Datei, mit den anderen its genauso)
HTML:
<h1>HOME</h1>
<p>Herzlich willkommen auf meiner Seite. Schaut doch mal ins Impressum oder in die Fotos</p>

So, schritt für Schritt:
Beim Aufruf der Seite steht im DIV "Inhalt" nichts drin, aber die Links können wir sehen.

Klicken wir jetzt auf einen Link, wird die JS-Funktion "macheRequest" aufgerufen, und zwar mit zwei Parametern.
Erstens die URL zu der Datei, die wir nachladen möchten, und zweitens den Namen der Funktion, die das ganze verarbeiten soll.
Die "macheRequest" läd quasi im Hintergrund, den Inhalt der entsprechenden Datei in eine Variable, und zwar die "http_request.responseText".
Um den Request verarbeiten zu können, haben wir ja den Namen der entsprechenden Funktion angegeben.(sie weiter unten für weitere Erklärungen hierzu)
Ist der Request erfolgreich, wird der Inhalt von http_request.responseText, also der Datei die wir geöffnet haben, an die nächste Funktion, und zwar handle_inhalt_func weitergegeben. Und die macht nichts anderes, als dieen Inhalt in das Div-Element mit der ID "inhalt" zu schreiben.

Das wars :)

Danach sieht die Datei aus, als ob in der index.html der Inhalt von der home.html in dem Inhalts-Div stehen würde :)


(Hier zu weiteren Erklärungen)
Der Funktionsname, den wir mitgeben, ist eigentlich nur der Schlüssel eines assioativen Arrays. Dort drin steht der eigentliche Funktionsname als Objekt drin. der zweite Link in meinem vorherigen Post erklärt das ganze ein wenig ausführlicher. Aber dazu sollte man sich ein wenig mehr in die Substanz von JavaScript einlesen. SelfHTML kann ich hier leider nicht unbedingt empfehlen, was dieses thema angeht :(
Wichtig zu wissen ist:
Will man eine zweite abarbeitende Funktion, so muss man, neben der Funktion selbst, noch ein weitere Element dieses Arrays anlegen.
Als "Index" muss dann der Name stehen, mit welchen man diese Funktion ansprechen möchte, und als Wert der eigentliche Funktionsname, OHNE anführungsstriche. Die beiden Werte dürfen auch gleich sein, hier hab ich es nicht gemacht, damit man sie unterscheiden kann :)

So, hoffe, nun einige Fragen aus dem Weg geräumt zu haben :)

gruß
Lukas
 
Zuletzt bearbeitet von einem Moderator:
koli.bri :D supi erklärung genau sowas hab ich gesucht.

aber ich glaube nicht das der thread ersteller irgendwas auser bahnhof versteht?
Ich tip eher mal auf totaler anfänger dem das ganze nicht so klar is.( das ist jetzt nicht beleidigend gemeint.)


Ich denke es wäre gut wenn du mal versuchst dein projekt bei einem kostenlosen anbieter für webspace hochzuladen (funpic.de) und dann könen wir uns ein bild machen welches die lösung um eniges erleichtert.
 
Lukas, tausend Dank für die ausführliche Erklärung!

Ich hab zwar schon Diverses mit XMLHttp gebaut, aber alles ASP basiert, also serverseitig. Dabei ging es in erster Linie um Abfragen von Daten einer Web-API. Die Daten werden dann fix und fertig an den Browser gesendet.

Aber die Manipulation von Daten, die der Browser bereits hat, war genau das was mir gefehlt hat. ;)
 
Los,

wir wollens sehen !

warum nimmst Du nicht Flash - benutzen eh alle.
 
Die Requestfunktion von mir macht Probleme in FireFox und Camino... da müsste also noch mal nachgebessert werden

thread zu dem Thema:
:koch:


Warum man kein Flash benutzen sollte: Weils schlichtweg nicht nötig ist.
 
Zuletzt bearbeitet von einem Moderator:
Eine weitere Lösung neben den eleganten HTTP-Requests: <iframes>. Wenn schon retro, dann richtig :)
 
Da mir das ganze keine Ruhe gelassen hat und ich das gerne einbauen will, hab ich nochmal ein wenig geforscht..

Damit funktioniert's:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Ajax</title>

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

    var http_request = false;

    function macheRequest(url) {

        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
                // zu dieser Zeile siehe weiter unten
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
            return false;
        }
        http_request.onreadystatechange = alertInhalt;
        http_request.open('GET', url, true);
        http_request.send(null);

    }

    function alertInhalt() {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                htmlAusgabe(http_request.responseText);
            } else {
                alert('Bei dem Request ist ein Problem aufgetreten.');
            }
        }

	function htmlAusgabe(text) {
	
	document.getElementById("meindiv").innerHTML = text;
	}

    }
</script>
</head>

<body>


<span
    style="cursor: pointer; text-decoration: underline"
    onclick="macheRequest('test.html')">Einen Request absetzen
</span>

<div id="meindiv">test</div>


</body>
</html>
Dabei hab ich mich sehr eng am Code auf mozilla.org orientiert. Ich weiß nicht, ob meine Variante Nachteile hat, läuft aber wie gesagt. Bloß bei Firefox gibt es irgendein Cache-Problem. Die nachgeladene Datei bleibt auch nach ner Änderung die alte.

Allerdings bringt mich die ganze Sache auf eine andere Frage:

Gibt es sowas wie nen HTML-Filter? Der Hintergrund ist folgender:
Angenommen ich habe eine komplette HTML Datei mit <html><head><body>, etc., will aber nur den Teil zwischen <body></body> verwerten. Was dann?

Ich denke da z.B. an eine .asp oder .php Seite, die ihr Skript brav Serverseitig abarbeitet und das Ergebnis dann losschickt. Das Ergebnis ist schließlich immer eine komplette HTML Seite mit allen Tags.

Wünschenswert wäre also ein Filter, der mir alles zwischen <body></body> ausspuckt und den Rest gen Junk befördert.

Hat jemand ne Idee?
 
Jo, die Funktion noch um einen Parameter erweitert (und zwar welches Div ersetzt/verändert werden soll), und die Funktion lässt sich ideal verwenden! ;)
Das mit dem FireFox kann ich mir gerade nicht erklären...
Ansonsten, eine andere Möglichkeit mit Requests, die nicht asyncron sind:
https://www.macuser.de/threads/requestfunktion-funktioniert-im-firefox-und-camino-nicht.246627/#post-2726145
zu dem HTML-Aufteiler:
Das sollte mit Regulären Ausdrücken funktionieren. entweder unter JavaScript, oder halt PHP.

Aber wozu?
da die Requests nur auf die eigene Domain laufen dürfen, sollte man ja Kontrolle drüber haben, was in den Dateien drin steht. Und wenn ich da nur den Part zwischen dem beiden Body-Tags haben will, dann schreib ich auch nur den da rein :D
Oder ist die Frage jetzt auf was anderes bezogen? Dann wär sie, denke ich, in einem eigenem Thread besser aufgehoben ;)

so, jetzt muss ich mich aber wieder mit meinen Scripten rumprügeln, die stehn grad wieder auf... *ASCII-Morgenstern und Endschlosschleifen-Peitsche raushol*

mfg
Lukas
 
Hallo liebe Macuser-Gemeinde!

Ich habe das Problem, dass ich gerne eine Internetseite erstellen (nur mit HTML) würde und die in 9 Frames unterteilen möchte. Jedoch soll man nicht jedes Frame alleine Scrollen können, sondern nur alle zusammen.
Gibt es dafür vielleicht irgendein Befehl der das ganze zusammenhält?
Vielen Dank im vorraus für jegliche Art von Hilfe ;)

Wenn du unbedingt Frames willst, dann stelle einfach 9 iFrames auf
die Seite, ohne Scrollen, fest plaziert.

iFrame = Inline-Frame
 
Zurück
Oben Unten