Accented characters not displayed in textarea embedded in iframe

Question

Note: I know everything should be UTF-8, however for the moment the website I am maintaining is required to deliver ISO-8859-1.

I have a search box that loads the results in an iframe. One of the search results contains the following string in a textarea.

!"#$%&'()*+,-./ 01234567890:;<=>?
@ABCDEFGHIJKLMNO PQRSTUVWXYZ[]^_
`abcdefghijklmno pqrstuvwxyz{|}~
¡¢£¤¥¦§¨©ª«¬®¯ °±²³´µ¶·¸¹º»¼½¾¿
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏ ÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß
àáâãäåæçèéêëìíîï ðñòóôõö÷øùúûüýþÿ
asdf

If I open the search results in their own page the field looks correct, but when the results are put into the iframe they look like

!"#$%&'()*+,-./ 01234567890:;<=>?
@ABCDEFGHIJKLMNO PQRSTUVWXYZ[]^_
`abcdefghijklmno pqrstuvwxyz{|}~

asdf

Request Headers:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Type:application/x-www-form-urlencoded; charset=iso-8859-1
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36
X-Requested-With:XMLHttpRequest

Response Headers:

Cache-Control:no-store, no-cache, must-revalidate, post-check=0, - pre-check=0
Connection:Keep-Alive
Content-Encoding:gzip
Content-Type:text/html; charset=iso-8859-1
Date:Fri, 16 Oct 2015 16:25:13 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive:timeout=15, max=73
Pragma:no-cache
Server:Apache
Transfer-Encoding:chunked
Vary:Accept-Encoding
X-Powered-By:PHP/5.3.28-pl1-gentoo

And this is the js loading the iframe

$.ajax({
    url: url,
    contentType: 'application/x-www-form-urlencoded; charset=iso-8859-1',
    success: function (data) {
        var document = $('#searchResults')[0].contentDocument || $('#searchResults')[0].contentWindow.document;
        document.write(data);
        document.close();
    }
});

Any ideas what I can do to get the characters to show up?

Edit - Forgot to note: after the page has loaded, opening developer tools shows some interesting results:

$('#searchResults').contents().find('textarea').val() - displays the abbreviated textblock, the characters are simply missing
$('#searchResults').contents().find('textarea').text() - displays the full textblock, all the missing characters appear here

Edit 2 - One more important point, Windows 7, observed in IE11, Firefox41 and Chrome46

Both parent document and iframe have the same tag, <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> — Mr Griever

Lucas Rodrigues Lucas Rodrigues · Accepted Answer · 2015-10-16T19:44:36

You might want to transform your UTF-8 special characters to HTML entities since ISO-8859-1 simply does not have does characters. I noticed that you are using PHP, so this link might help:

http://php.net/manual/en/function.htmlentities.php

If that does not work, you can try disabling HTTP input character conversion in php.ini:

;; Disable HTTP Input conversion
mbstring.http_input = pass
;; Disable HTTP Input conversion (PHP 4.3.0 or higher)
mbstring.encoding_translation = Off

http://php.net/manual/en/mbstring.http.php

Accented characters not displayed in textarea embedded in iframe

1 Answers