I'm opening a child window and writing contents into it in JavaScript. The parent page has UTF-8 an the character set, but the child window opens with ISO-8859-1
I've tried using document.write to set the child page content type using the meta tag, but it appears to have no effect.
launcherHtml = '
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
</body>
</html>
'
sandbox = window.open()
sandbox.document.open()
sandbox.document.write(launcherHtml)
sandbox.document.close()
sandbox.document.characterSet // ISO-8859-1 !!!
I've also tried using <meta charset="UTF-8"> as the tag in the child window but the results are the same.
How do I properly specify the charset of a popup window as UTF-8?
A method from late 2016 that works for multiple mime types including "text/plain" and "text/html":
use a data URL,
specify mime-type
specify character encoding as UTF-8.
convert text to escaped UTF-8 characters using uriEncode
replace '#' in the UTF octet string with "%23".
JavaScript example :
var launcherHtml = `
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>UTF-8 example</title>
</head>
<body>
<h1>Example using unicode and '#'</h1>
Hello folks, 你好! (nǐ hǎo) in Chinese, good evening,
こんばんは (in Japanese).
</body>
</html>
`;
var launcherURL = "data:text/html;charset=utf-8,"
+ encodeURI( launcherHtml).replace(/#/g,"%23");
sandbox = window.open(launcherURL)
sandbox.document.characterSet // UTF-8, yippee
Related
I have a box that looks like this 🟩. I am trying to put it into a string like this
var t = "🟩"
but whenever I try to do that, it automatically gets encoded into something that looks like this 🟩
Here is my code:
<div id="green" style="display: none;">🟩</div>
Should Be
<div id="green" style="display: none;">🟩</div>
How do I decode it? (This code is being uploaded to chrome://extensions if that helps. Thats why its changing I think)
Add <meta charset="UTF-8"> to the head tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="green">🟩</div>
</body>
</html>
Also why have you set display to none?
The charset attribute specifies the character encoding for the HTML document.
The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
...
</body>
</html>
I need to feed d3.dsv method with the text file exported from Excel. As to local settings all Excels here would make files with Windows-1251 charset by default.
Is my guess correct that even if I put the right charset value in "init" parameter of d3.dsv method I will not see correctly imported Cyrillic text in console? Unless I use some special recode function for the text received? I used all combinations for charset settings in meta of a html header and in "init" but hasn't succeeded. Is the "init" parameter (which is based on the fetch JS method) useless in this case?
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/plain; charset=UTF-8">
<script type="text/javascript" src="d3/d3.js"></script>
</head>
<body>
<script type="text/javascript">
var doc = "raw/test.txt";
var init = {headers: {"Content-type": "text/plain; charset=Windows-1251"}};
d3.dsv("\t", doc, init, ).then(function(data) {
console.log(data);
});
</script>
</body>
</html>
My HTML
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<div id="Target">食べる</div>
This displays perfectly fine .
document.getElementById("Target").innerHTML = "会う";
But once I use javascript to change the value of "Target" I get ��.
I'm fairly inexperienced when it comes to both javascript and encodings, so I apologize in advance if this is an easy fix.
I'm facing a weird problem. The text inside the html has accents, e.g.:
<p>é</p>
It is displayed correctly in the screen (é), but the content inside the DOM instance does not accepts the accents. It is displaying a "?" character instead of the character with accent.
In my case, I'm injecting javascript code in the Kindle (http://read.amazon.com) using a chrome extension, but don't think it is really relevant as I can see the problem just using the chrome console.
A simplified version of the html structure:
<html>
<head>
...
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
...
</head>
<body>
...
<iframe id="KindleReaderIFrame">
<html>
<head>
...
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
...
</head>
<body>
...
<iframe id="column_0_frame_0">
<html>
<head>
<!-- Do not have the Content-Type meta tag -->
</head>
<body>
<!-- Text with accents that I intend to get through DOM -->
</bady>
</html>
</iframe>
...
</body>
</html>
</iframe>
...
</body>
</html>
The text I want is inside the "column_0_frame_0" iframe.
Going through your code, you have not closed the body tag correctly, see below :
<iframe id="column_0_frame_0">
<html>
<head>
<!-- Do not have the Content-Type meta tag -->
</head>
<body>
<!-- Text with accents that I intend to get through DOM ->
</bady>
</html>
</iframe>
Secondly, if you are loading your contents in iFrame or through AJAX, its not enough to set the character set in meta tag, sometimes it depends on the IDE which you used to create your code.
To check:
Open the same code in Notepad++
Save the contents using charset UTF-8 (default ANSI).
Run code on your local server without opening the file in any other IDE.
Now you will be able to render the accents correctly in DOM as well as screen.
I have a similar problem to this: jQuery AJAX Character Encoding but any solution mentioned there works for me.
I've made three easy files to show the problem:
PHP File:
//prueba.php
echo "nº one two € áéíóú";
JavaScript File (I use JQuery)
//Javascript file
function prueba() {
$.ajax({
type: "GET",
contentType: "application/x-www-form-urlencoded;charset=ISO-8859-1",
url: "prueba.php",
}).done(function( data ) {
$("#prueba").text(data);
//$("#prueba").html(data); //It does the same encoding error
});
}
** HTML File:**
<html>
<head>
<title>E-COMMERCE</title>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="javascript/jquery.js" type="text/javascript"></script>
<script src="javascript/javascript.js" type="text/javascript"></script>
</head>
<body>
Prueba
<div id="prueba"></div>
</body>
</html>
And when you click the link Prueba it shows:
Prueba
n� uno dos � �����
The current website works perfectly but it does not use ajax and it is in the same server where i am doing this, so How can I tell to jquery to return ISO-8859-1 instead of whatever it is returning? I know that the ideal is to use always utf-8 but changing to utf-8 it will give us some problems we cant afford right now.
To make the browser use the correct encoding, you have to add an HTTP header to the php page :
header("Content-Type: text/plain; charset=ISO-8859-1");
or you could put the encoding in a meta tag of the html:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
In your php file you'll need to UTF-8 encode the output:
echo utf8_encode("nº one two € áéíóú");
And then in your html file you will need to set the charset:
<html>
<head>
<meta charset="utf-8"/>
...
And for good practice specify a document type as well:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
...
<!DOCTYPE html> is a legit HTML5 doctype.
And as Pranav Kapoor pointed out maybe you will need to specify the PHP-file charset aswell:
header("Content-Type: text/plain; charset=UTF-8");
I can see you have specified your charset to: ISO-8859-1. I always work with UTF-8 You can read more about it here: What is the difference between UTF-8 and ISO-8859-1?
But remove the contentType from your ajax call