将 Javascript 变量传递给 <a href >答案

【问题标题】：Passing Javascript variable to <a href >将 Javascript 变量传递给 <a href >
【发布时间】：2009-06-10 11:32:13
【问题描述】：

<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

【问题讨论】：

请正确构想您的问题，以便充分利用它

标签： javascript

【解决方案1】：

如果希望它是动态的，以便使用点击时变量的值，请执行以下操作：

<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 处理程序到所有相关的<a> 元素。

【讨论】：

我无法使用该变量，但我可以在地址栏中看到它。我该如何使用它？
嗨。我可以使用返回字符串的函数代替变量吗？
这没有任何作用。
这是一个可怕的建议；不要使用 JavaScript 来做锚自然会做的事情；只需将锚点的href 属性更改为您想要的URL。
虽然这个答案已有 11 年历史，而且今天的情况通常会有所不同，但我认为说这是一个糟糕的建议是不公平的。例如，如果您在页面上有 1,000 个锚点，并且每个锚点都依赖于一个变量，那么您真的建议在每次变量更改时更改 1,000 个 href 属性吗？与往常一样，背景很重要，人们的建议在客观上很少是“可怕的”。

【解决方案2】：

将id属性放在锚元素上

<a id="link2">

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

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

【讨论】：

【解决方案3】：

您也可以只使用 document.write：

<script type="text\javascript">
var loc = "http://";
document.write('<a href="' + loc + '">Link text</a>');
</script>

【讨论】：

Why is document.write considered a "bad practice"?（在 09 年也被认为是不好的做法）。

【解决方案4】：

<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) 来形成完整的链接。
是的，这很有效，感谢您的简短技巧:) @erenon
@erenon 有没有办法将 target_new 添加到此代码中以在新选项卡中打开？谢谢。
@Andrew: .setAttribute("target", "new") 链接在之前的类似调用之后。但是，请注意弹出窗口是相当不受欢迎的。
谢谢！那行得通。在新选项卡中打开被视为弹出窗口？我同意我不喜欢在新浏览器窗口中显示的广告弹出窗口，但我发现比较两个页面或在两个页面位于不同选项卡时返回一个页面更容易。

【解决方案5】：

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

【讨论】：

【解决方案6】：

您也可以使用 express 框架

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

Express文件，从node.js接收一个JS变量标识

<a href = "/any_route/<%=identity%> 将身份 JS 变量包含到您的 href 中，无需麻烦输入

【讨论】：

检查您的答案代码。我已经修复了代码，但还是缺少了一些东西。

【解决方案7】：

如果您使用国际化 (i18n)，并且在切换到另一种语言后，可能会在 url 的末尾添加 ?locale=fr 或 ?fr 之类的内容。但是当你点击事件转到另一个页面时，翻译开关不会稳定。

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

【讨论】：

【解决方案8】：

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>

【讨论】：