2

we are building a website using a very restricted CMS. The only thing we can do is to manipulate the front end - play around with the template, use custom css and js.

Since we cannot "memorise" user's choices, we came up with a solution to pass certain information via the URL using hashtags. This works smoothly on Google Chrome and Mozilla Firefox browsers but IE10 strips out the hashtag and jQuery fails to customize the page for the user. Here are some examples on how we use this thing:

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>

REGULAR LINKS:

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

And so on...

Google Chrome behaviour (good):

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

IE10 behaviour (bad):

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

What we do when we pick up the hash:

// 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');
}

QUESTION: Why does IE10 strip out the hashtags? :(

4

2 回答 2

0

我真的很惊讶，FF 和 Chrome 并没有把它去掉。

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

浏览器使用 URL（不带散列）从服务器请求文档，然后查找 ID 与散列匹配的元素并滚动到它。

参见例如为什么 URL 的哈希部分不在服务器端？和类似的问题。

于 2013-07-15T11:08:10.683 回答
0

解决方案是在表单中插入一个名为“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');
}
于 2013-10-09T15:45:19.700 回答