基于值的重定向 URL 并不总是有效答案

【问题标题】：Redirect URL based on a value does not always work基于值的重定向 URL 并不总是有效
【发布时间】：2020-11-01 15:53:21
【问题描述】：

我是 JavaScript 的新手，我编写了一个代码，根据用户在搜索栏中输入的内容将用户重定向到另一个页面。

奇怪的是，它有时有效有时无效（一半一半），有人可能知道是什么原因造成的？

我的 HTML

<form class="form-inline my-2 my-lg-0">
    <input id="inputName" class="form-control mr-sm-2" type="search"
           placeholder="Search">
    <button id="searchBtn" class="btn btn-outline-success my-2 my-sm-0" onclick="searchUser()" type="button">
        Search
    </button>
</form>

我的 javascript

function searchUser() {
    window.open("/user/" + String(document.getElementById('inputName').value));
}

更新：感谢您指出双重身份，我已经删除了多余的身份，但问题仍然存在。

它可能发生在所有字符串上，例如“hsy”，它有时有效，有时无效。

当从 URL http://127.0.0.1:8000/user/hsy 搜索时，如果它不起作用，则 URL 将显示为 http://127.0.0.1:8000/user/hsy?，并在 URL 的末尾附加一个问号。

【问题讨论】：

您为 <input> 元素设置了 2 个 ID。
你能提供一个它不起作用的示例输入吗？
HTMLInputElement#value 已经是一个字符串。无需将其转换为 String 对象，只需将其连接到原始字符串即可。你只是在白白做额外的工作XD
哦，是的..您没有什么可以阻止表单执行其default 提交表单的行为。没有action 属性，它提交到当前URL，没有method 属性，它默认为GET。而且由于您的表单元素上没有name 属性，因此整个查询只是...?。 <button type="button"> 将是解决该问题的一种方法，尽管在不使用任何类似表单的行为时使用 <form> 有点奇怪。
@topsoftwarepro 您好，很抱歉您的回答不正确，真正的原因是我将表单与js混合。 window.location.replace() 似乎不是原因:(

标签： javascript url redirect

【解决方案1】：

它不适用于window.open()，因为如果您阅读控制台，它会显示：“在新窗口中打开'stacksn-ps.net/user/vfd'被阻止，因为请求是在未设置“允许弹出窗口”权限的沙盒框架。window.open() 如果不在堆栈片段中，则可以正常工作。”。因为您使用 StackSnippets 或类似的框架来重定向。如果你想使用它...

使用...

window.location.replace()

而不是...

window.open()

function searchUser() {
    window.location.replace("/user/" + document.getElementById('inputName').value);
}

<form class="form-inline my-2 my-lg-0">
    <input id="inputName" class="form-control mr-sm-2" id="base_layout_user_search" type="search"
           placeholder="Search">
    <button id="searchBtn" class="btn btn-outline-success my-2 my-sm-0" onclick="searchUser()" type="button">
        Search
    </button>
</form>

【讨论】：

谢谢，介意解释一下原因吗？他们似乎在这个问题上没有太大区别:(stackoverflow.com/questions/1865837/…
这里不起作用，因为在新窗口中阻止打开“stacksn-ps.net/user/vfd”，因为请求是在“允许弹出窗口”的沙盒框架中发出的未设置权限。如果 window.open() 不在 Stack Snippet 中，则可以正常工作。

【解决方案2】：

感谢@Niet the Dark Absol，他的想法是事实。

我不应该将表单与输入混为一谈。通过删除表单属性，它可以正常工作。

非常感谢各位。

【讨论】：