包括来自 CDN 和本地浏览的库答案

【问题标题】：Include library from CDN and local browsing包括来自 CDN 和本地浏览的库
【发布时间】：2014-12-13 20:18:49
【问题描述】：

如果使用...从 CDN 加载 jQuery

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

...如果网站是 HTTPS (Blocked loading mixed active content "http://ajax.googleapis.com/ajax/...)，它将不被接受。

解决方案似乎是：

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

如果网站是 HTTP 或 HTTPS，它确实可以工作。 但是在本地处理文件时（即浏览我的硬盘上的文件），然后 jQuery 没有加载这个解决方案。

这对我来说很重要，下载my GitHub project 的人将能够在本地进行测试。

如何在CDN中正确包含jQuery，并能在本地浏览HTML文件？

【问题讨论】：

设置本地网络服务器进行测试非常简单。改为这样做。
@Tomalak 不，必须安装一个网络服务器来测试一个简单的 .js + .html 页面是一种矫枉过正。我使用 Windows 并且没有用于测试客户端库的本地网络服务器。如果我真的需要服务器，是的，我连接另一台机器等，但我不喜欢需要一个用于两个简单文件（.html + .js）的网络服务器的想法
如果您有 Windows，那么您已经预装了 IIS，您只需从 Windows 功能列表中启用它。只需单击 5 次，您就可以在几分钟内启动并运行。我看不出问题出在哪里。
我不能要求每一个愿意尝试基本的 1 个 HTML 页面 + 1 个 JS 文件来启用网络服务器的人
你让它听起来好像非常复杂。只需单击几下，您就完成了。在这个问题已经过时的 2 小时内，您只需要 一小部分。说真的，如果你想让你的文件在网络服务器上运行，让它们在网络服务器上运行，其他一切都是无稽之谈。

标签： javascript jquery cdn

【解决方案1】：

一般来说，使用file:// URL 测试网页是个坏主意，我不会费心去支持它。相反，使用本地网络服务器进行测试更有意义。

但如果你打算支持它，你需要检查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>

或者如果你正在做一个 XHTML 页面（或者只是不喜欢 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>

如果不是file:，则使用页面的协议（http:、https: 等），如果是file:，则使用http:。

【讨论】：

感谢@T.J.Crowder 的回答。我也可以一直使用https://ajax.googleapis.com/... 吗？它似乎工作 1) 从本地浏览 (file://)，2) 从 http 网站，3) 从 https 网站。
@Basj：一般来说，建议是尽可能匹配页面的协议（因此协议相关的 URL 很受欢迎）。但是由于您无法使用file: 协议来做到这一点，因此您必须玩上述游戏。
谢谢。你怎么看stackoverflow.com/a/27458680/1422096（我不确定，很乐意得到你的建议）
@Basj：我无法立即想到为什么在http 页面上使用https JavaScript 链接会成为一个问题，所以如果你愿意，那就去吧。注意：type 默认为text/javascript，因此没有理由将type 放在script tag 上。

【解决方案2】：

我一直在尝试使用 HTTPS：

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

它似乎工作：

来自 HTML 页面的本地浏览 (file://)
从http浏览HTML页面
从https浏览HTML页面

【讨论】：

可行的解决方案。 +1

【解决方案3】：

从 HTML5 样板中，在您的 CDN 脚本之后添加：

<script>window.jQuery || document.write('<script src="/path/to/local/jquery.js"><\/script>')</script>

【讨论】：