Giters

htmlpreview / htmlpreview.github.com

HTML Preview for GitHub Repositories

Home Page:htmlpreview.github.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Javascript inconsistently loads from the wrong relative reference

Jach opened this issue · comments

commented

I've previously used https://htmlpreview.github.io/?https://github.com/Jach/voronoi_base/blob/master/ui.html to demo a voronoi diagram drawer... except that it no longer seems to work with this service.

The issue seems to be that I'm loading several scripts in the style of src="ui.js" which I expect to be loaded and executed when the body tag's onload is reached. According to my browser's network console, these are now trying to load against the github.io root (so they 404) rather than my github repo. In a sense this is correct, but it didn't used to work this way...

An odd related behavior is that if I go to https://htmlpreview.github.io/ main page and enter the URL from there and click preview, then those files do load correctly! Except I think they must be loading asynchronously since the body's onload thinks a function defined in ui.js still does not exist yet. And if I reload the page I get the 404 behavior again.

This might be related to the few other issues people have opened around executing JS.

I can work around this so it's low-priority to me but thanks in advance if it's addressed.

commented

Looks like it's the MIME type. If I load this .html file and Inspect in Chrome, I see

<head><base href="https://raw.githubusercontent.com/Jach/voronoi_base/master/ui.html">
<meta charset="utf-8">
<title>Voronoi base</title>
<style type="text/css">
  body {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }

  #canvas_wrapper {
    float: left;
    /* there was a border here but for some reason the bottom border was too far bottom by a few pixels.
    Something to investigate later. */
  }

  .clickable {
    cursor: pointer;
  }

  #controls_wrapper {
    float: right;
    border: 1px solid;
  }
</style>

<script type="text/htmlpreview" src="custom_algorithm.js">
</script>
<script type="text/htmlpreview" src="graph_colorizer.js">
</script>
<script type="text/htmlpreview" src="rhill-voronoi-core.js">
</script>
<script type="text/htmlpreview" src="ui.js">
</script>

</head>