Question

Bridging data to and from externally hosted iframe

Forms Laserfiche Cloud

Updated October 2

asked on September 25

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?

0 0

Answer

SELECTED ANSWER

replied on October 1 • Show version history

Try this:

// Form script (LFForm sandbox)
const allowedOrigin = "https://<user>.github.io";
let tabulatorWindow = null;

window.addEventListener("message", (event) => {
  if (event.origin !== allowedOrigin) return;
  if (event.data?.type === "employee-tabulator:ready") {
    tabulatorWindow = event.source;
    clearInterval(hello);
    sendTableToTabulator();
  }
});

// The iframe may still be loading, so repeat until it answers.
const hello = setInterval(() => {
  const frames = window.parent.frames;
  for (let i = 0; i < frames.length; i++) {
    try { frames[i].postMessage({ type: "employee-tabulator:hello" }, allowedOrigin); } catch (e) {}
  }
}, 250);

// Hosted page: answer the sender of the hello, not window.parent
window.addEventListener("message", (event) => {
  if (event.data?.type === "employee-tabulator:hello") {
    // event.source is the LFForm sandbox, so the reply goes straight to the form script.
    event.source.postMessage({ type: "employee-tabulator:ready" }, event.origin);
  }
});

Once event.source is captured on both sides, messages go directly between the two frames in both directions.

0 0

replied on October 1

This had it working right away, thank you!

1 0

replied on October 1 • Show version history

Thanks, we will update the documentation.

0 0

replied on October 2

updated

0 0

Replies

replied on September 30

Be sure your IIS is configured to allow what you are trying to do here. This was a good reference for me. If not, read all the related posts showing on this one:

https://answers.laserfiche.com/questions/228482/Issue-with-embedding-a-Form-into-a-webpage#228484

0 0

replied on October 1

I'm on Cloud and the only documentation I can find for the IIS is targeted to Self-Hosted. It seems like this should be ready to go out of the box for Cloud?

0 0

replied on September 30

Just a guess, but this feels like a timing issue to me. Is it possible that the embedded iframe sends its handshake message before the Forms event listener is registered? As a troubleshooting step, maybe use `setTimeout` to delay sending the initial handshake by 10 or 15 seconds - long enough to truly eliminate the possibility. The real solution might be a more complicated handshake, such as the embedded page waiting for a "ready" message from Forms. Or the embedded page could send its handshake message in a loop (with delays between) until it receives acknowledgement.

0 0

You are not allowed to follow up in this post.

Question

Question

Bridging data to and from externally hosted iframe

Answer

Replies

Sign in to reply to this post.