htmlpreview / htmlpreview.github.com

HTML Preview for GitHub Repositories
htmlpreview.github.com
1.53k stars 307 forks source link

Javascript inconsistently loads from the wrong relative reference #76

Open Jach opened 5 years ago

Jach commented 5 years ago

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.

jason-s commented 4 years ago

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>
jason-s commented 4 years ago

I have the same issue, I think, with https://htmlpreview.github.io/?https://github.com/jason-s/embedded-blog-public/blob/master/demos/gravity1/gravity1.html