如何在 HTML 链接中使用 JavaScript 变量 [英] How to use JavaScript variable in an HTML link

查看：24
本文介绍了如何在 HTML 链接中使用 JavaScript 变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在处理的网站有一个 <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

解决方案

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

这会做的是......

  1. 在 window 加载事件中运行一个函数，该函数将...
  2. 在 DOM 中找到每个 A 标签的元素，然后...
  3. 遍历找到的A标签，检查元素是否有enhance类，如果有的话...
  4. 在 # 处拆分 href 以获得当前 a 元素的 href 值，我们将这样做...

  5. 将其与以下内容结合:

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

    给我们当前页面的 URL，不带 hash 或查询字符串.如果您想要查询字符串(URL 中 ? 之后的内容)，请添加 location.search:

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

注意，// 部分是协议相关的，所以它会使用 base href 的任何协议，例如 http 或 https.但是，您可能需要指定.

标记

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

    <li><a href="#link1">链接 1</a>-无增强类，应服从<strong>BASE HREF</strong>:<strong class="p">&raquo;http://example.com#link1</strong></li><li><a href="#link2" class="enhance">链接 2</a>-有增强类，应该是:<strong class="p">&raquo;http://fiddle.jshell.net/_display/#link2</strong></li><li><a href="#link3" class="enhance">链接 3</a>-有增强类，应该是:<strong class="p">&raquo;http://fiddle.jshell.net/_display/#link3</strong></li><li><a href="#link3" class="enhance">链接 4</a>-有增强类，应该是:<strong class="p">&raquo;http://fiddle.jshell.net/_display/#link4</strong></li></ol>

Javascript

//--//window.onload 不是首选，window.addEventListener//应该使用.除了只有 IE9 支持，而且//IE8及以下不支持，使用window.attachEvent//相反，您可以对其进行测试.////我在这里使用 window.onload 只是作为一种快捷方式，并且//为了清楚起见.这也可以放在底部的脚本标签中//body 标签，在这种情况下你可以删除 window.onload//并使用一个自调用匿名函数，例如:////(function updateLinks(){... 和下面一样...})();////这将确保您不在全局变量范围内.//--window.onload = 函数 updateLinks() {//--//现代浏览器可以使用 document.getElementsByClassName//或者您可以使用 shiv 脚本将其添加到浏览器//别.我将在这里以手动"方式进行操作，这很有效//跨浏览器.缺点是会交互//通过页面上的每个 A 标签，寻找小"//很少有我们在这里寻找的 el.className.//--var els = document.getElementsByTagName("a"),l = els.length,trueURL = '//' + location.host + 路径名，我，埃尔，哈希；对于 (i = 0; i < l; i++) {埃尔=埃尔斯[i]；if (el.className.indexOf("enhance") != -1) {hash = el.href.split('#');el.href = trueURL + "#" + hash[1];}}};

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

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

The website that I am working on has a <base> tag point to a different URL than the one that the website has. What I would like to do is get around the <base> tag by using the trueURL bellow to find the url of the webpage, because i need it to construct some internal anchors, because i need the actual url of the website so the internal anchors work correctly.

The issue that im having is that i don't know how i should use the url that i store in my trueURL variable. Is it possible to use it and then add extra extensions to the url to get it to point to my anchors? Below is a rough example of what I would like to be able to do

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>

Therefore in the end i would like to have a link that looks like trueURL#link3.

Thanks in advance,

:D :D

解决方案

I am working on the assumption that your real case is more complex than your example. If it isn't, then review the other answers, which may be more appropriate for what you need to do.

What this will do is...

  1. Run on the window load event a function that will...
  2. Find every element in the DOM that is an A tag, and...
  3. Loop through those found A tags and check if the element has an enhance class, and if so...
  4. Split the href at the # to get the current a element's hash value, which we will...

  5. Combine it with the following:

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

    Giving us the current page's URL without a hash or query string. If you want the query string (what's after the ? in a URL), add location.search:

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

Note, the // part is protocol relative, so it will use whatever the base href's protocol is, e.g., http or https. You may want to specify that, however.

Markup

Note the class attribute, which we will use to identify which a tags to manipulate.

<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/

Mouseover the links to see the current setting. As always, thoroughly test with real markup in multiple browsers.

这篇关于如何在 HTML 链接中使用 JavaScript 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆