当使用JavaScript更改表单操作时，在方法为“get”且URL包含哈希值时，IE存在错误。

Question

我正在使用Javascript来更改表单的URL，当您提交表单时。如果该URL包含一个哈希字符串(#)，那么Internet Explorer会忽略它，并只提交到该html部分之前。Firefox和Chrome则没有问题。

演示：

<script type="text/javascript">
function changeURL() {
    var myform = document.getElementById('myform');

    myform.setAttribute("action", "page2.html#hello"); 

    return false;
}
</script>

<form id="myform" action="page1.html" method="get" onsubmit="changeURL()">
    <input type="submit">
</form>

如果我将方法更改为“post”，那么就没问题了。如果我使用“get”，那么IE会跳转到page2.html页面，但URL中没有#hello。

这种情况发生的原因不论是我使用jquery还是只用javascript，都尝试过以下每个方法：

myform.action = "page2.html#hello";

myform.attr("action", "page2.html#hello");

myform.get(0).setAttribute("action", "page2.html#hello"); 

任何建议（假设我必须将方法保留为“get”，并且必须在URL中使用哈希，在JavaScript中动态更改此操作）？

- duncan

---

get查询字符串不应该放在URL的哈希之前吗？如果是这样，我能想到的第一个解决方案是把哈希值放在一个隐藏的表单字段中，以便在查询字符串中传递它，然后在另一端使用JavaScript将其转换回哈希。 - Blazemonger

@duncan 如果您使用GET提交，则会创建一个查询字符串。 - Blazemonger

Answer 1

在IE8中进行个人测试后，发现它坚持要求URL中的哈希（#hello）在查询字符串（?foo=bar）之后。不幸的是，您的表单没有为您完成这项工作，并且在提交表单时也没有强制执行此操作。请尝试在表单中对哈希进行编码。

<script type="text/javascript">
function changeURL() {
    var hidden = document.createElement('input');
    hidden.setAttribute("type", "hidden"); 
    hidden.setAttribute("name", "hash"); 
    hidden.setAttribute("value", "hello"); 
    var myform = document.getElementById('myform');
    myform.setAttribute("action", "page2.html"); 
    myform.appendChild(hidden); 
    // return false;
}
</script>
<form id="myform" action="page1.html" method="get" onsubmit="changeURL()">
    <input type="submit">
</form>

在page2.html的顶部将其提取出来：

<script type="text/javascript">
var qs = window.location.search.substring(1);
var qsarr = qs.split("&");
for (var i=0; i<qsarr.length; i++) {
    var tarr = qsarr[i].split("=");
    if (tarr[0]==="hash") {
        window.location.hash = tarr[1];
    }
}
</script>

- Blazemonger

Answer 2

我认为IE在处理哈希时的行为不同，我不认为它应该以这种方式使用。

以下代码中没有JavaScript将产生相同的结果...在Firefox中显示而在IE中不显示。

<form action="#test" method="get">
    <input type="text" value="test" />
    <input type="submit" />
</form>

至少你知道这不是一个 JavaScript 问题。我撒了个谎，关于问号的部分，呃。

- Craig

Answer 3

最终我们决定可以直接更新window.location.href以前往新位置，而不是提交表单。这可能看起来像一个奇怪的答案，但实际上我们处理表单的方式意味着这并不是一个问题。也就是说，我们禁用了所有的表单字段（因此通常不会附加查询字符串到URL中），然后根据表单字段包含的内容生成几个不同的SEO友好样式的URL之一，然后更新表单操作并提交表单。所以现在我们做到了所有这些，但不必提交表单，只需更改页面位置即可。

- duncan