问题描述
这是一个主题的变体。我查看了其他一些答案,但它们不太符合要求。
我有 d1.site.org
和 d2.site.org
。 d2 使用以下 jquery 从 d1 获取菜单:$('#myNav').load('https://d1.site.org/ header');
但是从 d1 引入的菜单中的相关链接都指向 d2,我希望这些链接变成 d1.site.org/menu1
而不是它们的内容现在执行 d2.site.org/menu1
(最终会出现 404 错误)。
PS - 启用了 CORS,并且顶级菜单选项可以正常显示并在 d2 上正确显示,只是包含以下级别的链接最终带有错误的子域。当它们显示在 d2 上时,如何让所有相关链接都指向回 d1?
编辑:澄清 - 所有菜单链接在 d1 上都是 menu1
menu2
等,这使它们成为 d1.site.org/menu1
等,但是当它们在 d2 上时,它们是 {{ 1}},我希望他们成为 d2.site.org/menu1
解决方法
那是绝对路径,相对路径中不会包含您的域。您可以解析出相对路径并在它前面加上您想要的域。
thing = 'd2.site.org/menu1';
relative = thing.substring(thing.indexOf('.org')+4,thing.length);
newLink = 'd1.site.org'+relative
console.log(newLink);
,
这是我最终在 d2.site.org 上所做的:
$('#mainNav').load('https://d1.site.org/ header');
$(window).on("load",function () {
setTimeout(function () {
$('header nav').each(function() {
var origUrl = this.href;
origUrl = origUrl.replace("https://d2.site.org","");
var newUrl = 'https://d1.site.org' + origUrl;
this.href = newUrl;
});
},1000);
});
加载主头部,然后页面加载完毕,等待1秒,然后更新所有指向d2的链接,使它们指向d1。 setTimeout 的原因是我无法弄清楚如何执行两个加载事件并让一个接一个发生。我也可以等待不到一秒钟,但对于在页面加载后可能将鼠标悬停在这些链接上的人来说,它已经足够快了。可能还有其他调整可以使这更好,但现在已经足够了。
最后,因为 DOM 提供了 d2.site.org 在其他任何东西都可以访问它之前,脚本必须在之后运行。我不知道有什么方法可以在构建页面时捕获 URL 属性。