I add an external JavaScript file like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script charset="utf-8" type="text/javascript" src="js/panel.js" ></script>
</head>
But the text stored in panel.js file is displayed like this in the HTML file:
H69�*
When I put JavaScript code in the HTML page, the text is displayed properly. But when I put JavaScript code in panel.js, it does not work.
Then the file maybe is not properly saved as UTF-8.
$ file -i panel.js
What's the output?
If you use, for example Vi, open the file and save it with:
:w ++enc=utf-8 %
in the mac OS it is a capital -i...like this:
file -I
Related
I am working on a project where I have to add external HTML files as a header and footer in the main (Index.html) page. I tried below script, but it didn't work
<!DOCTYPE html>
<html lang="en">
<head>
<title>sample test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#header1').load("mainheader.html");
});
</script>
</head>
<body>
<div id="header1"></div>
</body>
</html>
You can use iframe tag to load another html file or url.
<iframe src="your-html-route/another.html"></iframe>
Use JavaScript and work with components. Then you can work with modules to import or export a component and add HTML with
document.queryselector('#header').innerHTML = '<header>content</header>';
PHP is better for such a thing if you ask me. Make you header and footer in another .php file and include them on every page where you want use them.
Your script $('#header1').load("mainheader.html"); is correct. The fact is that the load() method (just like ajax) works exclusively on the SERVER. In order to load an external page to your tag using the load() method, you need to put your project on the server, or deploy a local server on your computer. There are many programs for this, for example: OpenServer, Denwer, WampServer, XAMPP, etc. I advise you to use OpenServer. It's free and easy to use. After you deploy your local server, you push your project to your server and the load() method will load your external html file.
If it's only a short bit of code then you could use this:
<pre>
<code>
HTML code goes
here.
</code>
</pre>
I am trying to include 5 javascript files which I have written to an HTML file.
However, there is an error message that the files are fail to load.
Source code:
<html class="gr__2k8dc"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Toilet partition tool</title>
<link rel="stylesheet" href="C:\Users\Downloads\3dmodelproject\files\style.css">
<script src="C:\Users\Downloads\3dmodelproject\files\three.js"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\STLLoader.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\OrbitControls.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\resources.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\toiletpartition.js.download"></script>
</head>
The error message:
Any clue what's wrong with the path format? Thanks!
As mentioned elsewhere, your paths are absolute paths, rather than relative paths. Essentially what this means, is you've hard-coded the locations of your assets (scripts/css/images/etc), making it very difficult to deploy the site, or move the location of your site on your local drive.
In addition, it causes problems with cross origin requests (the actual error you're seeing). Using a relative path resolves that issue, as you're guaranteed to be referencing the same origin.
You mentioned in your comment, the html file is: C:/Users/Downloads/3dmodelproject/files/Toiletpartitiontool.html
Thus, the relative location here is
C:/Users/Downloads/3dmodelproject/files
In order to then reference
C:\Users\Downloads\3dmodelproject\files\three.js, you simply need to use three.js.
Thus, your page should be:
<html class="gr__2k8dc">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Toilet partition tool</title>
<link rel="stylesheet" href="style.css">
<script src="three.js"></script>
<script src="STLLoader.js.download"></script>
<script src="OrbitControls.js.download"></script>
<script src="resources.js.download"></script>
<script src="toiletpartition.js.download"></script>
</head>
<body>
<!-- Content here -->
</body>
</html>
The reason is that only IE/Windows is happy with C:/
Try changing the drive to a series of ../
Each one of those will raise the folder level one. Eventually it will get to the root of the drive/domain and then go down the folders to your file. Depending on where you are running the html file will decide how many ../ to add. Linux and Mac don't use windows drive letters so this is also cross OS compatible.
The link would become:
../../../../Users/Downloads/3dmodelproject/files/STLLoader.js.download
I'm 90% sure this is the problem you are having
The reason may be your \, which the html requires /
But bonus:
Can you make the scripts to be the relative path to the index.html?
Make the path to be like <script src="/3dmodelproject/files/three.js"></script>
I am trying to set charset="utf-8" inside the javascript file itself, not in the script tag,
I know that I can do this:
<script type="text/javascript" charset="UTF-8" src="xyz.js"></script>
But unfortunately, this solution needs me to do the same step with hundreds of websites which are using the same script. so I am trying to set the charset in the javascript file itself.
Is this possible?
thanks
I found another way, so instead of declaring charset="UTF-8" for the script tag like this:
<script type="text/javascript" charset="UTF-8" src="xyz.js"></script>
I can declare the charset for the web page itself using meta tag, so I can append <meta charset="UTF-8"> to the DOM dynamically, and end up with something like:
<head>
...
<meta charset="UTF-8">
...
</head>
I think you can't set this in the Javascript file itself. The browser need the charset to read the file. So without the charset the browser is not able to understand your file and therefore would not be able to read the charset definition
Javascript strings with non-ASCII characters work as expected successfully when placed inside a tag in the HTML file, e.g.
<script type="text/javascript">
alert('tänään');
</script>
That is, an alert window pops up with the word 'tänään'.
However, if the code linked externally in a javascript file, e.g.
<script src='js/alert.js' type="text/javascript"></script>
the 'ä' characters are replaced with null-glyph characters ('t�n��n'). Using the charset attribute does not fix it:
<script charset="UTF-8" src="js/alert.js"></script>
Why is this happening? What fixes are available?
While adding a charset indicator for the browser, like:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
All text based files (html, js, and oh what the heck css) should be converted to utf-8 as well.
Keep in mind to convert the files to UTF-8 without BOM to avoid those annoying empty lines that will appear on some browsers.
I'm having a bizarre situation here where my external site files, both JavaScript and CSS, are being interpretted as somehow corrupt on Safari browsers. The same site looks fine in Internet Explorer, but on Safari the javascript and css are being completely ignored. If I look at the files through the Inspector, I can see that Safari views these files as containing junk characters -- either asian symbols or square boxes. When I navigate directly to the files, however, they appear just fine. See the site below, viewed in Safari 5, for an example:
http://amsoell.com/dch/castlemoore
If I embed the same exact CSS or JavaScript into the HTML itself, it renders perfectly. I don't know if this is a server issue or something in my CSS, but I'm at my wits end here.
I checked your website for validation and it's not valid. But the most interesting thing is that your enconding is utf-16le. You should put your encoding to utf-8. Just put the following line in your <head> section:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
Include the charset="utf-8" parameter in your <script> and <link> tags:
<script type="text/javascript" charset="utf-8" src="script.js"></script>
<link rel="stylesheet" type="text/css" charset="utf-8" href="style.css">
The problem can be solved by saving the html page in "Windows-1252 Encoding".