Developer forum

Forum » CMS - Standard features » Load JS at bottom

Load JS at bottom

E-mail notifications
Caro De Weze
Reply
Posted on 25/10/2023 11:49:28

Hi,

Is there a way to render my JS file at the bottom instead of in the head? This may not be loaded first. 

I use the 'Custom header include' with file HeaderInclude.cshtml and that contains all my links to my files such as <script src="/Files/Templates/Designs/Swift/Assets/js/custom.js" crossorigin="anonymous" defer></script>. These are then of course loaded into the head, but how can I load scripts at the bottom?

For example, I make a BottomScript.cshtml (like HeaderInclude.cshtml, but than for the bottom) with a link to my own file bottom.js. Can I link it somewhere so that it appears at the bottom? If this is not possible, how do I solve this in another way?

Caro


Replies

 
Nicolai Pedersen Dynamicweb Employee
Nicolai Pedersen
Posted on 25/10/2023 12:07:12
Reply

Hi Caro

You can edit the master to include js files in the bottom. 

But really you do not need to do that - it is a 'thing of the past'.

I would say you need to use a domcontentloaded or load event inside your js to execute your script after the page load. Or if you are using an ESM script, you can dynamically load after the page has loaded.

What is your script - and why do you need to run it in the bottom?

 
Nicolai Pedersen Dynamicweb Employee
Nicolai Pedersen
Posted on 25/10/2023 12:09:35
Reply

I.e. see how to use domcontentloaded event: https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

 
Caro De Weze
Posted on 25/10/2023 12:13:27
Reply

Hi Nicolai,

Thank you for the quick answer. 

Normally I don't do this, but in this case it is necessary. I need to use an iFrame that renders a completely new scope (document with html, body, ...) and the script I want to add here should only load after the iFrame and not before. It's not the best way, but that's how it's requested for now.

Caro

 

You must be logged in to post in the forum