Head HTML - JS Files Loaded on Every Page?

Should the script tags (in Head HTML) where I specify js files to be loaded for my document appear on every single page of my website. Should it not load only on the page where the document is viewed?

I’m a little unclear what you’re asking; can you elaborate? Anything you put in the Head HTML will appear on the export .html file. In the case of an advanced export, it will appear on all export slices.

Hello @jonathan,

I found out what I did and why I had to do it that way. When I copy/pasted the code from the Hype html exported document into the Text Editor and loaded the page, my Hype document showed up but it did not function properly. Apparently, the code that’s in the Head of the Hype html document wasn’t loading? So, I copied the content from the Hype document’s Head to my theme’s (Beaver Builder) Customizer and pasted in CUSTOMIZER > CODE > HEAD CODE.

That’s why I saw the code on every page on the site. I don’t want to do that. Do you know why the Hype document Head would not load according to Tumult’s recommended procedure? I would try Daniel’s plugin but I need it to output OAM widgets by slice.

What recommended procedure are you referencing?

I’m only going on guesswork, but it sounds like your document is using javascript that is provided by another library. So it makes sense that library needs to load. If you add the library to the head html, but then don’t use the HTML that hype generates, that head section won’t exist and neither will your library. So you would need to add it somewhere!

If this is in fact what you’re hitting, there are two workarounds that come to mind:

  1. Instead of copying the Hype div from Hype’s exported .html file, instead reference the .html file in an iframe.

  2. Use a Hype action like an On Scene Load handler to dynamically load your external javascript library. This could be a bit complex depending on when you first need to use it though.

1 Like

Back in April, 2017:

Jonathan Deutsch
APR 28, 2017 | 11:44AM PDT
Hi Quint,

Hype only builds the DOM once when the document loads, so if you destroy the contents of a scene then Hype will not function correctly because it is expecting those elements to be there. Scene loads only reset properties on those elements.

I originally did it that way in v1.0 as an effort to keep transitions between scenes performant. I’ve been wanting to change this and destroy the DOM for inactive scenes, but I do know it will break a variety of documents and have been hesitant. I might do so for a major release or have some sort of compatibility mode.

My recommendation might be to use Advanced Export to do per-layout exports, and have a redirect or code up front that chooses which one to use.

I hope that helps,

Jonathan Deutsch
Founder, Tumult Inc.

With regard to the “head” topic, you guessed correctly. I incorrectly assumed that the js file referenced in the Hype div took care of what was specified in the HEAD HTML section of the actual Hype document. Now, this makes sense!!! What a maroooonnnn. I’ll just enqueue those libraries and the css as needed per my plugin. Thanks for clearing that up!!!

1 Like