Passing context data from app to IFramed Vue page

Hello folks!

New app developer here, trying to understand something basic. Please feel free to point me to the right links.

Our full-screen app is going to be essentially one HTML page, with an IFrame tag and some JavaScript. I have this working now as a private app. The IFrame properly shows my page in my external site.

However, I want to pass in the client object into my IFrame with PostMessage(), and am puzzled about what I’m seeing in the app.js behavior.

My app.js is like so…

var appClient = null;
const version = 17;

app.initialized().then(
  async function(client)
  {

    appClient = client;

    console.log(`Freshdesk app v${version} initialized() event fired`);
    //console.log("appClient: " , JSON.stringify(appClient, null, 2));


    appClient.events.on("app.activated", onAppActivated);
    appClient.events.on("app.deactivated", onAppDeactivated);
  },
  function(error)
  {
    console.log(error);
  }
);


function onAppActivated() {

  try {
    console.log("Any chance this console.log will fire?");
    console.log(`Freshdesk v${version} onAppActivated() event fired`);
    console.log("nope!");

    // IGNORE THE REST...PROCESSING NEVER GETS THIS FAR...
    
    const iframe = document.getElementById('iframe');

    if(!iframe) {console.log("iframe not found"); return;}
    
    console.log("iframe: " , JSON.stringify(iframe, null, 2));

    if(!appClient) {console.log("appClient not found"); return;}

    iframe.contentwindow.postMessage(appClient, 'https://www.mywebsite.com');
    console.log("fired postMessage() to iframe");
    
  } catch (error) {
    console.log("error: ", error);
    
  }


}

async function onAppDeactivated() {
  console.log("Freshdesk onAppDeactivated() event fired");
}

Both initialized() and onAppActivated() are firing. I update the version variable with each update, so I can confirm that I’m always running the newest version.

But this is what the console.logs give me in my DevTools console:

Freshdesk app v17 initialized() event fired
Freshdesk v17 onAppActivated() event fired

Notice that it fires the second console.log statement in onAppActivated() but not the first, and not the third (or any following).

In all my years of JavaScriptery, I have never seen a routine that plucks one command out of the batch, ignores the rest, and doesn’t throw an error to be polite.

What am I doing wrong?

Many thanks!

Hi @Tom-Kelleher ,

Welcome to the Freshworks Developer Community!

I did a quick run of your app.js and got the logs mentioned in the code.

Can you check if your browser is blocking something(via extensions) or if a filter is applied to your console? You can also try the same on an incognito window to confirm.

If that’s not the case, please share the index.html so we can debug this further.

Thanks!

1 Like

Okay, yah. A little embarrassing that I had a filter applied. :slight_smile: Getting many more console messages now.

And now my next mystery. I still need to grab hold of my <iframe> tag to fire my postMessage() command. But when I do const iframe = document.getElementById('iframe'); the logs tells me:

iframe = {}

I imagine this postMessage() command would work equally well inside the index.html, but how do I grab hold of my client object inside there?

Never mind. I figured it out. From other examples, I saw that my index.html can do this:

    addEventListener("load", (event) => {

      // "app" is provided by "fresh_client.js"
      app.initialized().then(
        async function (client) {

          let appClient = client;

           // this, that, the other
           ...

I had been seeing this app appear from some other dimension, and finally figured out where it was coming from.

I’ve solved my problem.

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.