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
Related
I wanted to load a survey widget in the react project, where I create and execute the script in the head after dom gets loaded. But it is unable to generate its poll HTML.
Here is react demo in codesandbox
If I load the same script inside the specific element in the body without react env it works, here it's demo in jsbin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Polldaddy Title</h1>
<div id="pollDaddyInfo">
<p>Poll should generate below this statememt</p>
<script charset="utf-8" src="https://static.polldaddy.com/p/10962229.js"></script>
</div>
<h1>Polldaddy End</h1>
</body>
</html>
Help me to identify what could possibly go wrong?
There is nothing wrong with your implementation in either scenario (i.e. with and without react environment).
Actually, in react environment you're loading the script which is async operation and an script that is loaded asynchronously cannot write on the document with document.write which is happening here
For supporting my argument here is another thread on stack overflow
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 new to JS. I made a simple Snake game using vanilla JS in VS Code. There is minimal CSS in the code so I put that in the html.
When I open the index.html from VS Code with Live Server (http://127.0.0.1:5500/) it works fine.
But when I open it from the file explorer (file:///D:/Prog/Javascript/VanillaJS_projects/Snake/index.html) only the html gets loaded, no Snake and Food pieces appear. And the same happens if I try to open it with htmlpreview.github.io
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
<script src="game.js" defer type="module"></script>
<style>
...
</style>
</head>
<body>
<div id="game-board"></div>
</body>
</html>
It doesn't matter what browser I use, I get the same result.
What is the difference? Why won't it load properly?
You browsers honor Content Security Policy.
If you open file:/// URLs, you may think of your browser as a poor man's file viewer.
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
I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well