Testing a Hype document with JS that loads non-Hype pages into a HTML Widget

iframe

(Art Blumberg) #1

I’m trying to take things to the next level with my web page and want to pre-test the functionality before I move the pages onto the web server. The Hype document contains JS that, based on the button pressed, loads a standard HTML page into the HTML Widget.
I originally had the entire page in Hype, but with 20+ scenes, it was getting rather slow to load and cumbersome to maintain. So I split each scene into a separate HTML document and used Hype as the controller.
Up till now, I had loaded each of the HTML pages to the web server and hardcoded the URL in the JS - unfortunately, this made it difficult to test, since the uploaded page immediately goes live when it is uploaded.

I found that I can use window.location.hostname in the JS with an IF test to swap in the website URL prefix when the page is executed from the website. Is there a way to swap in the local computer data if the hostname = 127.0.0.1? The attached sample shows my attempt, but alas it does not work locally.

The first scene in the document shows the pathing of the documents on both the web server and local computer. If you access the “setFrame” JS and change the == to != (it is commented appropriately), you will find that it really does work when referencing the web server.

I searched the forum, but haven’t seen anything similar to this question.
Thanks for your help.
ArtB.
demo.hype.zip (68.8 KB)


(Jonathan Deutsch) #2

The first issue is the value placed in pathval:

if (locval == "127.0.0.1") {var pathval = "/Users/User1/Desktop/Pens/"}

This is a path, for it to be part of a URL you need a protocol. Otherwise the current protocol (http), host (127.0.0.1), and port number (optional) is assumed. You may be tempted to use the file:// protocol, but this won’t work for browser security reasons – it would be bad if a remotely loaded site could start accessing your filesystem!

The best solution would be to run a webserver from your computer that gives http access to that folder. You can do this easily via these Terminal.app commands:

cd /Users/User1/Desktop/Pens/
python -m SimpleHTTPServer

Now you’ll have a server running at 127.0.0.1:8000 giving the Pens directory. You can then change the pathval line to:

if (locval == "127.0.0.1") {var pathval = "http://127.0.0.1:8000"}

Two small things/nit-picks to note:

  1. There seems to be a small naming difference between pens and Pens in your code. macOS generally uses a case insensitive filesystem, but most unix-based webservers are not, so it is best to at least be consistent otherwise you might run into a bug of it working on the mac but not on your server.
  2. You are “declaring” pathval in the if/else block via the var keyword. This isn’t really a bug because of javascript var scoping/hoisting, but wouldn’t work with the newer let and is against most common style guides due to confusion with C-style variable scoping.