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!

1 Like
3

Thanks for clarifying @danro!

4

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