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