單擊圖像將變量傳遞到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中提取用戶名並將其輸入您的輸入中領域。