{"id":41702,"date":"2017-06-05T21:47:56","date_gmt":"2017-06-05T19:47:56","guid":{"rendered":"https:\/\/clubcomputer.at\/?p=41702"},"modified":"2017-06-05T23:11:03","modified_gmt":"2017-06-05T21:11:03","slug":"mit-fremden-federn-ii","status":"publish","type":"post","link":"https:\/\/clubcomputer.at\/2017\/06\/05\/mit-fremden-federn-ii\/","title":{"rendered":"Mit fremden Federn II"},"content":{"rendered":"<p style=\"text-align: center;\"><em><span style=\"color: #ff6600;\">[Achtung, nicht alle Objekte auf dieser Seite sind im Sinne des https-Protokolls von sicheren Quellen.]<\/span><\/em><\/p>\n<p><script src=\"\/relay.aspx?target=http:\/\/buero.clubcomputer.at\/mff\/html.js\" type=\"text\/javascript\"><\/script><\/p>\n<div style=\"background-color: lime; text-align: center;\"><em>Der aktuelle Kurs eines Bitcoin ist <b><span id=\"bitcoin\"><\/span> \u20ac<\/b>.<\/em><\/div>\n<div style=\"background-color: #ff99cc; text-align: center;\"><em>Der nicht ganz aktuelle Kurs eines Bitcoin ist <b>1234,56 \u20ac<\/b>.<\/em><\/div>\n<p><script>\nGetHtmlFileTag(\"\/relay.aspx?target=https:\/\/coinfinity.co\/\", \"bitcoin\", \"span\", \"class\", \"btc_price\");\n<\/script><br \/>\nEs gibt neben Frames (siehe Artikel <a href=\"https:\/\/clubcomputer.at\/2017\/05\/23\/mit-fremden-federn\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mit fremden Federn<\/a>) auch andere\u00a0M\u00f6glichkeiten, fremde Inhalte in der eigenen Seite zu integrieren und die beiden farblich gekennzeichneten Zeilen zeigen ein Beispiel daf\u00fcr. Zeile gr\u00fcn: aktueller Wechselkurs wird per JavaScript von einer fremden Seite geholt. Zeile rosa: statische Zeile.<\/p>\n<p>JavaScript, die Lingua Franca des Internet, erlaubt den Import von Inhalten fremder Seiten. JavaScript erlaubt es, w\u00e4hrend des Ladens oder auch nach Interaktionen den Inhalt einer Seite zu ver\u00e4ndern und durch fremde Inhalte aus anderen Dateien im Web zu erg\u00e4nzen. Und auch bei JavaScript stellen\u00a0wir gewisse Barrieren fest, die \u00fcberwunden werden m\u00fcssen.\u00a0In einem reinen Html-Dokument stehen uns keine serverseitigen Sprachen\u00a0wie PHP oder ASPX\/C# zur Verf\u00fcgung und daher muss man alle Aktivit\u00e4ten in JavaScript erledigen.<\/p>\n<p>Wenn man auf der eigenen Seite etwas zeigen m\u00f6chte, was starken Schwankungen unterliegt &#8211; wie zum Beispiel\u00a0ein\u00a0Wechselkurs &#8211; dann ist die Angabe entweder falsch (weil veraltet) oder man muss den Text in ausreichend kurzen Intervallen editieren. Vern\u00fcnftiger ist in einem solchen Fall, dass man diesen Wechselkurs von einer Seite holt, die den Kurs ihrerseits laufend aktualisiert. Genau das ist im obigen Beispiel in der ersten (gr\u00fcnen) Zeile geschehen. Die zweite (rote) Zeile enth\u00e4lt nur Text\u00a0und daher stimmt der Wechselkurs nicht \u00fcberein.<\/p>\n<p>In den folgenden Beispielen wird Schritt f\u00fcr Schritt gezeigt, wie man die Technik entwickeln kann, mit der man die erste Zeile realisiert. Man muss bedenken, dass diese Seite eine WordPress-Seite ist und dass hier keine PlugIns verwendet werden sollen. Alles erfolgt mit Mitteln von JavaScript. Eine\u00a0grunds\u00e4tzlich Schwierigkeit besteht darin, dass Inhalte\u00a0von <code>http-<\/code>Seiten auf einer Seite mit <code>https-<\/code>Protokoll nicht importiert werden k\u00f6nnen. Im\u00a0Artikel <a href=\"https:\/\/clubcomputer.at\/?p=41594\" target=\"_blank\" rel=\"noopener noreferrer\">relay.aspx, ein praktischer Trojaner<\/a> wurde ein Programm vorgestellt, das die Barrieren zwischen <code>https<\/code>&#8211; und <code>http<\/code>-Webs \u00fcberwindet und daher sind wir in der Lage, Seiten\u00a0in diesem <code>https<\/code>-Web einzubinden, die auf einem <code>http<\/code>-Server liegt. Alle Beispiele in diesem Artikel liegen auf <code>http:\/\/buero.clubcomputer.at<\/code>. W\u00fcrden wir diese Adresse direkt in einem JavaScript-Programm verwenden, w\u00fcrden diese Dateien\u00a0in diesem Artikel nicht angezeigt werden. Daher werden sie so aufgerufen: <code>\/relay.aspx?target=buero.clubcomputer.at\/mff\/mff01.htm<\/code>.<\/p>\n<p>Der gew\u00fcnschte Wechselkurs steht in der ersten Seite von Coinfinity und der dortige Code lautet:<\/p>\n<p>[code lang=&#8220;xml&#8220;]<br \/>\n&lt;span class=&quot;btc_price&quot;&gt;2332,45&lt;\/span&gt;<br \/>\n[\/code]<\/p>\n<p>Man ben\u00f6tigt also ein Programm, das die Seite liest und die Zahl 2332,45 isoliert.<\/p>\n<p>[code lang=&#8220;xml&#8220;]<br \/>\n&lt;scr ipt src=&quot;\/relay.aspx?target=http:\/\/buero.clubcomputer.at\/mff\/html.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/scr ipt&gt;<\/p>\n<p>&lt;div style=&quot;background-color: lime; text-align: center;&quot;&gt;&lt;em&gt;Der aktuelle Kurs eines Bitcoin ist &lt;b&gt;&lt;span id=&quot;bitcoin&quot;&gt;&lt;\/span&gt; \u20ac&lt;\/b&gt;.&lt;\/em&gt;&lt;\/div&gt;<\/p>\n<p>&lt;scr ipt&gt;<br \/>\n   GetHtmlFileTag(&quot;\/relay.aspx?target=https:\/\/coinfinity.co\/&quot;, &quot;bitcoin&quot;, &quot;span&quot;, &quot;class&quot;, &quot;btc_price&quot;);<br \/>\n&lt;\/scr ipt&gt;<br \/>\n[\/code]<\/p>\n<p>Die erforderliche Hilfsfunktion <code>GetHtmlFileTag<\/code> stammt aus der Funktionsbibliothek <code>html.js<\/code>. Die Parameter sind von links nach rechts:<\/p>\n<ul>\n<li>Adresse des gew\u00fcnschten Datums, hier <code>https:\/\/coinfinity.co\/<\/code><\/li>\n<li>id des Tags, in das der Wert zu schreiben ist, hier &#8222;<code>bitcoin<\/code>&#8222;<\/li>\n<li>Tagname des einschlie\u00dfenden Tags des gew\u00fcnschten Datums, hier &#8222;<code>span<\/code>&#8222;<\/li>\n<li>Attribut-Name, des den Tag n\u00e4her spezifiziert, hier &#8222;<code>class<\/code>&#8222;<\/li>\n<li>Attribut-Wert dieses speziellen Tag mit Attribut-Name, hier &#8222;<code>btc_price<\/code>&#8222;<\/li>\n<\/ul>\n<p>Die Funktion, die den gew\u00fcnschten Wert aus der Web-Datei isoliert ist <code>GetTag<\/code>. Man sieht, dass mit Regex-Elementen das Muster gesucht wird und der eingeklammerte Ausdruck<code> (.*?) <\/code>liefert \u00fcber <code>arr[1]<\/code> die Zahl zur\u00fcck.<\/p>\n<p>[code lang=&#8220;js&#8220;]<br \/>\nfunction GetTag(s, Tag, AttribName, AttribValue) {<br \/>\n    var rx = new RegExp(&quot;&lt;&quot; + Tag + &quot;\\\\s+&quot; + AttribName + &quot;=[&#8218;|\\&quot;]&quot; + AttribValue + &quot;[&#8218;|\\&quot;]&gt;(.*?)&lt;\\\/&quot; + Tag + &quot;&gt;&quot;,&quot;gi&quot;)<br \/>\n    var arr = rx.exec(s);<br \/>\n    return arr[1];<br \/>\n}<br \/>\n[\/code]<\/p>\n<h3>Text aus Programm<br \/>\n<code><a href=\"http:\/\/buero.clubcomputer.at\/mff\/mff01.htm\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/buero.clubcomputer.at\/mff\/mff01.htm<\/a><\/code><\/h3>\n<p>Um auf einer Webseite per Programm einen Inhalt einzuf\u00fcgen, ben\u00f6tigt man zun\u00e4chst ein Ziel-Objekt. Im Allgemeinen ist das ein <code>div<\/code>&#8211; oder ein <code>span-<\/code>Tag und dar\u00fcber hinaus ein JavaScript-Programm, das den gew\u00fcnschten Inhalt holt und in dieses Tag einf\u00fcgt.<\/p>\n<p>Wenn man ein Programm veranlassen will, in dieses konkrete Tag etwas hineinzuschreiben, muss man es benennen. Entweder mit dem Attribut <code>name<\/code> oder mit dem Attribut<code> id<\/code>. Das Skript selbst benutzt das Objekt <code>document<\/code> und dessen Methode <code>getElementById<\/code>, um das Objekt <code>target<\/code> anzusprechen. Die Zeichen innerhalb des <code>div<\/code>-Tag finden sich in der Eigenschaft <code>innerHTML<\/code> und dieser Eigenschaft wird der gew\u00fcnschte Text zugeordnet.<\/p>\n<p><iframe class=\"noScrolling\" src=\"\/relay.aspx?t=fadetogrey&amp;s=s&amp;target=http:\/\/buero.clubcomputer.at\/mff\/mff01.htm\" width=\"600\" height=\"120\" scrolling=\"no\"><\/iframe><br \/>\n<iframe class=\"noScrolling\" src=\"\/relay.aspx?t=fadetogrey&amp;target=http:\/\/buero.clubcomputer.at\/mff\/mff01.htm\" width=\"600\" height=\"50\" scrolling=\"no\"><\/iframe><\/p>\n<p>Das ist also die Art, wie man Texte zur Laufzeit (also im Zuge des Laden des Dokuments) eintragen kann. Das Dokument wird von oben nach unten &#8222;geparsed&#8220;, also abgearbeitet und daher kann das Objekt mit der <code>id=\"target\"<\/code> erst angesprochen werden, nachdem es eingelesen wurde und daher muss der zugeh\u00f6rige Kode nach dem <code>div<\/code>-Tag stehen. Es gibt auch die M\u00f6glichkeit, diese Reihenfolge zu ver\u00e4ndern aber das werden wir sp\u00e4ter sehen.<\/p>\n<p>Das <code>div<\/code>-Tag kann sich irgendwo im Dokument befinden, also zum Beispiel kann es Teil einer Tabelle sein oder eine Bildunterschrift oder es kann auch mitten im Test stehen. Soll es Teil eines Flie\u00dftextes sein, dann muss man statt dem <code>div<\/code>-Tag das <code>span<\/code>-Tag verwenden, weil das <code>span<\/code>-Tag den Text nicht umbricht. Allerdings kann man diese voreingestellten Eigenschaften der Tags mittels Style-Sheets leicht ver\u00e4ndern, es kann also durchaus sein, dass man einem <code>div<\/code>-Tag \u00fcber das Style-Sheet mitteilt, dass vorher und nachher kein Zeilenumbruch stattfinden soll.<\/p>\n<p>Dieser kurze Kode beschreibt also erst einmal, wie ein Text per Programm in ein Tag geschrieben wird.<\/p>\n<h3>Text von der Konsole<br \/>\n<code><a href=\"http:\/\/buero.clubcomputer.at\/mff\/mff01a.htm\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/buero.clubcomputer.at\/mff\/mff01a.htm<\/a><\/code><\/h3>\n<p>Als N\u00e4chstes wollen wir den Text von der Konsole holen und zeigen. Im oberen Frame sieht man den Kode, im unteren Frame kann man den Kode ausprobieren. Ein eingegebener Text wird ohne neues Laden der Seite angezeigt.<\/p>\n<p><iframe class=\"noScrolling\" src=\"\/relay.aspx?t=fadetogrey&amp;s=s&amp;target=http:\/\/buero.clubcomputer.at\/mff\/mff01a.htm\" width=\"600\" height=\"220\" scrolling=\"no\"><\/iframe><br \/>\n<iframe class=\"noScrolling\" src=\"\/relay.aspx?t=fadetogrey&amp;target=http:\/\/buero.clubcomputer.at\/mff\/mff01a.htm\" width=\"600\" height=\"100\" scrolling=\"no\"><\/iframe><\/p>\n<h3>Text von der Kommandozeile (QueryString)<br \/>\n<code><a href=\"http:\/\/buero.clubcomputer.at\/mff\/mff01b.htm?Text von der Kommandozeile\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/buero.clubcomputer.at\/mff\/mff01b.htm?Text von der Kommandozeile<\/a><\/code><\/h3>\n<p>Wenn man eine Datei im Browser aufruft, dann folgen dem eigentlichen Dateinamen auch Variablen, die vom Dateinamen durch ein &#8218;?&#8216; getrennt sind. Wenn man m\u00f6chte, dass ein dort stehender Text auf der Seite eingef\u00fcgt wird, kann man folgendes schreiben:<\/p>\n<p><iframe class=\"noScrolling\" src=\"\/relay.aspx?t=fadetogrey&amp;s=s&amp;target=http:\/\/buero.clubcomputer.at\/mff\/mff01b.htm?Text von der Kommandozeile\" width=\"600\" height=\"150\" scrolling=\"no\"><\/iframe><br \/>\n<iframe class=\"noScrolling\" src=\"\/relay.aspx?t=fadetogrey&amp;target=http:\/\/buero.clubcomputer.at\/mff\/mff01b.htm?Text von der Kommandozeile\" width=\"600\" height=\"80\" scrolling=\"no\"><\/iframe><\/p>\n<p>JavaScript ist objektorientiert aufgebaut und das Objekt <code>window.location<\/code> enth\u00e4lt in der Eigenschaft <code>search.\u00a0search<\/code> ist\u00a0alles, was rechts vom Dateinamen steht, inklusive des f\u00fchrenden Fragezeichens. Dieses Fragezeichen muss mit <code>substring(1)<\/code> entfernt werden, damit nur der Text daneben \u00fcberbleibt. Wenn man aber Text mit Zwischenr\u00e4umen oder auch Nicht-ASCII-Zeichen verwendet, werden diese Text in eine f\u00fcr das HTTP-Protokoll vertr\u00e4gliche Form umkodiert und diese Kodierung wird mit der in JavaScript eingebauten Funktion <code>decodeURIComponent<\/code> wieder r\u00fcckg\u00e4ngig gemacht.<\/p>\n<h2>Text aus Datei<\/h2>\n<p>Wenn wir &#8222;Datei&#8220; sagen, dann meinen wir nicht eine Datei im Windows-Datei-System sondern eine Datei auf einem Server. JavaScript kann auf das Windows- (oder Linux-)dateisystem nicht zugreifen (auch wenn das hier den Anschein hat) sondern es kann nur eine Datei von einem Server anfordern. In diesem Fall hei\u00dft die Datei <code>mff02.txt<\/code>. Da nur ein Dateiname angegeben ist, erg\u00e4nzt der Server diesen Dateinamen zu einer vollst\u00e4ndigen Internet-Adresse. Wenn sich also die rufende Datei <code>mff02.htm<\/code> auf dem Server <code>buero.clubcomputer.at<\/code> im Verzeichnis <code>\/mff<\/code>\u00a0befindet, macht der Server daraus <code>https:\/\/buero.clubcomputer.at\/mff\/mff02.txt<\/code>.<\/p>\n<p>F\u00fcr solche Requests von Webinhalten gibt es in JavaScript das Objekt\u00a0<code>XMLHttpRequest<\/code>. Wie man damit umgeht, erf\u00e4hrt man zum Beispiel bei <a href=\"https:\/\/www.w3schools.com\/xml\/dom_httprequest.asp\" target=\"_blank\" rel=\"noopener noreferrer\">W3Schools<\/a>. Der Aufruf ist aber ein bisschen komplizierter als wird das vom Dateisystem her kennen.\u00a0Es gibt n\u00e4mlich zwei verschiedene Aufrufformen: synchron oder asynchron. synchron entspricht einem Aufruf im Dateisystem. Das Programm verweilt so lange, bis der externe Inhalt geholt ist. Das kann aber im Internet &#8211; je nach Verbindung &#8211; durchaus eine zeitlang dauernd und w\u00e4hrend dieser Zeit wird nichts weiter getan als gewartet, was f\u00fcr einen Besucher einer Seite oft l\u00e4stig ist. Daher wird praktisch nur\u00a0die Aufrufvariante &#8222;asynchron&#8220; verwendet, in der man den Auftrag zum Holen der Datei gibt und dazu sagt, was nach Beendigung zu tun ist. Inzwischen wir am Seitenaufbau weiter gearbeitet.<\/p>\n<h3>Asynchrones Laden eines Objekts<br \/>\n<code><a href=\"http:\/\/buero.clubcomputer.at\/mff\/mff02.htm?mff02.txt\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/buero.clubcomputer.at\/mff\/mff02.htm?mff02.txt<\/a><\/code><\/h3>\n<p><iframe class=\"noScrolling\" src=\"\/relay.aspx?t=fadetogrey&amp;s=s&amp;target=http:\/\/buero.clubcomputer.at\/mff\/mff02.htm\" width=\"600\" height=\"400\" scrolling=\"no\"><\/iframe><br \/>\n<iframe class=\"noScrolling\" src=\"\/relay.aspx?t=fadetogrey&amp;s=c&amp;target=http:\/\/buero.clubcomputer.at\/mff\/mff02.txt\" width=\"600\" height=\"50\" scrolling=\"no\"><\/iframe><br \/>\nMan \u00f6ffnet eine Datei mit <code>xmlhttp.open()<\/code> mit der Methode <code>GET <\/code>und asynchron, was durch das dritte Argument <code>true<\/code>\u00a0angek\u00fcndigt wird. Den Dateinamen tragen wir nicht fest ein, damit wir dasselbe Programm mit verschiedenen Dateitypen und Adressformen testen k\u00f6nnen. Das erfolgreiche Ende\u00a0\u00a0asynchroner Aufrufe wird durch\u00a0die Abfrage des Status erkannt.<\/p>\n<p>Um das Programm zu testen, geben wir die Programmadresse ein:<br \/>\n<code> (1) <a href=\"http:\/\/buero.clubcomputer.at\/mff\/mff02.htm\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/buero.clubcomputer.at\/mff\/mff02.htm<\/a><\/code><br \/>\n<code> (2) <a href=\"http:\/\/buero.clubcomputer.at\/mff\/mff02.htm?mff02.txt\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/buero.clubcomputer.at\/mff\/mff02.htm?mff02.txt<\/a><\/code><br \/>\n<code> (3) <a href=\"http:\/\/buero.clubcomputer.at\/mff\/mff02.htm?http:\/\/www.illsinger.at\/wordpress\/license.txt\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/buero.clubcomputer.at\/mff\/mff02.htm?http:\/\/www.illsinger.at\/wordpress\/license.txt<\/a><\/code><br \/>\n<code> (4) <a href=\"http:\/\/buero.clubcomputer.at\/mff\/mff02.htm?http:\/\/fiala.cc\/license.txt\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/buero.clubcomputer.at\/mff\/mff02.htm?http:\/\/fiala.cc\/license.txt<\/a><\/code><br \/>\n<code> (5) <a href=\"http:\/\/buero.clubcomputer.at\/mff\/mff02.htm?\/relay.aspx?target=http:\/\/www.illsinger.at\/wordpress\/license.txt\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/buero.clubcomputer.at\/mff\/mff02.htm?\/relay.aspx?target=http:\/\/www.illsinger.at\/wordpress\/license.txt<\/a><\/code><\/p>\n<p>(1) Kein Parameter, daher keine Anzeige<br \/>\n(2) lokale Datei <code>mff02.txt<\/code> wird angezeigt<br \/>\n(3) keine Anzeige<br \/>\n(4) Lizenzbestimmungen von WordPress werden angezeigt<br \/>\n(5) Lizenzbestimmungen von WordPress werden angezeigt<\/p>\n<p>Im Punkt (3) und (4) werden zwei Word-Press-Websites angesprochen und zwar jeweils die Datei <code>license.txt<\/code>, die sich normalerweise in jedem WordPress-Web befindet. Richtig ist, dass &#8211; wie im Punkt (3) nichts angezeigt wird, denn JavaScript kann diese Datei nicht lesen, weil nur der Zugriff auf lokale Dateien erlaubt ist und man diese durch die Angabe der relativen Pfades ansprechen kann wie im Beispiel (2).<\/p>\n<p>Warum aber sieht man den Text aber im Beispiel (4)? Der Grund ist folgender: Im Grundzustand kann das Objekt\u00a0<code>XMLHttpRequest<\/code>\u00a0Daten von fremden Servern nicht lesen. Man muss die rufende Seite autorisieren, damit das m\u00f6glich ist. Dazu muss die gerufene Seite den HTTP-Header den Namen <code>AccessControl-Allow-Origin<\/code> enthalten und dessen Wert muss <code>*<\/code> oder den Namen der zugelassenen Dom\u00e4ne haben.<\/p>\n<p>Damit aber (5) funktioniert, muss man noch einen Wert in der Datei web.config \u00e4ndern, sonst bekommt man eine Fehlermeldung wegen der verd\u00e4chtigen Zeichen im QueryString (Etwa kommt das Fragezeichen zwei Mal vor).<\/p>\n<p>[code lang=&#8220;xml&#8220;]<br \/>\n  &lt;system.web&gt;<br \/>\n    &lt;httpRuntime targetFramework=&quot;4.5&quot; requestPathInvalidCharacters=&quot;&quot; \/&gt;<br \/>\n  &lt;\/system.web&gt;<br \/>\n[\/code]<\/p>\n<p>Das folgende Bild zeigt, wie man im WebSite Panel einen zus\u00e4tzlichen Header in einer Webseite hinzuf\u00fcgt:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-41592\" src=\"https:\/\/clubcomputer.at\/wp-content\/uploads\/sites\/6\/2017\/05\/Kopfzeilen.jpg\" alt=\"\" width=\"702\" height=\"597\" srcset=\"https:\/\/clubcomputer.at\/wp-content\/uploads\/sites\/6\/2017\/05\/Kopfzeilen.jpg 702w, https:\/\/clubcomputer.at\/wp-content\/uploads\/sites\/6\/2017\/05\/Kopfzeilen-300x255.jpg 300w\" sizes=\"(max-width: 702px) 100vw, 702px\" \/><\/p>\n<p>Die konzeptuell vorgesehene L\u00f6sung ist also die, dass man mit der Seite, die den Inhalt zur Verf\u00fcgung stellt, \u00fcber einen Header-Namen den Zugriff erlaubt. Erinnern wir uns aber an die Datei <code>relay.aspx<\/code>, die dazu gedient hat, beliebige WebAdressen anzusprechen und deren Inhalt an lokalen Inhalt anzuzeigen. Diese Datei <code>relay.aspx<\/code> wird im Beispiel (5)\u00a0angewendet, um dem fremden Server zu \u00fcberlisten und die dortige Lizenz-Datei dennoch anzuzeigen. und warum ist das so? Der Grund ist, dass <code>relay.aspx<\/code> die Datei so holt wie das ein Browser \u00fcblicherweise tut aber ein JavaScript-Programm die Header ber\u00fccksichtigt und daher der Zugriff\u00a0eventuell eingeschr\u00e4nkt wird.<\/p>\n<h2>Was tun mit dem fremden Kode?<\/h2>\n<p>Wir erhalten bei Anforderung einer Html-Seite aus dem Internet immer eine komplette Seite mit Kopf, Men\u00fcs usw. Wenn man aber Inhalt von einer fremden Seite einbetten will, dann immer nur einen Teil davon. Praktisch nie wird man zum Beispiel den <code>head<\/code>&#8211; und den <code>body<\/code>-Tag einbetten, weil dann diese Tags im eigenen Kode doppelt vorkommen w\u00fcrden. Man muss also die gew\u00fcnschten Details isolieren; entweder den HTML-Text nach den gesuchten Tags durchsuchen, also beispielsweise mit Regex-Suchen\/Ersetzen oder man kann das Html-Dokument als DOM-Objekt betrachten und mit den Mitteln der Methoden des DOM nach den Inhalten suchen. Nach zahlreichen Versuchen kann ich berichten, dass die Suchfunktionen mit Regex-Ausdr\u00fccken immer funktionieren und die Auswahl der Seitenobjekte mit dem DOM sehr oft keine Ergebnisse liefert.<\/p>\n<h3>Isolieren mit Regex<\/h3>\n<p>Um sinnvolle Daten aus einer Html-Seite zu isolieren, muss man die Html-Datei in ein Fragment verwandeln und folgendes entfernen: Kopfteil inklusive Body-Tag, Scripts, Styles, Attribute (aber nicht in Bildern oder Links). F\u00fcr jede einzelne Aufgabe schreiben wir eine Funktion und kombinieren alles mit der asynchronen Lesefunktion. Weiter muss man ber\u00fccksichtigen, dass alle diese Filter optional sein sollten. Dazu geh\u00f6ren Funktionen, dass man den Inhalt nur aus einem bestimmten Element extrahiert oder nur den Inhalt zwischen Markierungen. Alle diese Funktionen kommen in eine Datei html.js, die bei Bedarf in eine Html-Datei importiert wird. Angewendet werden diese Funktionen so: in der Html-Datei gibt es ein Tag, in das die externen Daten einzubetten sind. Wir werden daf\u00fcr ein <code>div<\/code>-Tag. Danach gibt es eine Funktion <code>WriteHtml()<\/code>, die den gew\u00fcnschten Inhalt in das Tag einf\u00fcgt:<\/p>\n<p>Am anschaulichsten ist es, wenn man das <a href=\"http:\/\/buero.clubcomputer.at\/mff\/html_test.html\" target=\"_blank\" rel=\"noopener noreferrer\">Test-Programm<\/a> studiert, weil damit immer der Original-Kode mit dem durch den Filter ver\u00e4nderten Kode verglichen wird.<\/p>\n<h3>Hilfsfunktionen<br \/>\n<code><a href=\"http:\/\/buero.clubcomputer.at\/mff\/html.js\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/buero.clubcomputer.at\/mff\/html.js<\/a><\/code><\/h3>\n<p><iframe src=\"\/relay.aspx?s=s&amp;target=http:\/\/buero.clubcomputer.at\/mff\/html.js\" width=\"650\" height=\"400\"><\/iframe><\/p>\n<h3>Testprogramm<br \/>\n<code><a href=\"http:\/\/buero.clubcomputer.at\/mff\/html_test.html\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/buero.clubcomputer.at\/mff\/html_test.html<\/a><\/code><\/h3>\n<p><iframe src=\"\/relay.aspx?s=s&amp;target=http:\/\/buero.clubcomputer.at\/mff\/html_test.html\" width=\"650\" height=\"400\"><\/iframe><\/p>\n<h3>Testdaten<br \/>\n<a href=\"http:\/\/buero.clubcomputer.at\/mff\/html_test_daten.html\" target=\"_blank\" rel=\"noopener noreferrer\"><code>http:\/\/buero.clubcomputer.at\/mff\/html_test_daten.html<\/code><\/a><\/h3>\n<p><iframe src=\"\/relay.aspx?s=s&amp;target=http:\/\/buero.clubcomputer.at\/mff\/html_test_daten.html\" width=\"650\" height=\"400\"><\/iframe><\/p>\n<p>Die hier gezeigten Programme sind in laufender Bearbeitung und k\u00f6nnen sich daher immer wieder auch \u00e4ndern.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[Achtung, nicht alle Objekte auf dieser Seite sind im Sinne des https-Protokolls von sicheren Quellen.] Der aktuelle Kurs eines Bitcoin ist \u20ac. Der nicht ganz aktuelle Kurs eines Bitcoin ist 1234,56 \u20ac. Es gibt neben Frames (siehe Artikel Mit fremden Federn) auch andere\u00a0M\u00f6glichkeiten, fremde Inhalte in der eigenen Seite zu integrieren und die beiden farblich [&hellip;]<\/p>\n","protected":false},"author":1193,"featured_media":41762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1241],"tags":[],"class_list":["post-41702","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-programmieren"],"jetpack_featured_media_url":"https:\/\/clubcomputer.at\/wp-content\/uploads\/sites\/6\/2017\/06\/codeverlauf2.png","_links":{"self":[{"href":"https:\/\/clubcomputer.at\/wp-json\/wp\/v2\/posts\/41702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clubcomputer.at\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clubcomputer.at\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clubcomputer.at\/wp-json\/wp\/v2\/users\/1193"}],"replies":[{"embeddable":true,"href":"https:\/\/clubcomputer.at\/wp-json\/wp\/v2\/comments?post=41702"}],"version-history":[{"count":0,"href":"https:\/\/clubcomputer.at\/wp-json\/wp\/v2\/posts\/41702\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/clubcomputer.at\/wp-json\/wp\/v2\/media\/41762"}],"wp:attachment":[{"href":"https:\/\/clubcomputer.at\/wp-json\/wp\/v2\/media?parent=41702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clubcomputer.at\/wp-json\/wp\/v2\/categories?post=41702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clubcomputer.at\/wp-json\/wp\/v2\/tags?post=41702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}