I'm attempting to set up an iframe with externally hosted content following the instructions in the documentation: https://doc.laserfiche.com/laserfiche/en-us/content/pa-bp-build-form-scripts-lfform-custom-html.htm#2.BridgedatawithpostMessage
My page is currently hosted on GitHub Pages. It loads initial content properly and based on dev console logging I am confident that it is sending its initial handshake to the form. I started using the wildcard for parent origin partway through debugging, replacing it with the specific LF sandbox origin does not fix the issue.
window.parent.postMessage({ type: 'employee-tabulator:ready' }, '*')
My form event listener waiting for the handshake detects and logs events fired by the form itself, but does not see the incoming ones from the iframe.
window.addEventListener("message", (event) => {
console.log(event);
if (
event.origin !== allowedOrigin
) {
console.log("received event from other origin");
return;
}
console.log("Received from correct origin");
tabulatorWindow = event.source;
sendTableToTabulator();
});
Adding the logging below to the dev console after the form starts running confirms that the message my form listener is expecting to receive is being transmitted.
window.addEventListener("message", (event) => {
if (event.origin === "<<my site>>") {
console.log("Hosted iframe message reached app", event.data);
}
});
Have I missed something along the way setting this up?