iFrame reloading when page is resized breaking functionality

I’m creating a plugin that is based of an API that displays its data inside of an iFrame. To extend its functionality, when I initialize the iFrame inside of the update function I save a JavaScript object to the instance,

e.g const obj = new Board; instance.data.object = object;

Later on, inside my actions, I run some functions on that object saved in the instance.

e.g instance.data.object.doSomeWork()

And it works great! However, one huge problem … when I resize the page, the iFrame gets redrawn, and now the functions don’t work anywhere.

I realize the iFrames reloading is just how bubble works, but there must be a solution. I can’t seem to pinpoint where exactly is my problem.

Any advice would be appreciated.

All the best,

The issue, and mostly with the last version of editor, is that Bubble will trigger the update function of your element because the size (width/height) may have changed. This will be the same thing if user change device orientation.
you should add something to check the initial load and avoid to reload the update function after the first run (instance.data.initial = true )

You know, I already thought of that …

But it reloads anyways :frowning:

I have an if else statement and I verified that it’s not running the code. But yet, the iframe gets redrawn …

Can you share what you have?
I have created a plugin that also draw an iFrame and it doesn’t get reloaded.

Hey @Jici thank you for your reply. Here is my code:

window.myInstance = instance;

if (document.getElementById(`wt-container${instance.data.time}`)) {
    console.log("Element exists!");
} 
else {
    console.log("Initializing...");
    instance.canvas.append(`<div id='wt-container${instance.data.time}' class='whiteboard'></div>`);
    initWhiteboard(instance, properties, context);
}

I am saving my window to the instance for a client side action. However, even my element actions are experiencing the same problem.

Here is a link to the demo site if you’d like to see it in action:

Is this code in your element / update function?

Exactly

Honestly, I think i need more informations about how you are working with this plugin. That sound strange to me how you trigger the initWhiteboard. But I dont have enough informations to understand everything around that.
But I’m pretty sure that your filter actually doesn’t work correcty because I only see Element exists and never Initializing in console log.

I take a short moment to check documentation and normally, you should create your container (div) into the initialize part and run the new api.WhiteboardTeam() into the update section. Have a filter to make sure this didn’t run before

1 Like

Actually, the initializing console log didn’t save (I made that change right before making this post)… now its saved, and that console log is existing.

Actually, the plugin wouldn’t work at all without it being in update, because I need access to properties :confused:

I’ll get back to you guys with some updates

@Jici

Here is my console:

Initializing…

Element exists!

As expected. But just for fun, I moved the append function to initialize. And guess what, the issue still exists. When I resize the page, something happens, and my iframe gets resized. Many of the plugins I have created I have been able to create that filter successfully, I guarantee with 100% that it is not an issue with my filter…

I have no explanation for this…

Check this out: Responsiveness and iFrame - #2 by phuthi

Someone else had this issue in the past…

What could be the issue?

I’ve looked at the DOM when the page is being resize, and I observe the following behaviour:

When the page resizes…

  1. Nothing happens to the element I append
  2. Nothing happens to the iframe tag
  3. The DOCUMENT inside the iframe gets reloaded…

One question for you, @emmanuel , when the page resize… is the iframe being moved in between nodes? If this is the case, that would explain this behaviour…

UPDATE WITH SOLUTION:

My only guess is that when the window is resized, Bubble is tossing around the iFrame in between nodes. When an iFrame is moved around in the DOM, the document inside is reloaded.

According to some things I read online, a decade ago some developers added functionality to Webkit which would prevent iFrames from being reloaded when moved around in the DOM. Unfortunately, this was removed.

SOLUTION:

If you have some element actions that are tied to an iFrame, and your iFrame is being reloaded on page resize (in turn breaking your element actions) the solution is this:

    window.onresize = () => {
       document.getElementById("yourelement").remove();
       instance.canvas.append("yourelement");
    }

When the page is resized, Bubble forces the iFrame to reload. What we need to do then is reinitialize the iFrame, so we remove the element and then append it once more. This ensures that our element actions will work.

We also don’t want to run this every time the update function executes since we don’t want the iFrame to re-initialize unless the page resizes, so make sure to program some filters accordingly.

I know this is not a great solution, since ideally we want the iFrame to not reload upon page resize. But unless someone else finds a solution, this is what we got!

I disagree because I have an iframe plugin thing and it doesn’t reload.
Anyway, I have tested the script and I can confirm that it will not reload if you structure thing correctly.

(didn’t play with the setting for width and height… but you cna see that it doesn’t reload if you play with responsiveness)