0

If loading jQuery from CDN with ...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/...

... then it will not be accepted if the website is HTTPS (Blocked loading mixed active content "http://ajax.googleapis.com/ajax/...).

The solution seems to be :

<script type="text/javascript" src="//ajax.googleapis.com/ajax/...

Indeeed it will work if the website is HTTP or HTTPS. But when working on the file locally (i.e. browse the file on my hard drive), then jQuery is not loaded with this solution.

This is important for me, that people who will download my GitHub project will be able to test it locally.

How to include jQuery properly with CDN, and be able to browse locally the HTML file?

Basj
  • 41,386
  • 99
  • 383
  • 673
  • 1
    It's very simple to set up a local webserver for testing purposes. Do that instead. – Tomalak Dec 13 '14 at 09:52
  • @Tomalak no, having to install a webserver for testing a simple .js + .html page is an overkill. I use Windows and don't have a local webserver for testing client-side libraries. If I really need a server, yes, I connect another machine, etc. but I don't like the idea of needing a webserver for two simple files (.html + .js) – Basj Dec 13 '14 at 09:55
  • If you have Windows then you have the IIS pre-installed, you just need to enable it from the Windows feature list. That's a 5-click-operation and you are up and running in a couple of minutes. I don't see where the problem is. – Tomalak Dec 13 '14 at 10:13
  • I can't ask every person who will try a basic 1 HTML page + 1 JS file to enable a webserver – Basj Dec 13 '14 at 11:16
  • You make it sound as if it was horribly complicated. It's a few clicks and you're done. It would have taken you a *tiny fraction* of the 2 hours this question is now old. And seriously, if you want your files to work from a web server, let them run on a web server, everything else is nonsense. – Tomalak Dec 13 '14 at 11:48
  • I really don't agree @Tomalak. It's not about me: if I host two small files on github, I can't ask every person who will want to test them (in this project, nothing is done on server side) to run a webserver. – Basj Dec 13 '14 at 11:57
  • Huh? If you host files on GitHub, then [*that's* your webserver](https://pages.github.com/). Or maybe use DropBox. There are a ton of freely available possibilities. Why would you want to let anyone download those files and run them locally? – Tomalak Dec 13 '14 at 12:21
  • Never mind. I mean: In general, requiring a webserver to run just a simple HTML page is bad (for me). – Basj Dec 13 '14 at 12:24

3 Answers3

2

In general, testing web pages using file:// URLs is a bad idea and I wouldn't bother to support it. Instead, testing with a local webserver makes more sense.

But if you're intent on supporting it, you'll need to do a check on location.protocol:

<script>
(function() {
    var protocol = location.protocol === "file:" ? "http:" : location.protocol;
    document.write('<script src="' + protocol + '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>');
})();
</script>

Or if you're doing an XHTML page (or just don't like document.write):

<script>
(function() {
    var protocol = location.protocol === "file:" ? "http:" : location.protocol;
    var script = document.createElement('script');
    script.src = protocol + '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
    document.getElementsByTagName("script")[0].parentNode.appendChild(script);
})();
</script>

That uses the protocol of the page (http:, https:, whatever) if it's not file:, and uses http: if it's file:.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thanks @T.J.Crowder for your answer. Can I also use `https://ajax.googleapis.com/...` all the time? it seems to work 1) from local browsing (`file://`), 2) from a http website, 3) from a https website. – Basj Dec 13 '14 at 12:14
  • @Basj: In general, the advice is to match the protocol of the page where possible (hence the popularity of protocol-relative URLs). But since you can't do that with the `file:` protocol, you have to play a game like the one above. – T.J. Crowder Dec 13 '14 at 12:17
  • Thanks. What do you think of http://stackoverflow.com/a/27458680/1422096 (I'm not sure, would be happy to have your advice) – Basj Dec 13 '14 at 12:19
  • @Basj: I can't immediately think of why it would be a problem to use an `https` JavaScript link on an `http` page, so go for it if you like. Note: `type` defaults to `text/javascript`, so there's no reason to put `type` on the `script `tag. – T.J. Crowder Dec 13 '14 at 12:33
1

I tried with HTTPS all the time :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/...

It seems to work :

  1. from local browsing of the HTML page (file://)

  2. from http browsing of the HTML page

  3. from https browsing of the HTML page

Basj
  • 41,386
  • 99
  • 383
  • 673
-1

From HTML5 Boilerplate, add after your CDN script:

<script>window.jQuery || document.write('<script src="/path/to/local/jquery.js"><\/script>')</script>
sahbeewah
  • 2,690
  • 1
  • 12
  • 18