Ability to know when profile has loaded in iframe

[liamsnowdon]

Hi, thanks for the awesome tool. Works great :)

One thing that would be useful when using the iframe is to know when the html changes from the initial loading state to the profile state. As far as I can see there is no easy way of doing this. I think this could be achieved by posting a message to the parent like this:

window.parent.postMessage({
  state: 'loaded'
})

Then whenever the iframe is used, the post message can be listened to using:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://gamer2810.github.io') {
    return
  }

  // Do something with message
})

[gamer2810]

Hello, thanks for the nice suggestion.

I have added the message, please try it out and see if it fits your needs.

[liamsnowdon]

Thanks for adding the message :)

I see it coming through now and was planning to use it to dynamically change the height of the iframe when its contents changing. For example, it can go from 210px in height for the initial loading state and then changes to 266px if you're online and playing a game. The problem is I can't get the height of the body because it's cross-origin. Without changing the height of the actual iframe it can leave a big gap underneath the iframe if you're offline and a lot of data isn't there to expand the height.

Have any other ideas for this? 🤔 The height could be added to the post message, I guess, or maybe some property to indicate offline, online, playing etc - I'm not sure if there are set heights based on that. I'd like to use the iframe method instead of injecting the html directly onto the page if possible.