如何在HTML链接中使用JavaScript变量

时间：2012-09-07 08:52:38

标签： javascript html tags

我正在处理的网站的<base>标记指向与网站不同的网址。我想做的是绕过<base>标签，使用trueURL bellow找到网页的网址，因为我需要它来构建一些内部锚点，因为我需要网站的实际网址，所以内部锚点正常工作。

我遇到的问题是我不知道我应该如何使用我存储在我的trueURL变量中的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 个答案:

答案 0 :(得分：2)

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

这将做的是......

  1. 在window加载事件上运行一个将...
    2. 的函数
  2. 查找DOM中A标记的所有元素，以及......
  3. 遍历那些找到的A代码并检查该元素是否有enhance类，如果是的话......
  4. 将href拆分为#以获取当前a元素的hash值，我们将...

  5. 将其与以下内容合并：

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

    在没有hash或查询字符串的情况下向我们提供当前页面的网址。如果您想要查询字符串（URL中?之后的内容），请添加location.search：

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

    6. 注意，//部分是协议相对的，因此它将使用base href的协议，例如http或https。但是，您可能想要指定它。

    <强>标记

    请注意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/

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

答案 1 :(得分：1)

如果你认真对待trueURL = window.location.href那么你就是在努力工作。

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

如果这只是一个例子，您可能会对以下内容感兴趣：

<BASE href="...">

标签。这样您就可以一次更改页面中所有链接的相对href。

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

答案 2 :(得分：1)

首先，如果您尚未使用base或者可以暂时不使用它，请阅读：

Is it recommended to use the <base> html tag?

这会给你很多理由三思而后行。故事的道德：使用base通常是个坏主意。有充分的理由，它很有用;在与设计师合作获得我可以使用的标记的本地副本但仍然保持与网站资产的连接时，我已经多次使用它非常高兴。但对于生产基地来说，它太聪明了一半。

此外，这个答案最初是为一个完全重复的different question编写的，所以我在这里发布这个，尽管有一个非常类似的答案。

您是否可以控制标记，或者您是否可以使用选择器来获取您想要生效的元素？你可以：

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，在版本9之前，IE不支持Method for selecting elements in Sizzle using fully-qualified URLs。如果您必须支持低于IE9的版本，请参阅Jeremy J Starcher的答案，以提高效率，但更好支持的方法。还有document.querySelectorAll，IE8及更高版本以及所有其他主流浏览器都支持它。如果您只需要支持IE8，我建议您使用此选项来选择Jeremy演示的方法链接。

我也会将更改延迟五秒钟，以便您可以看到它的工作原理。显然，这对你来说是不必要的（最有可能）。

我现在唯一不确定的是我的.replace()是否始终会在所有浏览器中找到要替换的base.href，因此最好检测是否存在在进行替换之前相对url，所以你可以做任何其他适当的事情。有关此可能“问题”的相关背景信息，请参阅我的问题，该问题涉及浏览器在DOM中处理href属性的方式不同：

{{3}}

此外，如果它在内容之后或script标记的末尾属于内联body标记，则可能最无缝地工作，在这种情况下，您将要删除{ {1}}部分并替换为自执行功能。

他们是其他选择，所有可能都有点问题：

  • 完全吹掉window.addEventListener标签。但是，如果你这样做，你首先要检查是否需要手动将base内容插入链接中，否则我确定事情会破裂或变脆。
  • 为要使用真实链接的base.href链接添加一个事件监听器，并以a的方式对其进行操作，只需在点击结束时忘记onclick处理函数，所以浏览器不遵循链接。这可能是最无缝的方法，但可能并非最适合所有情况。
  • 可能是其他人。

请务必使用真实世界标记进行测试。 return false是一个有点古怪的工具，因此对其进行粗暴操作可能会导致不寻常的副作用。 你被警告了。

答案 3 :(得分：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;
    });
});

工作代码Here

的示例
相关问题
最新问题