IE10从URL中删除hashtag

Question

我们正在使用非常受限制的CMS构建网站。我们唯一能做的就是操纵前端 - 在模板中玩耍，使用自定义的CSS和JS。

由于我们无法“记住”用户的选择，所以我们想出了一个解决方案，使用井号标签通过URL传递某些信息。这在Google Chrome浏览器和Mozilla Firefox浏览器中可以顺利运行，但IE10会删除哈希标签，而jQuery无法为用户自定义页面。下面是我们如何使用这件事情的一些例子：

FORM：

<form action="/name-check/#namecheckpath" method="GET" onsubmit="return checkInput(this)"> 
<input name="gle" type="hidden" value="namecheck" /> 
<input class="efInputText_front" id="company_name" name="name" type="text" value="GR4EGWERGWERGEHGUKYKUWEGWRG" /> 
<input class="efSubmitButtonFront" type="submit" value="Check availability" />&nbsp; 
</form> 

定时前往：

<a href="http://www.example.com/package-standard-print/#skipnamecheck">Choose</a> 

等等...

谷歌浏览器行为（好）：

http://www.example.com/name-check/?gle=namecheck&name=REGERGERGERGERGER#packthree 

IE10的行为（坏）：

http://www.example.com/name-check/?gle=namecheck&name=GR4EGWERGWERGEHGUKYKUWEGWERGEGERGEGRRG 

我们做什么，当我们拿起哈希：

// Find out which package we are dealing with 
var action = window.location.hash.substring(1); 
switch(action) { 
    case 'namecheckpath': 
     // Page of interest: /name-check/ 
     // Path: Home -> Name Search -> Confirm Name -> Grid -> Package page -> Extras -> Checkout 
     // What needs to be done: 
     // 1. Next page has to be grid 
        $(".stepactive2").removeClass('stepactive2').addClass('stepinactive2'); 
     $('a[href^="/buy/"]').attr('href', '/package-comparison/#gridskipnamecheck'); 
     $('form[action^="/name-check/"]').attr('action', '/name-check/#namecheckpath'); 
     // 2. Steps - remove class from second step (Package) so that the highlighting works well 
    break; 
    case 'packone': 
     // Page of interest: /name-check/ 
     // Path: Home -> Choose package (2-5) -> Name Search -> Confirm Name -> Extras -> Checkout 
     // What needs to be done: 
     // 1. Next page is the extras page for a chosen package 
        $('.stepactive2').text("Choose package"); 
        $('.stepinactive3').text("Build package");       
     $('a[href^="/buy/"]').attr('href', '/buy/self-build-flatpack/#selfbuild'); 
     $('form[action^="/name-check/"]').attr('action', '/name-check/#packone'); 
    break;  
    case 'packtwo': 
     // Page of interest: /name-check/ 
     // Path: Home -> Choose package (2-5) -> Name Search -> Confirm Name -> Extras -> Checkout 
     // What needs to be done: 
     // 1. Next page is the extras page for a chosen package 
     $('a[href^="/buy/"]').attr('href', '/buy/basic-digital/'); 
     $('form[action^="/name-check/"]').attr('action', '/name-check/#packtwo'); 
    break; 
    case 'packthree': 
     // Page of interest: /name-check/ 
     // Path: Home -> Choose package (2-5) -> Name Search -> Confirm Name -> Extras -> Checkout 
     // What needs to be done: 
     // 1. Next page is the extras page for a chosen package 
     $('a[href^="/buy/"]').attr('href', '/buy/standard-print/'); 
     $('form[action^="/name-check/"]').attr('action', '/name-check/#packthree'); 
    break;  
    case 'packfour': 
     // Page of interest: /name-check/ 
     // Path: Home -> Choose package (2-5) -> Name Search -> Confirm Name -> Extras -> Checkout 
     // What needs to be done: 
     // 1. Next page is the extras page for a chosen package 
     $('a[href^="/buy/"]').attr('href', '/buy/premium-print/'); 
     $('form[action^="/name-check/"]').attr('action', '/name-check/#packfour'); 
    break; 
    case 'packfive': 
     // Page of interest: /name-check/ 
     // Path: Home -> Choose package (2-5) -> Name Search -> Confirm Name -> Extras -> Checkout 
     // What needs to be done: 
     // 1. Next page is the extras page for a chosen package 
     $('a[href^="/buy/"]').attr('href', '/buy/all-inclusive/'); 
     $('form[action^="/name-check/"]').attr('action', '/name-check/#packfive'); 
    break; 
    case 'gridskipnamecheck': 
     // Page of interest: /package-comparison/ 
     // Path: Home -> Name Search -> Confirm Name -> Grid -> Package page -> Extras -> Checkout 
     $('a[href^="/package-"]').each(function() { 
      this.href += '#skipnamecheck'; 
     }); 
    break; 
    case 'skipnamecheck': 
     // Page of interest: /package-xxx/ 
     // Path: Home -> Name Search -> Confirm Name -> Grid -> Package page -> Extras -> Checkout 
     if(window.location.href.indexOf("package-self-build") > -1) { 
      $('a[href^="/name-check-"]').attr('href', '/buy/self-build-flatpack/#selfbuild'); 
     } else if(window.location.href.indexOf("package-basic-digital") > -1) { 
      $('a[href^="/name-check-"]').attr('href', '/buy/basic-digital/'); 
     } else if(window.location.href.indexOf("package-standard-print") > -1) { 
      $('a[href^="/name-check-"]').attr('href', '/buy/standard-print/'); 
     } else if(window.location.href.indexOf("package-premium-print") > -1) { 
      $('a[href^="/name-check-"]').attr('href', '/buy/premium-print/'); 
     } else if(window.location.href.indexOf("package-all-inclusive") > -1) { 
      $('a[href^="/name-check-"]').attr('href', '/buy/all-inclusive/'); 
     } 
    break; 
    default: 
     //console.log('default'); 
} 

问题： 为什么IE10去掉主题标签？ :(

Answer 1

解决方案是用名为“action”的窗体插入隐藏字段。

我还加入了一段jQuery代码，它从URL中提取所需的值。

// Find out what needs to be done 
var action = window.location.hash.substring(1); 

// IE specific code: pick up the GET data 
if (action == '') { 
    $.urlParam = function(name){ 
     var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); 
     if (results==null){ 
      return null; 
     } 
     else { 
      return results[1] || 0; 
     } 
    } 
    action = $.urlParam('action'); 
} 

Answer 2

实际上，我感到惊讶，这FF和铬没有剥离出来。

的URL散列（它不是一个“井号标签”）是一个纯粹的客户端功能。它通常不会被发送到服务器在所有。

浏览器从使用URL（不散列）服务器请求该文档，然后寻找一个元件具有匹配散列和滚动到它的ID。

参见例如Why the hash part of the URL is not in the server side?和类似的问题。