feature (postMessage): iframe RPC via postMessage

This commit is contained in:
MickaelK 2024-12-14 00:46:48 +11:00
parent b787403a1e
commit f268d27967
2 changed files with 41 additions and 11 deletions

View file

@ -3,6 +3,7 @@ import rxjs, { effect } from "../../lib/rx.js";
import { loadCSS } from "../../helpers/loader.js";
import notification from "../../components/notification.js";
import t from "../../locales/index.js";
import ctrlError from "../ctrl_error.js";
import { getCurrentPath } from "./common.js";
@ -16,16 +17,28 @@ export default function(render, { endpoint = "" }) {
effect(rxjs.fromEvent(window, "message").pipe(
rxjs.filter((event) => event.origin === location.origin),
rxjs.tap((event) => {
switch (event.data.type) {
case "notify::info":
notification.info(t(event.data.message));
break;
rxjs.map((event) => JSON.parse(event.data)),
rxjs.tap(({ type, msg }) => {
switch (type) {
case "error":
throw new Error(msg);
case "notify::error":
notification.error(t(event.data.message));
notification.error(t(msg));
break;
case "notify::info":
notification.info(t(msg));
break;
case "notify::success":
notification.success(t(msg));
break;
default:
break;
}
}),
rxjs.catchError((err) => {
notification.error(t(err.message));
return ctrlError()(err);
}),
));
}

View file

@ -131,17 +131,34 @@ func IframeContentHandler(ctx *App, res http.ResponseWriter, req *http.Request)
<body>
<style> body { margin: 0; } body, html{ height: 100%; } iframe { width: 100%; height: 100%; background: white; } </style>
<iframe frameborder="0" src="{{ .server }}" class="hidden"></iframe>
<script type="module" src="/assets/components/loader.js"></script>
<component-loader />
<script>
const postChild = (data) => $iframe.contentWindow.postMessage(JSON.stringify(data), "*");
const postParent = (data) => window.parent.postMessage(JSON.stringify(data));
const $iframe = document.querySelector("iframe");
window.post = (data) => $iframe.contentWindow.postMessage(JSON.stringify(data), "*");
$iframe.onerror = () => postParent({type: "error", msg: "Not Found" });
window.addEventListener("message", (event) => {
let msg = JSON.parse(event.data);
if (!msg) return;
if (msg.MessageId === "App_LoadingStatus" && msg.Values.Status === "Initialized") {
requestAnimationFrame(() => $iframe.classList.remove("hidden"));
post({ MessageId: "Host_PostmessageReady" });
switch(msg.MessageId) {
case "App_LoadingStatus": if (msg.Values.Status === "Initialized") {
postChild({ MessageId: "Host_PostmessageReady" });
requestAnimationFrame(() => $iframe.classList.remove("hidden"));
document.querySelector("component-loader").remove();
}
break;
case "Action_Load_Resp": if (msg.Values.errorMsg) {
postParent({ type: "error", msg: msg.Values.errorMsg });
}
break;
default:
console.log("postMessage:", msg);
break;
}
console.log("MESSAGE WINDOW", msg); // TODO: loader handling
});
</script>
</body>