重定向到外部 Javascript 函数中的 URL 不起作用

Posted 2023-02-22

【中文标题】重定向到外部 Javascript 函数中的 URL 不起作用

【英文标题】：Redirecting to URL in external Javascript function not working

【发布时间】：2016-05-05 22:50:15

【问题描述】：

我目前正在尝试编写一个相对简单的网站，但我的 html 和 javascript 技能非常基础。基本上，我要做的是创建一个页面，在该页面中向用户询问他们通过将其键入表单来回答的问题。使用外部 Javascript 函数，将用户的答案与正确的答案进行比较，如果它们相同，则应该将用户重定向到不同的站点。 这是我的 HTML 文档中的表单：

<FORM NAME="myform" ACTION="" METHOD="GET"> Answer:
    <INPUT TYPE="text" NAME="inputbox" VALUE="">
    <button onClick="checkAnswerExact(this.form)"> Submit </button> 
</FORM>

我的 Javascript 函数如下所示：

function checkAnswerExact(form) 
  //GET ANSWER
  var x = form.inputbox.value;
  //CONVERT ANSWER TO STRING
  var TestAnsw =x.toString();
  //DEFINE RIGHT ANSWER
  var RightAnsw = "rightanswer";
  //CHECK IF THEY ARE THE SAME
  if (TestAnsw.toLowerCase() == RightAnsw.toLowerCase() ) 
    alert("The answer is right.");
    window.location.href = 'https://www.reddit.com/';
   //WHAT TO DO IF ANSWER'S RIGHT
  else 
    alert("The answer is wrong.");
   //WHAT TO DO IF ANSWER'S WRONG  

作为将其重定向到的示例站点，我选择了 reddit。警报正常工作，因此字符串的比较没问题。我已经在谷歌上搜索了一段时间，并阅读了一堆论坛，但似乎没有什么对我有用。我在 if-else 语句内部和外部都尝试过document.location=url 和window.replace(url)，但似乎没有任何效果，窗口只会重新加载。有效的是window.open(url)，但我不希望它在新标签中打开。我正在使用 Chrome 作为我的浏览器，如果相关的话。

我很想得到一些帮助，我已经研究了几个小时，我很确定这可能是我犯的一些我看不到的错误。 干杯！

【问题讨论】：

您在 F12 控制台中是否收到任何错误消息？

【参考方案1】：

好的，我只是找出您的代码的问题。使用您的按钮在 onClick 事件上添加 return false。所以你的代码会变成

<button onClick="checkAnswerExact(this.form); return false;"> Submit </button>

也要改变

 window.location.href = 'https://www.reddit.com/';

到

 window.location = 'https://www.reddit.com/';

【参考方案2】：

这应该可以解决问题。

<INPUT TYPE="text" id="inputbox" NAME="inputbox" VALUE="">
<button id="myButton">Submit</button>

<script type="text/javascript">
   document.getElementById("myButton").onclick = function () 
       var TestAnsw =document.getElementById("inputbox").value;
       //DEFINE RIGHT ANSWER
       var RightAnsw = "rightanswer";
       //CHECK IF THEY ARE THE SAME
       if (TestAnsw.toLowerCase() == RightAnsw.toLowerCase() )
          alert("The answer is right.");
          location.href = "https://www.reddit.com/" 
      //WHAT TO DO IF ANSWER'S RIGHT
      else
      alert("The answer is wrong."); //WHAT TO DO IF ANSWER'S WRONG

    
;
</script>

【讨论】：

我试过了，现在它甚至不显示警报。 ://

我在您的按钮和输入标签上添加了 ID。确保你的也有这些 id

【参考方案3】：

按照in this question的建议，你需要用“_self”调用函数：

window.open("https://www.reddit.com/", "_self");

这表示它必须在同一个标​​签中打开，而不是打开一个新标签。与在a 元素中设置target 相同。

【讨论】：

感谢您的回答 :) 我试过这个，但它只是再次重新加载我的初始站点：/

我想我知道为什么了，让我做一些改变

我相信您的表单是通过默认表单提交行为提交的。在执行您想要的操作之前，您应该阻止提交表单。在 *** 中搜索 event.preventDefault();。希望对您有所帮助。

【参考方案4】：

您的按钮是一个提交按钮（如果您没有指定类型，这是默认按钮），因此如果您按下该按钮（并且在执行 onclick 处理程序之后），浏览器会为您的表单发送一个 GET 请求。 只需将您的按钮定义更改为

<button type="button" onClick="checkAnswerExact(this.form)"> Submit </button>

它应该可以工作。