Add Hype document to webpage dynamically

Using JavaScript with Hype
1

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:

<html>
	<head>
		<style>
			.HYPE_document
				{
					margin: auto;
					position: relative;
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
		</style>
		<script>
			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');
					container.appendChild(docScript);
					document.body.appendChild(container);
				}
		</script>
	</head>
	<body>
	</body>
</html>

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?

2

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

3

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
4

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.

5

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

6

Yes. It’s done.

1 Like