Streaming live at 10am (PST)

Purpose of Webflow generated JS code in head


#1

Hello,

I noticed on live projects, Webflow inserts some javascript in the head element. The code is:

!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);

I was wondering if anyone could let me know the purpose of this code? And also, if it would be OK to place the code before the closing body tag on an externally hosted site?

Thanks!


#2

This code adds w-mod-touch class to the <html> tag of the page, if the user is browsing the site using a device that supports touch.

Non-minified version:

(function(window, document) {
    var documentElement = c.documentElement,
        classname = " w-mod-";
    documentElement.className += classname + "js", ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch) && (documentElement.className += classname + "touch")
})(window, document);

#3

Webflow might need this done before the webflow.js is loaded onto the site (as observed by the IIFE), so I recommend not moving it. You are free to experiment however.


#4

To add a little more to @samliew 's answer, Heard back from Webflow staff on this one and they said:

“This code is added by Webflow for support of touch devices and cannot be removed from the head at the moment.”