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.
Related
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 am using thymeleaf to split my templates in head/main/footer parts. In order to include stylesheets and javascript on some pages (but not on others) I am using fragment expressions as explained here.
So my head.html looks like:
<!DOCTYPE html>
<html>
<head th:fragment="head(title,links,scripts)">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
<title th:replace="${title}">Title placeholder</title>
<!--/* Per-page placeholder for additional links */-->
<th:block th:replace="${links} ?: ~{}" />
<th:block th:replace="${scripts} ?: ~{}" />
</head>
<body>
</body>
</html>
And this is used for instance in my homepage, index.html as follows:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="head :: head(~{::title},~{::link},~{::script})">
<title th:text="#{label.pages.home.title}">Homepage</title>
<link rel="stylesheet" href="/assets/css/jumbotron.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
This works fine as is. Script and link tags appear in the header of the resulting page. However occasionally I want to have scripts at the end of the body (just before </body>. If I put a <script>....</script> in that position two things happen in the resulting page.
the script appears in the head
the script appears a second time in its original position
How can I prevent thymeleaf from putting the script in the head?
Fragment expression has syntax ~{template :: selector}. You reference for original file and syntax reduced to ~{:: selector}. Selector is XPath or CSS like expression. To prevent inclusion of all scripts you should narrow scope to head tag: ~{:: head/script}.
My page is located here
As you can see, it doesn't look like it's working properly. This becomes very apparent if you try to open it in an older browser (this is what initially set me off).
I checked the interpreted source code from chrome and it shows me the following:
<html>
<head>
<style type="text/css"></style>
</head>
<body>
<title>Internet adgang - Hurtig opsætning - Ansatte</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Etc..
Something seems to be closing my head tag which is causing all SORTS of errors:
W3 validator
I have absolutely no idea what is causing this.
You can see my source code here (I've scrambled the PHP):
The code above does not contain my body code, as I am fairly sure that has nothing to do with the head tag closing all of a sudden.
Here is some source of a page that works just fine:
I am completely baffled by this and I have no idea what to do nor what is causing it.
Any ideas?
Solution
With the help of Buttc4k3 and vogomatix I finally found the solution. As buttc4k3 said, there was an illegal "zero-width no-space" character hidden in the file which didn't show in my sublime text editor. It would only show if you opened the file in Notepad++. I could not understand why this character would appear in google chrome, and not in my source, but after googling it, I found that a file saved in UTF-8 WITH BOM (Byte Order Marking) would save the BOM as a zero-width no-space character! This was where vogomatix saved me and told me that my file was saved with BOM and after recoding it without BOM it works fine.
So - if you have the same problem as me - save your file WITHOUT BOM ENCODING (this can be done in notepad++).
I took the page source of your website and pasted it in Notepad++ and found a zero-width no-break space in line 3 column 5. It renders invisible in most editors/viewers, but it breaks the HTML parser of the browser. I don't know how or why it got there since I can't find it in the PHP code, but maybe you can find it by opening your code in Notepad++. It renders this character as a tiny dot. If you can't find it, delete everything from and including <head> to <title> and re-type it.
I hope this works.
PS: Even though it is not the reason why your page is broken, you should add <html> and </html> to the markup. Most browsers can deal with its absence, but it is there for a reason.
It seems like you are missing the <html> tag.
Current HTML-Code:
<!DOCTYPE html>
<head>
<title>Internet adgang - Hurtig opsætning - Ansatte</title>
Must be something like that:
<!DOCTYPE html>
<html>
<head>
<title>Internet adgang - Hurtig opsætning - Ansatte</title>
[...]
</head>
<body>
[...]
</body>
</html>
Edit the first part of your site to be as follows:
<?php
include 'XXXXX';
include 'XXXXX';
if(!isset($_GET['lang'])) {
$lang = "DA";
} else {
$lang = $_GET['lang'];
}
?>
<!DOCTYPE html>
<html lang="<?php $lang; ?>">
<head>
<title><?php echo trans("Internet adgang - Hurtig opsætning - Ansatte", $lang); ?></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="resources/styles/style.css" media="all">
<script src="resources/js/jquery.min.js" type="text/javascript"></script>
<script src="resources/js/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="resources/styles/au-flowbox-style.css">
<script type="text/javascript" src="resources/js/au-flowbox.js"></script>
<script type="text/javascript" src="resources/js/au-flowbox.data.js"></script>
</head>
<body>
....
I want to serialize DOM in Javascript and expect to get a well-formed XML document, however meta tag is not closed:
<html>
<head>
<meta name="keywords" content="test">
</head>
<body>
<p>test
<pre id='x'/>
</body>
<script>
document.getElementById('x').appendChild(
document.createTextNode(new XMLSerializer().serializeToString(document))
);
</script>
</html>
The output contains an invalid XML, where meta is not closed. However p is closed:
<html>
<head>
<meta name="keywords" content="test">
</head>
<body>
<p>test</p>
</body>
</html>
The same behavior in Chrome 30.0 and Phantomjs 1.9.2.
I'm expecting a well-formed XML output from XMLSerializer, even though my HTML input is broken. Why this is not happening and what is a workaround? I need to convert DOM to XML as a text.
Looks like it's impossible to do with a native XMLSerializer. I've found these libraries so far:
https://github.com/jindw/xmldom
https://github.com/znerol/node-xmlshim
I am trying to learn how to debug jquery. I tried to make a page which will dynamically add input feilds. The data is sent to the jquery. Now for debugging, I tried to console.log the whole array, but I am getting this error in Firefox:
[17:40:27.073] The character encoding of the HTML document was not
declared. The document will render with garbled text in some browser
configurations if the document contains characters from outside the
US-ASCII range. The character encoding of the page must be declared in
the document or in the transfer protocol. #
file:///Users/ateevchopra/Desktop/takemehome%20dynamic/TakeMeHome/index.html
Please explain what this means of if there is some mistake in my code. Heres my code
HTML:
<!doctype html>
<html>
<head>
<title>TakeMeHome</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type='text/javascript' src='js/app.js'></script>
</head>
<body>
<center><form id="details">
Your Place:<input id="source" type="text"><br><br>
Friend1:<input id="friend1" type="text"><br><br>
<div id="friends"></div>
<div id="button">Add!</div><br><br>
<input type="submit" value="go">
</form>
</body>
</html>
jQuery:
var j=2;
var friends = [];
$(document).ready(function(){
$('#button').click(function(){
if(j<11){
$('#friends').append('Friend'+j+':<input type="text" id="friend'+j+'"/><br/><br/>');
j++;
}
else
{
alert("Limit reached");
}
});
});
$("form").submit(function(){
friends[0] = ('#source').val();
for(var i=1;i<j;i++)
{
friends[i] = ('#friends'+i+'').val();
}
console.log(friends);
});
your code is working perfectly you can see it from this
console.log is good for debuging but i prefer you to use firebug for debuging.
Using firebug you can debug each and every line and you can also view the values of each variable.
I am using firebug with firefox.
You can download firebug for firefox from that link .I hope that it helps you.
The error has nothing to do with JavaSCript.
If you add a meta tag like <meta charset="UTF-8" /> it should be fixed.
I also see the you have a type in doctype declaration.
This is not an error in your Javascript code, but a general warning issued by Firefox regarding the validity of the actual HTML markup.
The document's encoding should be declared with a meta tag in inside the header tag. For example, if your encoding is UTF-8 it would be:
<head>
...
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
</head>
Since your doctype is HTML5, you can also use the charset attribute:
<head>
...
<meta charset="UTF-8">
...
</head>