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>
Related
So I tried this answer to fetch an HTML document, but the issue I have is that I get the following: [object HTMLDocument].
What I want is to have the content of the HTMLDocument. Anyone knows how to do that?
Additionally, in my HTML module, do I need to create a new whole page like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
this is some html text that needs to be <em>emphasized</em>.
</body>
</html>
or can I simply put lines of HTML like this:
this is some html text that needs to be <em>emphasized</em>.
I'm playing around with HTML (, JavaScript & CSS) & decided to try to import one HTML from one file into another, the goal is that I can make several modules and just import them into an empty HTML page, so they together create a fully working & content filled HTML page.
I would prefer to use something similar to how scripts or style-sheets are imported:
(ignore the $ signs)
$<script src="file.js"></script>
OR
$<link rel="stylesheet" type="text/css" href="style.css">
The problem is that the $<html>, <head> & <body> tags are inserted again, is there any good way to fix this?
I have tried some methods: $<object> & <embed> &
$<link rel="import" href="file.html">
I don't want to use $<iframe> because I have heard that it's a security problem (yes, it's not relevant right now, but if I'm going to use this method later for real, then it will be important).
I am aware of other similar questions, like this:
Include another HTML file in a HTML file but most of the answers use external frameworks like JQuery or Angular which I don't want to use, I would prefer to use a pure HTML or/and JavaScript solution if possible.
Example code:
File to import:
<p>"The import is working"</p>
Base file to import into:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- Import code here (or in head if it for some reason is required) -->
</body>
</html>
Desired outcome:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>"The import is working"</p>
</body>
</html>
Actual outcome (with $<object> or $<embed>), (at least as the Firefox inspect-element tool shows it):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<embed src="file.html">
#Document <!-- I don't know what this means/function is, can someone explain? -->
<html> <!-- Notice the double: html, head, meta & body -tags -->
<head>
<meta charset="UTF-8">
</head>
<body>
<p>"The import is working"</p>
</body>
</html>
</embed>
</body>
</html>
You can use PHP, by making your file names with a .php extension and use PHP include:
<?php include 'header.php';?>
Read more about it here.
I've been trying to do the same thing for some time and the only solution I've come up with involves some JavaScript. When you import HTML the #document tag means it lives in the shadow DOM which is different than the one rendered (I think, I don't really understand this stuff). In any case, after importing, I ended up having to render the element and append it to the DOM.
<!-- Original HTML file -->
<html>
<head>
<title>Title</title>
</head>
<body>
<p>
Hello from original HTML.
</p>
<link id="importLink" rel="import" href="/path/to/import.html">
</body>
<script src="/path/to/renderImport.js"></script>
</html>
I had the following code in my renderImport.js file:
// renderImport.js
function renderImport() {
let importLink = document.getElementById("importLink");
let importedElement = importLink.import.querySelector('#import');
document.body.appendChild(document.importNode(importedElement, true));
}
renderImport();
And finally, import.html:
<!-- import.html -->
<p id="import">Hello from the imported file</p>
Here it is in Chrome. Though you might have to disable CORS.
Use Angular CDN in Head tag then import html using this code
<body ng-app="">
<ng-include src="'header.html'"></ng-include>
</body>
OR
<body ng-app="">
<header ng-include="'header.html'"></header>
</body>
Use you can change header to footer or content
I'm programming a C++ application which generates the report data in Javascript instead of CSV. I advocate that HTML and Javascript provides a powerful tool to generate and show reports. But generates the Javascript code in C++ it's a bit clunky.
I'm attempting to read a CSV from Javascript but I realise that it isn't possible owing to the cross-domain policy. I'd like to facilitate the client to see the report without obliging to disable the cross-domain security.
Code that works:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<title>Read CSV from static file - Avoiding cross origin</title>
<script id="data" type="text/csv">
x, y
0, 0
1, 1
2, 4
</script>
</head>
<body>
<script type="text/javascript">
var data = document.getElementById('data');
alert(data.innerHTML);
</script>
</body>
</html>
Code that does not work:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<title>Read CSV from static file - Avoiding cross origin</title>
<script id="data" type="text/csv" src="data.csv"></script>
</head>
<body>
<script type="text/javascript">
var data = document.getElementById('data');
alert(data.text);
</script>
</body>
</html>
Why using only an external plain text data does not show me anything? Can I solve this using <link> or <meta> tags? Thanks for your help!
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
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.