Calling JavaScript function in iFrame

Sean McClurkan

12 Oktober 2023 21:29

I have a viewer that is loaded into a vendor's iFrame.  They load a JavaScript function with the iFrame that they'd like me to use to send back a string from the viewer to the iFrame.

I can see the function in the Console->Sources tab as having been loaded with the iFrame.

Is there a straightforward way to execute this function from a Workflow?

1

• Officiell kommentar

  

  Ryan Cooney

  13 Oktober 2023 15:22

  Please avoid using globalThis. It may happen to work, but this is not supported and it will not work in the future.

  postMessage (via the viewer.post-message command) is the preferred/supported way to message between Web and a parent window. This requires the parent window to have JavaScript that listens for the specific message event and routes it to the appropriate function.
• 

  Berend Veldkamp

  13 Oktober 2023 09:37 Redigerad

  Have you tried using the globalThis variable? For instance, using Evaluate with =globalThis.alert("Hi") works.

  I'm not sure this will work for calling functions within other iframes. At least it won't if they are cross domain, in which case you would need postMessage().

  0
• 

  Sean McClurkan

  13 Oktober 2023 16:47

  Thanks, Berend and Ryan!

  Is the viewer.post-message command available in the HTML5 viewer?

  So could I execute a JavaScript function in the viewer.post-message command? Or will it just pass a string back to the parent?

   

  0
• 

  Ryan Cooney

  16 Oktober 2023 19:15

  The viewer.post-message command is not available in the HTML5 viewer.

  We've just added a new Post Message activity to the JavaScript Web APIs activity pack that will enable this.

  The postMessage() mechanism simply raises a "message" event in the parent frame. It doesn't give you (in the child frame) any ability to directly call a function in the parent. It is the responsibility of the parent application to observe the message and then call the desired function. It would look something like this:

  window.addEventListener("message", (e) => {
      // Check the origin of the message to ensure it is trusted
      // This would be the root URL of the server hosting the child frame
      if (e.origin !== "https://my.domain.com"){
          return;
      }
  
      // Check if this is a message we are interested in
      if (e.data.type === "some-message-type") {
          // Call the desired function on the page
          doSomething(e.data.value)
   
          // If you need to send a response back to the child frame you can do this
          //e.ports?.[0]?.postMessage({ foo: "bar" });
      }
  });

  This assumes your workflow is posting a message object that looks like this:

  {
      "type": "some-message-type",
      "value": "some-value" // This value could be an object
  }

  1

Du måste logga in om du vill lämna en kommentar.