首先,如果您尚未使用base
或正在使用但可以停止使用,请阅读:
这会给你很多充分的理由三思而后行。故事的寓意:通常使用base
. 有充分的理由,而且很有用;在与设计师合作时,我曾多次使用它来获得我可以使用的标记的本地副本,但仍保持与网站资产的连接。但是对于生产现场来说,就太聪明了一半。
此外,这个答案最初是为一个完全重复的不同问题而写的,所以我在这里发布这个,尽管已经有一个与它非常相似的答案。
您是否可以控制标记,或者您可以使用选择器仅获取您想要影响的元素?你可以:
HTML(注意类truelink
。)
<ol>
<li>
<a href="#link1" class="truelink">True Link1</a>
</li>
<li>
<a href="#link2" class="truelink">True Link2</a>
</li>
<li>
<a href="#link3" class="truelink">True Link3</a>
</li>
</ol>
Javascript
window.addEventListener('load', function links(){
var base = document.getElementsByTagName('base')[0],
links = document.getElementsByClassName('truelink'),
l = links.length,
uri = 'http://www.host.tld/path?query=test';
console.log('Base:', base, ', True Links:', links);
console.log('Modifying links in five seconds...');
setTimeout(function go(){
console.log('Modifying links now...');
while (l--){
links[l].href = links[l].href.replace(base.href, uri);
}
console.log('Base: ', base, 'True Links: ', links);
}, 5000);
});
http://jsfiddle.net/M5Hdk/
请记住,此技术演示了使用document.getElementsByClassName
IE,直到版本 9 才支持。如果您必须支持低于 IE9 的版本,请参阅 Jeremy J Starcher 的答案,以了解“效率较低”但支持更好的方法。还有document.querySelectorAll
,IE8及以上版本以及所有其他主流浏览器都支持。如果您只需要支持 IE8,我建议您使用它来选择您的链接,而不是 Jeremy 演示的方法。
我还将更改延迟五秒钟,以便您可以看到它起作用。显然,这对您来说不是必需的(很可能)。
我现在唯一不确定的是我.replace()
是否总是会base.href
在所有浏览器中找到要替换的,所以在替换之前检测相对 url 的存在可能会更好,所以你可以做任何其他事情适当地。有关这个可能的“问题”的一些相关背景,请参阅我的问题,该问题涉及浏览器如何href
在 DOM 中以不同方式处理属性:
使用完全限定 URL 在 Sizzle 中选择元素的方法
script
此外,如果它位于内容之后或标签末尾的内联标签中,这可能会最无缝地工作body
,在这种情况下,您将希望删除该window.addEventListener
部分并替换为自动执行功能。
他们是其他选择,所有可能都有一点问题:
- 彻底清除
base
标签。但是,如果您这样做,您首先要检查是否需要手动将base.href
内容插入到链接中,否则我确信事情可能会破裂或变得脆弱。
- 将事件侦听器添加到
a
您要使用真实链接的链接并以这种方式操作它onclick
,只是不要忘记return false
在单击处理程序函数的末尾,这样浏览器就不会跟随链接。这可能是最无缝的方法,但可能并不适合所有情况。
- 应该是其他人吧。
请务必使用真实世界的标记进行测试。 base
是一个有点古怪的工具,所以对它进行粗暴处理可能会导致不寻常的副作用。你被警告了。