IE10 strips out hashtag from the URL

Question

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? :(

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

I'm actually surprised, that FF and Chrome don't strip it out.

The URL hash (it's not a "hashtag") is purely a client side feature. It's normally not sent to the server at all.

The browser requests the document from the server using the URL (without the hash) and then looks for an element with an ID matching the hash and scrolls to it.

See e.g. Why the hash part of the URL is not in the server side? and similar questions.

edited May 23 '17 at 10:29

Community

1
1

answered Jul 15 '13 at 11:08

RoToRa

37,635
12
69
105

You do not seem to understand what we actually do with the those hashes. I am completely aware that the hash is purely a client side feature. I have added some more code... Please have a look... – chuckfinley Jul 15 '13 at 11:29

score 0 · Accepted Answer · answered Oct 09 '13 at 15:45

The solution was to insert a hidden field to the form with with the name "action".

I have also included a piece of jQuery code that picks up the required value from the 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');
}

IE10 strips out hashtag from the URL

2 Answers2

Linked