Differences between HTML component when in Preview Mode vs. Published site

Ask the community
1

I have a set of dynamic pages that all have the same HTML component in it with a bunch of custom HTML, CSS and JS. My dynamic page code gathers a bunch of info from the content manager, posts a message to the HTML component, then the component displays some information based on the message.

The problem is that the HTML component displays just fine when in preview mode, but doesn’t show anything when the site is published. It was working just earlier today, and I don’t know what changed to make it stop functioning properly.

The problem (seems to be) with one of the last lines in the HTML component code:

document.body.insertAdjacentHTML("beforeend", html);

Because using the developer tools on the published site reveals none of the code stored in the “html” variable is present. Code is as follows below:

Dynamic Page Velo Code:

// Queries a bunch of my databases and formulates it into an object, I know that works because console.log() outputs expected results.
$w.onReady(function () {
    $w("#myIframe").postMessage({
        "array1": [/* content */],
        "array2": [/* content */],
        "array3": [/* content */]
    });
})

HTML Component Code:

<!-- Leaving out all the HTML tags and CSS -->
<script>
    window.onmessage = (message) => {
        var array1 = message.data.array1; //etc.
        
        let html = `
            <div class="example">
                <p>Assorted HTML code that doesn't really matter.</p>
            </div>
        `;
        document.body.insertAdjacentHTML("beforeend", html);
    };
</script>

I can’t for the life of me figure why it was working just hours ago and now it won’t. Please help!

2

It could be you are running into the well-known timing problem: the html-component is supposed to load before the page, but if it does not (and that happens) then the Wix page is sending data to an html-component which isn’t listening yet, because it is not fully loaded.
A very old article of mine addressing this: https://girizano.wixsite.com/codecorner/post/html-component-not-running-in-publish-mode-google-sheets-example