如何在href中传递变量？

Question

我正在尝试在 href="" 中添加另一个变量。

<a href="a.html" id="a">Hello</a>

以下是我的代码。

我想在跳转到a.html页面时，将值为“apple”的变量命名为“fruit”传递。 我应该如何使用JavaScript或jQuery实现？

- 임지웅

---

当访问a.html时，您是什么意思？ - Mohammad

您可以使用JavaScript将href值从a.html更改为a.html?fruit=apple。 - domsson

@Mohammad 嗯...你说的是什么意思，当访问a.html时？当我点击hello时，它会跳转到a.html。 - 임지웅

Answer 1

JS之间（容易）通信的唯一方式是在链接上创建参数。例如：

<a href="a.html?fruit=apple" id="a">Hello</a>

在接收页面中，获取该参数数据。如果您想要通过纯JS将数据嵌入链接，可以使用类似以下内容的代码使用jQuery库附加到HREF：

$("a").attr("href", '?fruit=' + 'apple');

- Zitzabis

Answer 2

只需在您的主页上执行以下操作：

<a href="a.html?fruit=apple" id="a">Hello</a>

And on a.html, add this code:

function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

    var fruit = getParameterByName('fruit');

<a href="a.html?fruit=apple" id="a">Hello</a>

- Jack Bashford

---

谢谢你的精彩回答。 - masiboo

没问题，@masiboo - Jack Bashford

也许有关于对齐的另一个问题 @ https://stackoverflow.com/questions/60469800/how-to-align-left-navbar-react-bootstrap 你知道怎么做吗？ - masiboo

抱歉，我不知道 @masiboo 是什么意思。 - Jack Bashford

Answer 3

你可以通过将现有值与新值连接起来来重置href的值：

var el = document.getElementById('a');
el.href += '?fruit=apple';
console.log(el.href);

<a href="a.html" id="a">Hello</a>

- Giulio Bambini

---

谢谢您的回答。也许关于对齐还有另一个问题@https://stackoverflow.com/questions/60469800/how-to-align-left-navbar-react-bootstrap 您知道怎么做吗？ - masiboo

太好了，但是你知道如何实际访问该参数吗？ - avisk

Answer 4

根据我的理解，您想要在打开新页面时向锚点标签URL添加查询参数fruit=apple。因此，您需要使用window.open()来打开新页面。

document.getElementById("a").onclick = function(e){
  e.preventDefault();
  window.open(this.href+"?fruit=apple", '_blank');
}

<a href="a.html" id="a">Hello</a>

由于代码片段中无法打开新标签页，请在jsfiddle中检查。

- Mohammad

---

谢谢你的回答。也许还有一个关于对齐的问题，链接在 https://stackoverflow.com/questions/60469800/how-to-align-left-navbar-react-bootstrap 你知道怎么做吗？ - masiboo

Answer 5

我们需要一种访问HTML参数的方法。

我不认为在HTML中有这样的可能性。然而，有很多JavaScript方法可供选择。

例如：

function getUrlVars() { 
var vars = {}; 
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { 
   vars[key] = value; 
});
return vars; 

}

你可以这样调用这个函数：

var fruit = getUrlVars()["fruit"];
console.log(fruit);
//Apple

你的 href 中的 URL 将会是这样的：

a.html?fruit=Apple

然而这是硬编码的，如果你想要一些好的动态效果，可以使用angularJS来创建。

来源

- MetalSlugSnk

---

谢谢你的回答。也许还有一个关于对齐的问题，链接在 https://stackoverflow.com/questions/60469800/how-to-align-left-navbar-react-bootstrap 你知道怎么做吗？ - masiboo