Ошибка в IE при использовании Javascript для изменения действия формы, когда method = get и URL содержат хеш

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, но без # hello в URL.

Это происходит независимо от того, использую я jquery илитолько javascript, пробовал каждое из следующих:

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

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

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

Любые предложения (предположим, что я должен сохранить метод как «get», и что я должен использовать хеш в URL, и что я должениспользовать Javascript для динамического изменения этого действия)?

Answer 1

Тестирование самостоятельно в IE8 показывает, что он настаивает на том, чтобы хеш (#hello) следовал после строки запроса (?foo=bar) в URL. К сожалению, ваша форма не делает этого за вас, и нет никакого способа заставить ее сделать это при отправке формы.

Попробуйте вместо этого кодировать хэш в виде:

<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>

Answer 2

Я считаю, что IE просто ведет себя по-разному с хешем, и я не думаю, что он предназначен для использования в этом поместье.

Никакой javascript в следующем не даст таких же результатов ... отображается в FF, а не в IE

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

По крайней мере, вы знаете, что это не проблема JavaScript. Я солгал насчет вопросительного знака LOL OOPS.

Answer 3

В итоге мы решили, что можем просто обновить window.location.href, чтобы перейти на новое место, а не отправлять форму.Это может показаться странным ответом, но на самом деле то, как мы обрабатывали нашу форму, означало, что это не проблема.то есть мы отключали все поля формы (следовательно, к URL-адресу обычно не добавлялась строка запроса), затем генерировали один из нескольких различных URL-адресов в стиле SEO на основе содержимого полей формы, затем обновляли действие формы и отправляли форму.Так что теперь мы делаем все это, но не отправляем форму, просто изменим местоположение страницы.