Javascript 如何在需要时通过 HTTPS 包含 CSS 和 JS 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2725523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Include CSS and JS files via HTTPS when needed?
提问by Nathan H
I am adding an external CSS file and an external JS file to my headers and footers. When loading an HTTPS page, some browsers complain that I am loading unsecured content.
我正在向页眉和页脚添加一个外部 CSS 文件和一个外部 JS 文件。加载 HTTPS 页面时，某些浏览器会抱怨我正在加载不安全的内容。
Is there an easy way to make the browser load the external content via HTTPS when the page itself is HTTPS?
当页面本身是HTTPS时，有没有一种简单的方法可以让浏览器通过HTTPS加载外部内容？
回答by BalusC
Use protocol-relative paths.
使用协议相对路径。
Thus not
因此不
<link rel="stylesheet" href="http://example.com/style.css">
<script src="http://example.com/script.js"></script>
but so
但是所以
<link rel="stylesheet" href="//example.com/style.css">
<script src="//example.com/script.js"></script>
then it will use the protocol of the parent page.
然后它将使用父页面的协议。
回答by Alain BECKER
nute & James Westgate are right when comenting on the later answer.
在评论后面的答案时，nute 和 James Westgate 是对的。
If we take a look at miscelanous industry-grade external javascript includes, the successfull ones use both document.location.protocol sniffing and script element injection tu use the proper protocol.
如果我们看一下杂项工业级外部 javascript 包含，成功的使用 document.location.protocol 嗅探和脚本元素注入 tu 使用正确的协议。
So you could use something like :
所以你可以使用类似的东西：
<script type="text/javascript">
var protocol = (
("https:" == document.location.protocol)
? "https"
: "http"
);
document.write(
unescape(
"%3Cscript"
+ " src='"
+ protocol
+ "://"
+ "your.domain.tld"
+ "/your/script.js"
+ "'"
+ " type='text/javascript'
+ "%3E"
+ "%3C/script%3E"
) // this HAS to be escaped, otherwise it would
// close the actual (not injected) <script> element
);
</script>
The same can be done for external CSS includes.
外部 CSS 包含也可以这样做。
And by the way: be careful to only use relative url() path in your CSS, if any, otherwise you might still get the "mixed secure and unsecure" warning....
顺便说一句：小心在你的 CSS 中只使用相对 url() 路径，如果有的话，否则你可能仍然会收到“混合安全和不安全”警告......
回答by gkempkens
In contradiction to the escaped response (which will also work) you could skip that part and use the correct way to add nodes to your dom tree:
与转义响应（也可以工作）相反，您可以跳过该部分并使用正确的方法将节点添加到 dom 树中：
<script type="text/javascript" language="javascript">
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", document.location.protocol + '//www.mydomain.com/script.js');
document.getElementsByTagName("head")[0].appendChild(fileref);
</script>
But the protocol-relative path would be the way to go.
但相对于协议的路径将是要走的路。
回答by James Westgate
If you use relative paths ( and the content is on the same domain) then the content should use whichever protocol the page was requested in.
如果您使用相对路径（并且内容在同一个域中），那么内容应该使用请求页面的协议。
However if you are going across domain to a CDN or resource site, or if you need to use absolute paths, then you will need to use server side script to change the links, or always use https://
但是，如果您要跨域访问 CDN 或资源站点，或者需要使用绝对路径，则需要使用服务器端脚本来更改链接，或者始终使用 https://
