jquery - IE10 从 URL 中删除主题标签

Question

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

由于我们无法“记住”用户的选择，因此我们提出了一个解决方案，即使用主题标签通过 URL 传递某些信息。这在 Google Chrome 和 Mozilla Firefox 浏览器上运行顺利，但 IE10 删除了主题标签，并且 jQuery 无法为用户自定义页面。以下是我们如何使用这个东西的一些示例:

表格:

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

等等...

Google Chrome 浏览器行为(良好):

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

我真的很惊讶 FF 和 Chrome 没有将其删除。

URL 哈希(不是“标签”)纯粹是客户端功能。它通常根本不会发送到服务器。

浏览器使用 URL(不带哈希值)从服务器请求文档，然后查找 ID 与哈希值匹配的元素并滚动到该元素。

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