0

我正在处理的网站有一个<base>标签指向与该网站所拥有的不同的 URL。我想做的是<base>通过使用下面的 trueURL 找到网页的 url 来绕过标签,因为我需要它来构建一些内部锚点,因为我需要网站的实际 url,以便内部锚点正常工作。

我遇到的问题是我不知道应该如何使用我存储在我的 trueURL 变量中的 url。是否可以使用它,然后向 url 添加额外的扩展名以使其指向我的锚点?下面是我想要做的一个粗略的例子

var trueURL = window.location.href;

    <html>

    <ol>
        <li>
            <a href= [trueURL] + "#link1">Link1</a>
        </li>

        <li>
            <a href= [trueURL] + "#link2">Link2</a>
        </li>

        <li>
            <a href= [trueURL] + "#link3">Link2</a>
        </li>
    </ol>

    </html>

因此,最后我想要一个看起来像 trueURL#link3 的链接。

提前致谢,

:D :D

4

4 回答 4

2

我正在假设您的真实案例比您的示例更复杂。如果不是,请查看其他答案,这可能更适合您需要做的事情。

这将做的是......

  1. window加载事件上运行一个函数,它将......
  2. DOM找到标签中的每个元素A,然后...
  3. 遍历那些找到A的标签并检查元素是否有一个enhance类,如果有的话......
  4. 拆分hrefat#以获取当前a元素的hash值,我们将...
  5. 将其与以下内容相结合:

    '//' + location.host + location.pathname;
    

    给我们当前页面的 URL,不带hashor 查询字符串。如果您想要查询字符串(?URL 后面的内容),请添加location.search

    '//' + location.host + location.pathname + location.search;
    

请注意,该//部分与协议相关,因此它将使用base href' 协议是什么,例如,httphttps. 但是,您可能需要指定它。

标记

注意class属性,我们将使用它来识别a要操作的标签。

<ol>
    <li>
        <a href="#link1">Link 1</a> - 
        No enhance class, should be subject to <strong>BASE HREF</strong>: 
        <strong class="p">&raquo; http://example.com#link1</strong>
    </li>
    <li>
        <a href="#link2" class="enhance">Link 2</a> - 
        Has enhance class, should be:
        <strong class="p">&raquo; http://fiddle.jshell.net/_display/#link2</strong>
    </li>
    <li>
        <a href="#link3" class="enhance">Link 3</a> - 
        Has enhance class, should be:
        <strong class="p">&raquo; http://fiddle.jshell.net/_display/#link3</strong>
    </li>
    <li>
        <a href="#link3" class="enhance">Link 4</a> - 
        Has enhance class, should be:
        <strong class="p">&raquo; http://fiddle.jshell.net/_display/#link4</strong>
    </li>
</ol>​

Javascript

//--
// window.onload is not preferred, window.addEventListener
// should be used. Except that only IE9 supports it, and
// IE8 and lower do not support it, and uses window.attachEvent
// instead, which you can test for. 
//
// I'm using window.onload here simply as a shortcut method and
// for clarity. This can also go in a script tag at the bottom
// of the body tag, in which case you can remove window.onload
// and use a self-calling anonymous function like:
//
//     (function updateLinks(){... all the same as below ...})();
//
// This will ensure you are out of the global variable scope.
//--
window.onload = function updateLinks() {
    //--
    // Modern browsers can use document.getElementsByClassName
    // or you can use a shiv script to add it to browsers that 
    // don't. I'll do it the "manual" way here, and this works
    // cross-browser. The downside is that it will interate 
    // through every A tag on the page, looking for the "small"
    // few that have the el.className we're looking for here.
    //--
    var els = document.getElementsByTagName("a"),
        l = els.length,
        trueURL = '//' + location.host + pathname,
        i, el, hash;

    for (i = 0; i < l; i++) {
        el = els[i];

        if (el.className.indexOf("enhance") != -1) {
            hash = el.href.split('#');
            el.href = trueURL + "#" + hash[1];
        }
    }
};

http://jsfiddle.net/userdude/unnH8/

将鼠标悬停在链接上以查看当前设置。与往常一样,在多个浏览器中使用真实标记进行彻底测试

于 2012-09-07T08:59:37.603 回答
1

如果你是认真的,trueURL = window.location.href那么你工作太努力了。

只需建立链接#link1- 它会自动相对于当前的 href。

如果这只是一个示例,您可能对以下内容感兴趣:

<BASE href="...">

标签。这将让您一次更改页面中所有链接的相对href。

您可以通过获取每个<A...>DOM 元素并修改href属性来使用 javascript 来实现。

于 2012-09-07T08:57:08.930 回答
1

首先,如果您尚未使用base或正在使用但可以停止使用,请阅读:

是否推荐使用<base>html 标签?

这会给你很多充分的理由三思而后行。故事的寓意:通常使用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.getElementsByClassNameIE,直到版本 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是一个有点古怪的工具,所以对它进行粗暴处理可能会导致不寻常的副作用。你被警告了

于 2012-09-10T17:35:23.150 回答
0

我会这样做

HTML

<ol>
    <li>
        <a class="build">Link1</a>
    </li>

    <li>
        <a class="build">Link2</a>
    </li>

    <li>
        <a class="build">Link2</a>
    </li>
</ol>​

Javascript/Jquery

$(function(){
    var trueURL = window.location.href;
    var i = 1;
    $('a.build').each(function(){
        $(this).attr('href', trueURL + '#link' + i);
        i = i+1;
    });
});

工作代码示例在这里

于 2012-09-07T09:01:38.990 回答