Run custom JS before body elements

Support
#1

Hi there,

I’ve found this cool simple open source script that renders a Space Invaders game in your browser and I’m using that for my custom 404 page. I’ve added the game.js code to my custom page JS, and created a raw HTML element containing the container and the script call, but the custom JS is loaded after the body, meaning the trigger to run the script comes before the script is loaded.
I’ve tried copying the whole script in a tag in the RAW element, but that brings all kinds of rendering errors.
So, how do I load the custom JS script before the element is rendered in the DOM?

#2

Hello @herko,

Thanks for writing in!

We highly recommend that you install the “Insert Headers and Footers” plugin. Once it is installed, go to Settings > Insert Headers and Footers > Footers and insert the custom JS code that you want to run before the </body> element.

Kindly let us know how it goes.

#3

Hi Ruenel,

Thanks for your reply. I’ve installed the “Insert headers and footers” plugin like you recommend. However, this plugin duplicates the ‘add custom JS’ feature in Pro and only on all pages. What I need is for this script to load and run on one page only (my custom 404 page). And there’s no way I can configure it like that with this plugin.

Can I request a feature for the Pro theme? Please ad an option to the ‘add custom JS’ (which already has ‘Page JS’ and ‘Global JS’ options) to differentiate between custom JS loaded in the header and in the footer of the page/global. That’ll make it easier to optimise page load speed as well…

#4

I’ve fixed it by uploading the js file to my server manually, and calling the js script in the Raw HTML element.

https://herkocoomans.nl/404-page-not-found/ :slight_smile:

Herko

#5

Hello Herko,

Glad that you were able to fix your issue by yourself. Please feel free to reach us if you have any query regarding our theme and theme settings.

Thanks

#6

Thanks Prakash_s, but could you please see my feature request to be able to decide where the custom JS gets loaded is being considered?

Herko

#7

You should really be using the below to load external libraries…

#8

Hello Herko,

Thanks for your suggestion we would keep in mind and can be taken into consideration for future development.

Thanks for understanding

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.