I use PJAX to change pages on my site and for every new page I send a Response Header
with a new a Page-Title
header. This header contains can contain åäö, and IE outputs this incorrectly. In IE's Developer Tools I can see the Page-Title
response without problem, but when I use document.title = ...
to update the title it displays wrong.
My response header looks like this:
Page-Title: Mårtensson
UTF8 is confirmed, I can see Content-Type: text/html; chartset=UTF-8
in both IE's and Chrome's Dev Tools.
This is how I update the title:
$.ajax({
url: State.url,
type: 'get',
beforeSend: function(xhr){
xhr.setRequestHeader('X-PJAX', true);
},
success: function(resp, status, xhr) {
document.title = xhr.getResponseHeader('Page-Title');
// other code
}
});
This works in Chrome but in IE it outputs as MÃ¥rtensson
. If I use decodeURIComponent(escape(document.title = xhr.getResponseHeader('Page-Title')));
it outputs fine in IE, but then in Chrome I get Uncaught URIError: URI malformed
.
How can I get it to work in both browsers?
Solution
I fixed it by running htmlentities
on the string before I output it as a response header. I then decode the string in javascript before I set it as title.
document.title = decodeEntities(xhr.getResponseHeader('Page-Title'));