Projekt-Kurzfassung:
Es gibt zahlreiche seitenüberspannende IT-Web-Anwendungsbereiche.
Tratitionell übernimmt ( wegen dem zustandlosen HTTP-Protokoll )
vielfach der Server die Behandlung gegenseitiger Seitenabhängigkeiten,
Logon, Cookies, serverseitiges "User-Tracking",
Upload-Daten und "ausschließlich-serverseitige" Verarbeitungen/Speicherungen
( Severfarmen, Cloude ).
Zu einem Dokument gehört eine innere Struktur.
Zu mehreren Dokumenten gehört ein chronologisch-topologisches Miteinander.
Bei diesem Projekt geht es um die Entwicklung einer "seiten-integrierenden" App,
die lediglich ECMAScript und lokale Web-Technologien verwendet.
Achtung! Wenns es um Geld geht, sind zwingende ( nationale/internationale ) Rechtsvorschriften zu beachten.
Hinweise zur "self-made-MDI-App" in der Veranstaltung ...
Es gibt zahlreiche Server-Farmen-Basierte Web-Technologien, die z.B. mit Hilfe von schwergewichtigen Threads Kunden-Daten im eigene Rechtssystem managen. Es gibt zahlreiche client-/serverbasierte Web-Misch-Technologien, die ein "Web-Gemisch" von Ereignissen managen. Es gibt zahlreiche clientbasierte Web-Technologien, die ohne und/oder mit Server funktionieren. Regionale Erfordernisse werden vorrangig regionale Gewichtungen haben. Big-Data wird vorrangig Big-Data-Gewichtungen haben.
Nach Erich Weniger: WER soll es machen ( Akteure )? WAS soll gemacht werden ( Inhalte )? WARUM soll es gemacht werden ( Begründungen )? WOZU soll es gemacht werden ( Zielsetzungen )? WANN, WO soll es gemacht werden ( Zeitplanung, Organisation )? WIE soll es gemacht werden ( Methoden des Vorhabens )?
Nachfolgend werden lediglich Basis-Ideen und Hinweise stichwortartig beschrieben. Vorbereitend siehe einführend SDI/MDI und MDI Die "self-made-MDI-App" soll praxistauglich sein und Daten lokal gegenseitig zwischen Seiten verwenden.
Hinweise zur "self-made-MDI-App" in der Veranstaltung ...
Hinweise in der Veranstaltung! MDI in der Veranstaltung beachten!
DOM-Element von frame-Seite document von frame-Seite window von frame-Seite frame_nr von frame-Seite 'framename' von frame-Seite
setItem(key, val) getItem(key) delItem(key) delClear()
// Nach dem Laden der Seite alle Form's und deren Content automatisch laden
window.onload = function () {
if (top["bib"]) { top.bib.load_form_items(document); }
};
// vor dem Verlassen der Seite alle Form's und deren Content automatisch speichern
window.onunload = function () {
if (top["bib"]) { top.bib.save_form_items(document); }
};
Wie werden die modernen Web-Technologien unterschieden? Es gibt unterschiedliche ( technische, wirschaftliche, rechtliche ) Sichten:
Es gibt unterschiedliche Technologien, wie z.B. HTML localStorage, HTML Web Messaging ( postMessage API, potentiell auch XSS möglich ), HTML Web worker ( potentiell auch XSS möglich ). JSON-RPC, iFrames, Frames, XSS und Same-origin-policy
XSS funktioniert z.B. mit socket's, grob etwa:
window.onload = function () {
parent.socket.postMessage(
(parseInt(document.body.clientHeight))+","+(document.body.clientWidth)
);
};
Ein verdecktes Arbeiten mit iFrames kann z.B. einen "sehr kleinen iFrame" in den HTML-Quellcode schreiben, etwa mit
try { document.write('<iframe name="my_name" src=\'my_get_uri()+"my.html")+\' ' +
'style="border:0px;width:1px;height:1px;position:absolute;bottom:0px;right:0px;visibility:visible;"'></iframe<");
} catch(e) { }
oder etwa grob z.B.
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.sozialbook.net/de_DE/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'sozialbook-jssdk'));
oder etwa grob z.B. ein unsichtbarer iframe mit ( Prinzip )
function unsichtbarer_iframe () {
var ifrm = document.createElement("iframe");
iframe.className="position:absolute;left:0px;top:0px;zIndex:2;display:none;0;pacity:0;";
....appendChild(...iframe);
}
Wie werden Zugriffe zwischen iframes und dem Document, das den iframe enthält, progrmmiert ( same origin )?
Zum iframe-element
( http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element )
können u.a. gehören
src, sandbox="allow-same-origin allow-forms allow-scripts",
( old: frameborder marginwidth marginheight noresize )
Achtung! Code ist ungeprüft!
<iframe id="ifrm" name="ifrm" width="468" height="60" src="my1.htm" sandbox="allow-same-origin allow-forms allow-scripts" onload="set_iframe_height(this.id)"></iframe>
Beispiele ( Zugriff auf iFrame ):
var iframe;
iframe = window.frames[nr]; // nr (index) des Tags
iframe = window.frames[name]; // name des Tags
iframe = window.getElementsById( id ); // id des Tags
iframe = window.getElementsByTagName( name )[ 0 ];
alert( "Frame title: " + iframe.contentWindow.title );
Im iFrame-HTML-Quelltext für iFrame auf iFrame Zugriffe:
var ifrm2 = parent.document.getElementById('ifrm2');
Beispiele ( Lade iframe/frame ):
window.frames[name].location = url; // mit URL in browser history:
window.frames[name].location.replace(url); // ohne URL in browser history:
<a target="name" href="my2.htm">Lade my2.htm in iframe</a>
function set_iframe(id_ifrm, str) {var ifrm = document.getElementById(id_ifrm);
if(typeof str==="string") {
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
try {ifrm.document.open();
ifrm.document.write(str);
ifrm.document.close();
} catch (e) { alert(e); }
}
//Achtung! Folgender Code ist ungeprüft ( lediglich das Prinzip ).
get_iframe_win = function(iframe_el) {
var win = iframe_el.defaultView || iframe_el.contentWindow;
//win = win || iframe_el).__parent__ || (iframe_el.name && document.frames[iframe_el.name]) || null;
return win;
}
function get_iframe_height(doc) { doc = doc || document;
var body = doc.body, html = doc.documentElement,
height = Math.max( body.scrollHeight,body.offsetHeight,html.clientHeight,html.scrollHeight,html.offsetHeight);
return height;
}
function set_iframe_height(id) {
var ifrm = document.getElementById(id),
doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
ifrm.style.height = get_iframe_height( doc ) + 4 + "px"; //4 für IE
ifrm.style.visibility = 'visible';
}
function get_iframe_win (id_or_nr) { var win, ifrm, nr = id_or_nr;
if(typeof nr === 'number'){ ifrm = document.frames[nr];
} else { ifrm = document.getElementById(nr); }
win = ifrm.defaultView || ifrm.contentWindow;
return win;
}
function get_iframe_doc(id_or_nr) {
var doc, win = get_iframe_win(id_or_nr);
doc = win.contentDocument.document || win.contentDocument || win.document;
return doc;
}
function get_iframe_height(id_or_nr) {
var doc = get_iframe_doc(id_or_nr)||document, body = doc.body, html = doc.documentElement,
height = Math.max( body.scrollHeight,body.offsetHeight,html.clientHeight,html.scrollHeight,html.offsetHeight);
return height;
}
function set_iframe_height_max( id_or_nr ) {
var doc = get_iframe_doc(id_or_nr), body = doc.body;
body.style.visibility = 'hidden';
body.style.height = "10px"; // reset to minimal height ...
body.style.height = get_iframe_height() + 4 + "px"; //4 für IE
body.style.visibility = 'visible';
}
Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr