javascript - 使用Javascript拦截开发服务器上的链接

Question

我有一个纯 HTML 作业，该作业正在与交付它的服务器不同的服务器上开发。交付服务器是一个专有系统，它只真正允许您上传最终的 HTML，并且它会进行自己的 URL 重写，从而使问题变得复杂，因此我需要在页面之间使用绝对 URL 寻址，这意味着在开发服务器上单击链接当前会带上您到尚不存在的实时服务器页面。这对于测试来说有点不友好。

我可以利用的一件事是，你放在实时服务器上的 HTML 只是正文标记之间的内容，所以我想我可以在头部区域中弹出一些 Javascript，拦截以开头的链接的点击特定的 URL 并将其发送到开发服务器；像这样:

“如果 URL 以 https://liveserver.com/ 开头，请将开头更改为 https://devserver.com/”

这样，Javascript 仅出现在开发服务器上，并且在上传代码时不会进行重定向。

我真的不想为此而费心加载 JQuery(除非它使它变得非常容易)，那么有没有一种简单的方法可以在纯 Javascript 中做到这一点？可能是prevent.default？

谢谢

Answer 1

不确定这是个好主意，但您可以运行查询选择器并替换所有 href。

请注意，运行后两个链接都指向 stackoverflow:

document.querySelectorAll('a')
  .forEach(
    a => a.href = a.href.replace('google', 'stackoverflow')
  );

a {
  display: block;
  padding: 1em 0;
  position: relative;
}
a::after {
  content: attr(href);
  display: block;
  font-size: 0.75em;
  font-family: sans-serif;
  padding: 0.25em 0;
}

<div>
  <a href="http://google.com/google-link">Google</a>
  <a href="http://stackoverflow.com/stack-overflow-link">Stack Overflow</a>
</div>