javascript - Script stops working when hosted on Github Pages - Stack Overflow

admin管理员组

文章数量:1336167

I built a random sentence generator -- when you click an HTML button, a random sentence is generated beneath it. The generation is powered by a simple script and jQuery.

It works fine on my local machine: When I open index.html in a browser, everything goes smoothly.

But once I upload to GiHub and visit the GitHub pages URL, the generator stops working. Clicking the button does nothing.

Here's the script (it's all contained within the index.html file):

<script src=".10.1.min.js"></script>

and

<script> function sentenceLoad() {

    //declare arrays
    var nouns = ['Mulder, Scully, and']; 
    var names = ['Assistant Director Skinner', 'the Cigarette Smoking Man', 'Alex Krycek'];
    var actions = ['are running from alien bounty hunters', 'are tracking a shapeshifter', 'are hunting a mutant serial killer'];   
    var places = ['in the woods of New Jersey', 'in a government bunker', 'in Olympic National Forest'];       
    //shuffle through contents of each array, picking one entry per array
    var randNoun = nouns[Math.floor(Math.random() * nouns.length)];
    var randName = names[Math.floor(Math.random() * names.length)];
    var randAction = actions[Math.floor(Math.random() * actions.length)];
    var randPlace = places[Math.floor(Math.random() * places.length)];
    //place the random entry into the appropriate place in the HTML
    jQuery("h5").html("");
    jQuery("h5").append(randNoun + "&nbsp;");
    jQuery("h5").append(randName + "&nbsp;");
    jQuery("h5").append(randAction + "&nbsp;");
    jQuery("h5").append(randPlace);
}

What would cause this to work locally, but not work on Github Pages?

I built a random sentence generator -- when you click an HTML button, a random sentence is generated beneath it. The generation is powered by a simple script and jQuery.

It works fine on my local machine: When I open index.html in a browser, everything goes smoothly.

But once I upload to GiHub and visit the GitHub pages URL, the generator stops working. Clicking the button does nothing.

Here's the script (it's all contained within the index.html file):

<script src="http://code.jquery./jquery-1.10.1.min.js"></script>

and

<script> function sentenceLoad() {

    //declare arrays
    var nouns = ['Mulder, Scully, and']; 
    var names = ['Assistant Director Skinner', 'the Cigarette Smoking Man', 'Alex Krycek'];
    var actions = ['are running from alien bounty hunters', 'are tracking a shapeshifter', 'are hunting a mutant serial killer'];   
    var places = ['in the woods of New Jersey', 'in a government bunker', 'in Olympic National Forest'];       
    //shuffle through contents of each array, picking one entry per array
    var randNoun = nouns[Math.floor(Math.random() * nouns.length)];
    var randName = names[Math.floor(Math.random() * names.length)];
    var randAction = actions[Math.floor(Math.random() * actions.length)];
    var randPlace = places[Math.floor(Math.random() * places.length)];
    //place the random entry into the appropriate place in the HTML
    jQuery("h5").html("");
    jQuery("h5").append(randNoun + "&nbsp;");
    jQuery("h5").append(randName + "&nbsp;");
    jQuery("h5").append(randAction + "&nbsp;");
    jQuery("h5").append(randPlace);
}

What would cause this to work locally, but not work on Github Pages?

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 12, 2017 at 2:43 Gerrard Cap. asked Aug 13, 2016 at 10:56 Gerrard Cap.Gerrard Cap. 5511 silver badge55 bronze badges 3

• 1 Check the console for errors – Rory McCrossan Commented Aug 13, 2016 at 10:57
• 1 Can you post the GitHub Pages url? – yuriy636 Commented Aug 13, 2016 at 11:01
• Possible duplicate of Blocked loading mixed active content – Andrew Myers Commented Sep 12, 2017 at 2:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

If you open up your Developer Tools pane (in Chrome, right-click on the page and choose Inspect), you'll see this error in the Network console:

Mixed Content: The page at 'https://bobbyfestgenerator.github.io/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery./jquery-1.10.1.min.js'. This request has been blocked; the content must be served over HTTPS.

You need to load your script over HTTPS instead of HTTP.

The reason this works locally is because you're using the file:// scheme on your local machine (or http:// if you have a local development server). The browser doesn't have a problem loading an external script over HTTP in this case.

However, Github Pages is hosting your file over HTTPS (a secure connection) for you. For security reasons, the browser won't load a script over HTTP if the page is hosted on HTTPS.

Just change the code in your <head> tag to load the script over HTTPS:

<script src="https://code.jquery./jquery-1.10.1.min.js"></script>

Today I saw a similar problem, but not because of HTTP/HTTPS: when I published to GitHub pages, all of the CR/LF characters were removed in the source HTML. Perhaps not a big deal for HTML with closing tags, but when the entire source page is on one line, including JavaScript, well - any embedded ments in JavaScript caused all code afterwards (until the JavaScript closing tag) to be unexpectedly also mented out.

In this case some more code is treated like a ment:

    code...
    // a ment
    some more code...

Here's an example. Before, as viewed in editor:

After push to GitHub, CR/LF apparently removed by GH-Pages actions:

Note how all the remaining JavaScript ends up disabled after the ment::

The (somewhat undesired) solution would be to remove the ment or better: use /* and */ ment wrappers instead of // at the beginning of the line.

• edit: the root cause seems to be the layout: press; see https://github./jekyll/jekyll/issues/8660

本文标签： javascriptScript stops working when hosted on Github PagesStack Overflow