问题
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" />
</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? :(
回答1:
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.
回答2:
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');
}
来源：https://stackoverflow.com/questions/17650742/ie10-strips-out-hashtag-from-the-url