Webflow javscript wrapper - var Webflow = Webflow || []; Webflow.push(function () {

Design help Custom code
1

Webflow loads the jQuery library at the bottom of the BODY tag and we need a way to check if the library is loaded before we can use it.

The last post I found about this topic is quite old, so I was wondering if the Webflow javascript wrapper is still considered best-practice.

This post mentions the wrapper:

var Webflow = Webflow || [];
Webflow.push(function () {
  // DOMready has fired
  // May now use jQuery and Webflow api
});

Is this still the recommended method?

Another alternative would be:

window.addEventListener('DOMContentLoaded', (event) => {
    // DOMready has fired
    // May now use jQuery
});

To add to the confusion I found this post on the Webflow blog where they include the jQuery library manually on the Settings/Custom Code of the page.

Any thoughts?

2 Likes
2

Hi @gvdias :wave:, the Webflow.push wrapper is only necessary if you plan to place your code in the Head Code block, or within a code embed element in the Webflow Designer.

Generally, it is considered best practice to place your <script> tags in the Footer Code block of your site settings. That way, you have immediate access to both global libraries Webflow and $ without needing any type of wrapper.

Hope that helps!

2 Likes
3

Thanks for clarifying @danro!

4

Hi @danro. Is this also the case for the footer and header code on the individual pages? Thanks…

5

Thanks – just saved me a lot of hassle.

I recently moved some code from the head to the body that contained the Webflow wrapper. However, with the wrapper in place, it failed to load in the body and drove me mad trying to debug, as there were no apparent errors.

Removing the WF wrapper fixed the issue :+1:

@Talk-to-Peter Yes, I believe so.