logo标签列表

将Javascript变量传递到<a href>标签中

javascript
69
<script language="javascript" type="text/javascript">
var scrt_var = 10; 
</script>

HTML部分：

<html>
 this is a <a href ="2.html & Key= scrt_var">Link  </a>
</html>
我只想将Javascript变量发送到链接（URL参数）。 不使用AJAX。
请正确地提出您的问题，以便您能够充分利用它。 - Vinay Pandey
8个回答
65

如果您希望它是动态的，那么在单击时使用变量的值，请执行以下操作：

<script language="javascript" type="text/javascript">
var scrt_var = 10; 
</script>
<a href="2.html" onclick="location.href=this.href+'?key='+scrt_var;return false;">Link</a>
当然，那是一种快速而粗略的解决方案。你应该真正拥有一个脚本，在DOM加载后向所有相关的元素添加一个onclick处理程序。
1
我无法使用那个变量，但我可以在地址栏中看到它。我该如何使用它？ - user3432703
嗨，我可以用一个返回字符串的函数代替变量吗？ - Mr. Robot
这个没有做任何事情。 - Ken Sharp
这是一个糟糕的建议。不要使用JavaScript去模拟锚点的自然行为，只需改变锚点的href属性为你想要的URL即可。 - Heretic Monkey
1
虽然这个答案已经有11年的历史了，而且今天的做法可能会有所不同，但我认为说它是可怕的建议并不公平。例如，如果页面上有1,000个锚点，每个锚点都依赖于一个变量，你真的会建议每次变量改变时更改1,000个href属性吗？像往常一样，上下文很重要，人们的建议很少是客观上“可怕”的。 - Blixt
28

在锚点元素上放置id属性

<a id="link2">

在页面加载事件中设置href属性：

(function() {
    var scrt_var = 10;
    var strLink = "2.html&Key=" + scrt_var;
    document.getElementById("link2").setAttribute("href",strLink);
})();
14

或者您可以直接使用document.write：

<script type="text\javascript">
var loc = "http://";
document.write('<a href="' + loc + '">Link text</a>');
</script>
1
为什么document.write被认为是“不良实践”？（在2009年也被认为是不良实践）。 - Heretic Monkey
13
<script>
   var scrt_var = 10;
   document.getElementById("link").setAttribute("href",scrt_var);
</script>
<a id="link">this is a link</a>
我认为应该是类似于setAttribute("href", "2.html & Key=" + scrt_var)来形成完整的链接。 - Kylotan
那个东西确实有效，谢谢你提供的简短而简单的技巧 :) @erenon - Faizan
@erenon 这段代码有没有办法添加 target_new 以在新标签页中打开？谢谢。 - Andrew
1
@Andrew：在之前类似的调用后面链接 .setAttribute("target", "new")。但请注意，弹出窗口并不受欢迎。 - erenon
谢谢！那个有效。在新标签页中打开被认为是弹出窗口吗？我同意，我不喜欢在新浏览器窗口中出现的广告弹出窗口，但当两个页面在不同的标签页中时，我发现比较它们或返回到一个页面更容易。 - Andrew
@Andrew 如果你省略 target=_new，用户可以通过控制点击或右键单击来打开新窗口或标签页。如果你使用 target=_new，用户无法避免打开新窗口或标签页。最好给用户选择的机会，而不是强迫他们按照你想要的方式去做。 - Teepeemm
9
<html>

<script language="javascript" type="text/javascript">
var scrt_var = 10; 
openPage = function() {
location.href = "2.html?Key="+scrt_var;
}
</script>

 this is a <a href ="javascript:openPage()">Link  </a>
</html>
0

你也可以使用 Express 框架

app.get("/:id",function(req,res)
{
  var id = req.params.id;
  res.render("home.ejs",{identity : id});
});

Express文件，从node.js接收JS变量identity。 <a href = "/any_route/<%=identity%>将identity JS变量包含在您的href中，无需麻烦输入。
检查一下你的答案代码。我已经修复了代码，但是还有些东西缺失。 - Gander
问题显示变量在客户端JS中。他们不能在那里使用Express。 - Quentin
-1

JavaScript 代码：

<script>

    function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

var user = getUrlVars()["user"];
var pass = getUrlVars()["pass"];
var sub  = getUrlVars()["sub"];
</script>

<script>
    var myApp = angular.module('myApp',[]);

myApp.controller('dropdownCtrl', ['$scope','$window','$http', function($scope, $window, $http) {

 $http.get('http://dummy.com/app/chapter.php?user='+user+'&pass='+pass)

     .then(function (response) {$scope.names = response.data.admin;});
    $scope.names = [];

        $http.get('http://dummy.com/app/chapter.php?user='+user+'&pass='+pass+'&sub='+sub)

            .then(function (response) {$scope.chapter = response.data.chp;});
           $scope.chapter = [];

};


}]);
    </script>

HTML：

<div ng-controller="dropdownCtrl">
<div ng-repeat="a in chapter">
<a href="topic.html?ch={{a.chapter}}" onClick="location.href=this.href+'&user='+user+'&pass='+pass+'&sub='+sub;return false;">{{a.chapter}}</a>
</div>
这似乎是一种过于复杂的方法...而且至少有一个外部依赖项，你没有解释如何加载它。 - Quentin
-1

如果您使用国际化（i18n），并切换到另一种语言，例如在URL的末尾添加类似于?locale=fr或?fr的内容。但是，当您在单击事件上转到另一页时，翻译切换可能不稳定。

对于这种情况，必须生成一个DOM单击事件处理程序函数，通过将开关状态存储为变量并将其添加到所有a标签的尾部来处理所有a.href属性。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接