I have a widget that’s loaded as an iframe. It has to know some data about the hosting page.
I have several UTF-8 strings obtained from the page. Normally they are some lines of Russian text. The page itself is OK with proper HTML5 doctype and meta charset specification.
Then my code works like that:
params = "x1=" + encodeURIComponent(s1) + "&x2=" + encodeURIComponent(s2)
url = "http://mysite.com/iframe.html#" + params
create_iframe(url)
where create_iframe is kind of
var $if, doc;
$if = $('<iframe>').attr({
frameborder: 0,
scrolling: "no",
allowtransparency: "true"
}).css(css).appendTo($cont);
doc = $if[0].contentWindow.document;
doc.open().write("<head><meta charset=\"UTF-8\"><script>" +
"var s = \"" + url + "\";" + // <--- here the url is injected into the iframe content
"function init() { document.location.href = s; }" +
"</script></head><body onload=\"init();\">...</body>");
doc.close();
Here we use jQuery to create an iframe and then write to its content to make it load our url.
Finally when the “http://mysite.com/iframe.html” URL is loaded inside of the iframe, the script inside of it gets the params’ values from the hash:
var hash_index, loc, param, params, params_array, params_string, tmp, _i, _len;
loc = document.location.href;
hash_index = loc.indexOf('#');
if (hash_index >= 0) {
params_string = loc.substring(hash_index + 1);
}
params_array = params_string ? params_string.split('&') : [];
params = {};
for (_i = 0, _len = params_array.length; _i < _len; _i++) {
param = params_array[_i];
tmp = param.split('=');
params[tmp[0]] = decodeURIComponent(tmp[1]);
}
return params;
This whole thing is working OK in Chrome.
In IE8 I get an error saying the’s invalid encoding when trying to decode the URI
How should I fix this?
The answer is – IE is truncating too long URL and it happens between 2 UTF-8 bytes.