HTML如何加载外部JS文件

Question

I'm a beginner in web dev and I've recently come across some code that includes two external JS files in the following way:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

I know the browser will perform additional HTTP-requests to get the referenced files. Now, this is what's got me wondering:

When I put the containing HTML-file into the XAMPP htdocs folder and access it via localhost, everything works fine. However, when I just open the local .html-file in Chrome oder Firefox, it won't be able to find these external JavaScripts.

Obviously, this isn't a problem, since you wouldn't normally use an HTML-file that way, but I still wonder what happens here. Does it need some kind of server to include external JS files? Interestingly, it works when I include the files like this:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

It would be really interesting to know why =)

Cheers!

Answer 1

本地主机具有http：//协议，如果您将本地主机的url复制并粘贴到任何编辑器中，则您可以简单地看到带有本地主机url的http：// ，但是当您通过file：//直接打开文件时，它没有，这就是为什么通过XAMPP本地主机访问时，文件已加载。

Answer 2

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> is using a relative url, it will use the protocol scheme from the displayed page, but against the host in the URL. On an HTTPS page, this will be an HTTPS request, on an HTTP page, it will be an HTTP request.

So in other words it will look for the correct protocol - HTTP or HTTPS - used by the requested page and use that.

Here is a good read about this topic: http://nedbatchelder.com/blog/200710/httphttps_transitions_and_relative_urls.html