Add Hype document to webpage dynamically

Suppose, I have my webpage (say, index.html) in my server root (say htdocs). I’d like to load the Hype document in the webpage (the resources folder is also in htdocs) at a specific event (say window.onload).

For the above (example) use case, I tried to load the document like this:

					margin: auto;
					position: relative;
					width: 100%;
					height: 100%;
					overflow: hidden;
			window.onload = function()
					var container = document.createElement("DIV");
					container.setAttribute('class', 'HYPE_document');
					container.setAttribute('id', 'filename_hype_container');
					var docScript = document.createElement("SCRIPT");
					docScript.setAttribute('type', 'text/javascript');
					docScript.setAttribute('charset', 'utf-8');
					docScript.setAttribute('src', 'myresourcesfolder/filename_hype_generated_script.js');

However, this doesn’t seem to work. I get an error:

Uncaught TypeError: Cannot read property 'setAttribute' of null at Array.m (filename_hype_generated_script.js:formatted:7)
    at HYPE-654.thin.min.js:102
    at HYPE-654.thin.min.js:102
    at HYPE-654.thin.min.js:102

I checked those files and found out this being highlighted as the problematic part: document.getElementById(g).setAttribute("HYP_dn", f);
which is straightforward, and means that no element with the specified ID exists in the DOM.

So, I’d like to ask, if and how can I load the document at a specific event in some other HTML page without including the <script> from the start?

Look for Hype ScenePage it only duplicates Hype Instances dynamically but it might give you some code snippets to work from.

You are correct about the source of the error; basically the script cannot find the DOM element to use as the container.

Interestingly, the code works for me in a simple test where I exported a file as “filename”. I was just using the basic python -m SimpleHTTPServer 8000 web server and tested in the latest macOS safari/chrome.

Can you say a little bit more about your configuration, such as what browser/version/OS you are testing on and what web server you are using?

The two items I could suggest would be:

  • Make sure the ID of the container is the same in your code as in the export; it needs to be named exactly the same. (in the case that “filename” was substituted for the example code you posted)
  • add the “filename_hype_container” before adding the script. The script doesn’t need to be contained within this div, it just needs to be loaded later.
1 Like

I tried the same code that I had posted on a fresh export from Hype and just replaced my substituted name as ‘filename’ with the name that came from the export. I don’t remember in which part I had messed up yesterday, but, yeah, it works for me too. I’m using Chrome 76 on Windows 10 and Apache server. Thanks a lot.

Okay, sounds like you had it right and it might have just been a typo somewhere? Case closed?

Yes. It’s done.

1 Like