[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"L_aNtHFOmIw4zlYr_C48Q9USpOdK6wulUnzS5SXonuc":75,"gXaAvz56pjXXPn7lqK5em7jiP1_WAiTO54DvmIVcEts":180,"_apollo:default":222},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":158,"wpHeaderImage":13,"wpHeaderImageOld":161,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":173,"author":174},"NodeWpPost","1031","HTML5 postMessage - eine Lösung für cross-domain Kommunikation",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1380264069,"UTC","+00:00","2013-09-27T06:41:09+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/html5-postmessage-eine-losung-fur-cross-domain-kommunikation",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","HTML5 postMessage - eine Lösung für cross-domain Kommunikation | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/html5-postmessage-eine-losung-fur-cross-domain-kommunikation","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146,150,154],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","286","cross-origin Kommunikation","/tag/cross-origin-kommunikation",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"604","html5","/tag/html5",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"619","iframe","/tag/iframe",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"677","javascript","/tag/javascript",{"__typename":138,"id":155,"name":156,"path":157,"weight":116},"1103","same-origin policy","/tag/same-origin-policy",{"__typename":159,"processed":160,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg?itok=NnF8v72a\" data-rel=\"lightbox-gallery-T1ywKjFA\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"html5_postmessage_kreis\" data-entity-type=\"media\" data-entity-uuid=\"141c92b7-a180-4ae4-8b73-31f8b7244a7a\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg.webp?itok=LpZ1RREc 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg.webp?itok=NnrOavc4 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg.webp?itok=_bn0U9G- 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg.webp?itok=Ba0eHtIa 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg.webp?itok=A2qEfM4e 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg.webp?itok=OQOWcecP 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg.webp?itok=L3nImZjd 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg.webp?itok=VALjvFbh 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"480\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg.webp?itok=u8hQpnPh 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg.webp?itok=PDPCwIlV 2x\" type=\"image/webp\" width=\"500\" height=\"500\">\n                  \u003Cimg loading=\"lazy\" width=\"500\" height=\"500\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/html5_postmessage_kreis-1.jpg.jpg?itok=PDPCwIlV\" alt=\"html5_postmessage_kreis\" title=\"HTML5 Post Message\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Jeder Webentwickler hat wahrscheinlich schon mit der same-origin policy zu kämpfen gehabt. Im folgenden geht es darum wie man unter bestimmten Umständen mit \u003Ccode>Window.postMessage\u003C/code> cross-origin Kommunikation erlauben kann. Wir haben schon des öfteren Applikationen/Webpages via iFrame auf einer Seite eingebunden. Wenn hier nun das eingebundene iFrame mit der Webseite über Javascript kommunizieren soll, wird es schwierig, wenn die Domains der beiden Seiten nicht gleich sind. Hier weist uns die \u003Ca title=\"same-origin policy for Javascript on developer.mozilla.org\" href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\">same-origin policy\u003C/a> in die Schranken – was ja aus Sicherheitsgründen sehr gut ist. Falls man gar keine Möglichkeit hat die beiden Elemente unter die selbe Domain zu bringen wird’s knifflig sie miteinander kommunizieren zu lassen.\u003Cbr>\n\u003C/p>\n\u003Ch3>Ein simples Beispiel\u003C/h3>\n\u003Cp dir=\"ltr\">Wir möchten eine kleine Applikation als iFrame auf einer anderen Webseite einbinden. Wir haben Zugfriff auf das CMS Backend der Webseite und auf unseren Server auf dem die App liegt. Aus diversen Gründen ist es nicht möglich unsere App über die Domain/Server der eigentlichen Webseite zu hosten. Das stellt uns jetzt vor ein Problem, weil wir im iFrame auf bestimmte Koordinaten scrollen möchten. Und hier kommt jetzt \u003Ccode>Window.postMessage\u003C/code> ins Spiel!\u003C/p>\n\u003Cp>Im Groben funktioniert das Ganze so: Mit postMessage senden wir Daten an die Webseite. Die Webseite wartet darauf, dass wir ihr etwas schicken – wenn sie die Daten von uns erhalten hat, scrollt sie einfach zu einer bestimmten Position. Da wir ja Zugriff auf das CMS Backend haben und die Seite auf der das iFrame eingebunden ist, können wir hier unseren “Ich warte auf Daten und scrolle dann” – Javascript Code einfügen.\u003C/p>\n\u003Ch5>Nun wird es technischer\u003C/h5>\n\u003Cp>[code language=“javascript“]\u003Cbr>\nparent.postMessage(’scroll‘, ‚http://example.at‘);\u003Cbr>\n[/code]\u003Cbr>\nSo könnte unser Aufruf aus dem iFrame heraus aussehen. Mit parent wird die Seite angesprochen die das iFrame einbindet, scroll ist ein einfacher String den wir hinsenden und http://example.at ist die Ziel-origin.\u003C/p>\n\u003Cp dir=\"ltr\">Auf example.at müssen wir nun die Nachricht empfangen. Das könnte zB so aussehen (wir arbeiten hier übrigens auch mit jQuery):\u003C/p>\n\u003Cp>[code language=“javascript“]\u003Cbr>\nwindow.addEventListener(‚message‘, receiveMessage);\u003Cbr>\nfunction receiveMessage(event) {\u003Cbr>\nif (event.origin !== ‚http://meine-app.at‘)\u003Cbr>\nreturn;\u003Cbr>\nif (event.data !== ’scroll‘)\u003Cbr>\nreturn;\u003Cbr>\nvar temp = parseInt(event.data) + 500;\u003Cbr>\n$(‚html,body‘).scrollTop(500);\u003Cbr>\n}\u003Cbr>\n[/code]\u003C/p>\n\u003Cp dir=\"ltr\">Als erstes haben wir hier einen EventListener erstellt der auf Daten warten und dann die Funktion receiveMessage aufruft.\u003C/p>\n\u003Cp dir=\"ltr\">In dieser Funktion ist es zuerst einmal ganz wichtig zu überprüfen wer uns da etwas schickt! Hier checken wir, ob die Daten von http://meine-app.at kommen – wenn nicht, arbeiten wir nicht weiter. Weil es sich hier so schön anbietet, überprüfe ich noch den Inhalt der gesendeten Daten.\u003C/p>\n\u003Cp dir=\"ltr\">Wenn alles passt führen wir die Scroll-Operation auf der “Haupt”-Webseite durch.\u003C/p>\n\u003Ch3 dir=\"ltr\">Fazit\u003C/h3>\n\u003Cp dir=\"ltr\">postMessage ist sicher keine Funktion die man jeden Tag braucht, aber durchaus nützlich wenn man vor den Problemen der cross-origin Kommunikation steht. Hier muss man auch im Kopf behalten, dass es die same-origin policy nicht umsonst gibt und postMessage mit Vorsicht zu genießen ist. Ausführlichere Infos, sowie Daten zur Browser Kompatibilität findet ihr auf \u003Ca title=\"postMessage auf developer.mozilla.org\" href=\"https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage\" target=\"_blank\" rel=\"noopener noreferrer\">developer.mozilla.org\u003C/a>, des weiteren gibt es auf dem \u003Ca title=\"postMessage Tutorial auf blog.teamtreehouse.com\" href=\"http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage\" target=\"_blank\" rel=\"noopener noreferrer\">Treehouse Blog\u003C/a> ein Tutorial dazu.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n",{"__typename":162,"id":163,"excludeFromScreenreader":13,"mediaImage":164,"name":169,"path":172,"status":20},"MediaImage","2079",{"__typename":165,"url":166,"width":167,"height":168,"alt":169,"title":169,"size":170,"mime":171},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2013/09/html5_postmessage-1.jpg",1920,1280,"Liechtenecker Büro",179072,"image/jpeg","/media/2079/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/html5-postmessage-eine-losung-fur-cross-domain-kommunikation/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"HTML5 postMessage - eine Lösung für cross-domain Kommunikation - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Jeder Webentwickler hat wahrscheinlich schon mit der same-origin policy zu kämpfen gehabt. Im folgenden geht es darum wie man unter bestimmten Umständen mit Window.postMessage cross-origin Kommunikation erlauben kann. Wir haben schon des öfteren Applikationen/Webpages via iFrame auf einer Seite eingebunden. Wenn hier nun das eingebundene iFrame mit der Webseite über Javascript kommunizieren soll, wird es […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/html5-postmessage-eine-losung-fur-cross-domain-kommunikation/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2013-09-27T08:41:09+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2015/02/html5_postmessage_kreis-1-300x300.jpg\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"3 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/html5-postmessage-eine-losung-fur-cross-domain-kommunikation/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2015/02/html5_postmessage_kreis-1.jpg\",\"width\":500,\"height\":500,\"caption\":\"HTML5 Post Message\"},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/html5-postmessage-eine-losung-fur-cross-domain-kommunikation/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/html5-postmessage-eine-losung-fur-cross-domain-kommunikation/\",\"name\":\"HTML5 postMessage - eine L\\u00f6sung f\\u00fcr cross-domain Kommunikation - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/html5-postmessage-eine-losung-fur-cross-domain-kommunikation/#primaryimage\"},\"datePublished\":\"2013-09-27T08:41:09+00:00\",\"dateModified\":\"2013-09-27T08:41:09+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/6b4f41c44e934653474ab67647eaa4e6\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/html5-postmessage-eine-losung-fur-cross-domain-kommunikation/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/6b4f41c44e934653474ab67647eaa4e6\",\"name\":\"Sarah\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/f370faa99da7a5e86b0afa364854663c?s=96&d=mm&r=g\",\"caption\":\"Sarah\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":175,"id":176,"myRole":177,"name":178,"nickname":179},"User","21","-","s-mischinger","Sarah",{"latestKnowhow":181},[182,197,210],{"__typename":79,"id":183,"title":184,"path":185,"wpTeaserText":186,"wpPromotedTeaserImage":13,"wpHeaderImage":187},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":162,"id":188,"excludeFromScreenreader":13,"mediaImage":189,"name":195,"path":196,"status":20},"3364",{"__typename":165,"url":190,"width":191,"height":192,"alt":193,"title":13,"size":194,"mime":171},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":198,"title":199,"path":200,"wpTeaserText":201,"wpPromotedTeaserImage":13,"wpHeaderImage":202},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":162,"id":203,"excludeFromScreenreader":13,"mediaImage":204,"name":208,"path":209,"status":20},"3355",{"__typename":165,"url":205,"width":191,"height":192,"alt":206,"title":13,"size":207,"mime":171},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":211,"title":212,"path":213,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":214},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":162,"id":215,"excludeFromScreenreader":21,"mediaImage":216,"name":220,"path":221,"status":20},"3303",{"__typename":165,"url":217,"width":191,"height":192,"alt":218,"title":13,"size":219,"mime":171},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":223,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":224,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":228,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":231,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":234,"Menu:footer":237,"ROOT_QUERY":247,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":263,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":266,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":269,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":272,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":275,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":278,"Menu:nuxt-main-menu":281,"TermCategories:8":295,"TermTags:286":306,"TermTags:604":307,"TermTags:619":308,"TermTags:677":309,"TermTags:1103":310,"MediaImage:2079":311,"User:21":313,"NodeWpPost:1031":314,"MediaImage:3364":343,"NodeWpPost:1619":345,"MediaImage:3355":348,"NodeWpPost:1616":350,"MediaImage:3303":353,"NodeWpPost:1606":355},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",225,"internal",20,"expanded",21,"attributes",227],{"__ref":226},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",229,"internal",20,"expanded",21,"attributes",230],{"__ref":226},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",232,"internal",20,"expanded",21,"attributes",233],{"__ref":226},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",235,"internal",21,"expanded",21,"attributes",236],{"__ref":226},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",238],[239,241,243,245],{"__ref":240},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":242},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":244},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":246},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",248,"menu({\"name\":\"FOOTER\"})",249,"menu({\"name\":\"NUXT_MAIN_MENU\"})",251,"route({\"path\":\"/blog/html5-postmessage-eine-losung-fur-cross-domain-kommunikation\"})",253,"latestKnowhow({\"excludeId\":\"1031\",\"limit\":3})",256],"Query",{"__ref":250},"Menu:footer",{"__ref":252},"Menu:nuxt-main-menu",["null","__typename",77,"entity",254],{"__ref":255},"NodeWpPost:1031",[257,259,261],{"__ref":258},"NodeWpPost:1619",{"__ref":260},"NodeWpPost:1616",{"__ref":262},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",264,"internal",20,"expanded",21,"attributes",265],{"__ref":226},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",267,"internal",20,"expanded",21,"attributes",268],{"__ref":226},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",270,"internal",20,"expanded",21,"attributes",271],{"__ref":226},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",273,"internal",20,"expanded",21,"attributes",274],{"__ref":226},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",276,"internal",20,"expanded",21,"attributes",277],{"__ref":226},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",279,"internal",20,"expanded",21,"attributes",280],{"__ref":226},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",282],[283,285,287,289,291,293],{"__ref":284},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":286},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":288},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":290},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":292},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":294},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",296,"langcode",297,"changed",298,"metatag",299],["null","__typename",118,"processed",119,"format",120],{"__ref":226},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[300,302,304],["null","__typename",93,"tag",94,"attributes",301],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",303],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",305],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",138,"id",151,"name",152,"path",153,"weight",116],["null","__typename",138,"id",155,"name",156,"path",157,"weight",116],["null","__typename",162,"id",163,"excludeFromScreenreader",13,"mediaImage",312,"name",169,"path",172,"status",20],["null","__typename",165,"url",166,"width",167,"height",168,"alt",169,"title",169,"size",170,"mime",171],["null","__typename",175,"id",176,"myRole",177,"name",178,"nickname",179],["null","__typename",79,"id",80,"title",81,"changed",315,"created",316,"langcode",317,"path",90,"promote",21,"status",20,"sticky",21,"metatag",318,"category",325,"contentElements",13,"evergreen",13,"tags",327,"wpBody",338,"wpHeaderImage",13,"wpHeaderImageOld",339,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",173,"author",341],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":226},[319,321,323],["null","__typename",93,"tag",94,"attributes",320],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",322],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",324],["null","__typename",109,"property",110,"content",81],{"__ref":326},"TermCategories:8",[328,330,332,334,336],{"__ref":329},"TermTags:286",{"__ref":331},"TermTags:604",{"__ref":333},"TermTags:619",{"__ref":335},"TermTags:677",{"__ref":337},"TermTags:1103",["null","__typename",159,"processed",160,"format",120,"summary",13],{"__ref":340},"MediaImage:2079",{"__ref":342},"User:21",["null","__typename",162,"id",188,"excludeFromScreenreader",13,"mediaImage",344,"name",195,"path",196,"status",20],["null","__typename",165,"url",190,"width",191,"height",192,"alt",193,"title",13,"size",194,"mime",171],["null","__typename",79,"id",183,"title",184,"path",185,"wpTeaserText",186,"wpPromotedTeaserImage",13,"wpHeaderImage",346],{"__ref":347},"MediaImage:3364",["null","__typename",162,"id",203,"excludeFromScreenreader",13,"mediaImage",349,"name",208,"path",209,"status",20],["null","__typename",165,"url",205,"width",191,"height",192,"alt",206,"title",13,"size",207,"mime",171],["null","__typename",79,"id",198,"title",199,"path",200,"wpTeaserText",201,"wpPromotedTeaserImage",13,"wpHeaderImage",351],{"__ref":352},"MediaImage:3355",["null","__typename",162,"id",215,"excludeFromScreenreader",21,"mediaImage",354,"name",220,"path",221,"status",20],["null","__typename",165,"url",217,"width",191,"height",192,"alt",218,"title",13,"size",219,"mime",171],["null","__typename",79,"id",211,"title",212,"path",213,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",356],{"__ref":357},"MediaImage:3303"]