单击图像将变量传递到URL-JavaScript

Question

当单击也使用登录表单链接到登录页面的图像时，我想传递我的用户名。 单击图像将用户重定向到登录页面，并在用户名字段中自动放置通过URL传递到那里的用户名，因此用户仅需输入密码并单击按钮即可登录。

我在想也许是这样的：

<script language="javascript" type="text/javascript">
var scrt_var = {{contact.username}} 
</script>

<a href="https://{{contact.image_bank_url}}" onclick="location.href=this.href+'?key='+scrt_var;return false;"><img src="http://image.png"></a>

这是我在登录表单中的用户名字段：

<input id="id_username" name="username" type="text">

可能还有其他方法吗？

Answer 1

您可以将用户名设置为参数：例如?username={{contact.username}}

<a href="https://{{contact.image_bank_url}}" onclick="location.href=this.href+'?username='+scrt_var;return false;">

  <img src="http://image.png">

</a>

然后在登录页面上读取它（该函数取自“ 如何在JavaScript中获取查询字符串值？

document.getElementById("id_username").value = getParameterByName("username")

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

Answer 2

我个人会使用哈希。 请参阅以下问题，以了解如何读取哈希：

如何使用JavaScript检查URL中的＃哈希？

您不必使用正则表达式。 您不必进行任何复杂的链接。 只需在登录页面的链接中添加＃符号即可。 在＃之后，填写您要用于填充字段的用户名。 然后使用jQuery将哈希值提取出来并放入输入字段中。

var username = window.location.hash;
$usernameInput.val(username);

编辑以获取进一步的说明。

假设我在网站http：//thisismysite.com#thisismyhash

在javascript中，如果我输入

console.log(window.location.hash);

我的控制台将显示

"thisismyhash"

我建议您使用此功能从第1页携带用户名，在该页面中，用户单击链接可转到登录页面，然后转到第2页。到达第2页后，从has中提取用户名并将其输入您的输入中领域。