0

语境

我正在做一个临时项目，在谷歌网站上有一个登录页面。我正在使用 forkphorus，以便我可以操纵用户名块的输出。我在我的临时项目中构建了一个脚本，它将用户名字符串（由 URL 参数指定）分离成变量（实际上是列表，但我不想使事情过于复杂）。我不会详细介绍，但假设用户名字符串是这样的：
username%3Ahello%20password%3Aworld
项目中的一个脚本会将 URL 编码的文本解码为：
username:hello password:world
然后用户名将设置为 hello，密码设置为 world。

问题

但是，我希望它可以与嵌入在我的谷歌网站上的 HTML 表单一起使用。当我使用下面的代码时，它会将我带到这个 URL 1，而我想去这个 URL 2。

网址

1 https://forkphorus.github.io/app.html?uname=hello&pword=world
2https://forkphorus.github.io/app.html?id=myprojectid&username=uname%3Ahello%20pword%3Aworld 

<!DOCTYPE html>
<html>
<body>

<form action="https://forkphorus.github.io/app.html?id=myprojectid">

<label for="uname">Username:</label><br>
<input type="text" id="uname" name="uname" value="hello"><br>
<label for="pword">Password:</label><br>
<input type="password" id="pword" name="pword" value="world"><br><br>
<input type="submit" value="Log in">

</form> 

</body>
</html>

我的问题

如何通过在表单中​​输入适当的值来更改/添加到我的代码以访问我想要的 URL？
4

1 回答 1

0

您可以添加自定义表单提交逻辑（Stackoverflow CORS 策略将阻止提交操作执行任何操作，但它应该可以在其他任何地方工作）：

document.querySelector(".info-form").addEventListener("submit", (event) => {
  event.stopPropagation();

  const username = encodeURIComponent(document.querySelector("#uname").value);
  const password = encodeURIComponent(document.querySelector("#pword").value);
  location.href = `https://forkphorus.github.io/app.html?id=myprojectid&username=${username}%3Ahello%20pword%3A${password}`;
});
<form class="info-form" action="#">

  <label for="uname">Username:</label><br>
  <input type="text" id="uname" value="hello" required><br>
  <label for="pword">Password:</label><br>
  <input type="password" id="pword" value="world" required><br><br>
  <input type="submit" value="Log in">

</form>

于 2020-08-19T03:26:46.433 回答