将显式协议规范与相对 URL 相结合答案

【问题标题】：Combine explicit protocol specification with relative URL将显式协议规范与相对 URL 相结合
【发布时间】：2010-08-09 16:10:13
【问题描述】：

我有一个通过 HTTP 访问的页面。此页面使用 HTTPS 链接到同一服务器上的另一个页面。在使用相对 URL 时，使用 HTML 和/或 Javascript 强制转换到 HTTPS 的最优雅的方式是什么？

基本上，我想要protocol-relative URL 的反面。我想明确指定 HTTPS，而不将主机名硬编码到 URL 中。

我正在开发一个大型遗留网站，因此使用不显眼的 javascript 对现有标记进行最小更改的解决方案是理想的。

我意识到在 destination 页面上执行 HTTPS 效果更好，但在这种情况下这不是一个选项。

【问题讨论】：

你指的是<a href="...">元素？
是的，如果不清楚，抱歉。

标签： javascript https

【解决方案1】：

$("a").each(function () { 
    this.href = "https://" + window.location.host + this.pathname + this.search + this.hash;
});

您可以提供更具体的选择器，以确保它不会弄乱您不打算更改的任何链接，但由于您知道要求，因此我将其留给您。

【讨论】：

不要忘记在连接中添加斜杠；）

【解决方案2】：

我认为您将不得不自己根据window.location 上的部分构建 URL。

var path = anchor.href;

var httpsUrl = "https://" + 
  window.location.host + 
  (path.charAt(0) === '/' ? path : window.location.pathname + '/' + path);

或类似的东西（特别是如果有参数等）。

edit — 人们注意到，当您访问“href”值时，现代浏览器会返回完整的 URL，这使得在这些情况下解决这个问题变得更加容易（因为您只需要修复协议前缀）。（感谢@Daniel！）

【讨论】：

是的，我已经接受了。我只是希望有人可以指出一个库或 jquery 插件或将其变成单行的东西。构建起来并不难，但是如果有人已经经历了所有的边缘情况并确定了一种干净、不引人注目的连接方式......
我认为这行不通。 anchor.href 被解析为完整的 URL，即使提供的 href 是相对 URL。
@Daniel 在现代浏览器中确实如此，这使得这更容易做到，但在旧版本的 IE 中却不是这样。在 IE8 之前，您可以取回在原始标记中的属性中创作的任何内容。
@Pointy：谢谢！很高兴知道。我没有安装任何旧浏览器（正如他们所说，无知是幸福）。您是否知道 anchor.pathname 属性是否会在较旧的浏览器中自动解析为相对 URL？我会假设是这样 - 如果是这样，您可以让浏览器完成一些工作并删除相对 URL 的条件逻辑。
@Daniel 我记不太清了——这种事情我真的不需要处理太多，所以我所知道的大部分来自我在这里读过的东西那里，还有少量的随机经验。