I'm working on a JavaScript game and it works as intended in Chrome and Safari. However, in Firefox, the page doesn't load any scripts, and the debugger is empty. I'm not seeing any errors at all. This is the entirety of the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="module" src="foo.js"></script>
<script type="module" src="bar.js"></script>
<script type="module" src="baz.js"></script>
<script type="module" src="qux.js"></script>
<script type="module" src="foobar.js"></script>
<script type="module" src="bazqux.js"></script>
</body>
</html>
UPDATE: Some added context for future readers: per Roko C. Buljan's answer, it turns out ES6 modules are not on by default in FireFox at the time of writing. That was the issue.
You're using module features not openly available in Firefox. To enable them you could go to about:config and enable them under dom.moduleScripts.enabled setting its Value to true
Meanwhile you could use a polyfill like this or use build tools that will compile your modules into a single ES5-backed production-ready file.
Some indepth readings:
https://html.spec.whatwg.org/multipage/webappapis.html#integration-with-the-javascript-module-system
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
https://jakearchibald.com/2017/es-modules-in-browsers/
https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358
Related
For the simple html and js code snippet, the action differ from firefox and chrome.
The simple html and js code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<head>
<title>test welcome</title>
<script>
document.write("welcome1")
alert("welcome2")
</script>
<body>
<h3>welcome3</h3>
</body>
</head>
</body>
</html>
1.Open it with firefox.
To click the ok in alert.
The executing order is : welcome1 ,welcome2,welcome3.
2.Open it with chrome.
To click the ok in alert.
The executing order is : welcome2 ,welcome1,welcome3.
Why chrome parse the simple html and js code that way?
How to make chrome behave such the same way as firefox do?
All browsers will stop execution when an alert is encountered, however, Firefox will not halt rendering for alerts. This is primarily due to the vagueness of the standard, ECMA, who writes the ECMAscript standard (upon which Javascript is built) does not mention window.alert(), as it is specific to Javascript, meaning browsers are free to implement it however they like, and they do.
You can force the popup to occur after page load with something like this <body onload="window.alert('Hello World')">, or using the defer attribute.
I am observing a strange behaviour. I have some HTML/JS files. I am using SimpleServer as web server. I notice that the latest version of one particular file is not uploaded even after I change that file. When I inspect the file using browser's developer tools, I still see old code. What could be the reason?
The file in SpecHelper.js. It is included in index.html as follows
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.3.4/jasmine.css">
<!-- App Dependencies -->
<script src="lib/jquery-2.1.4.js"></script>
<script src="/vendor.js"></script>
<!-- Test libraries -->
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/boot.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="/app.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="SpecHelper.js"></script>
<script type="text/javascript" src="app_spec.js"></script>
</head>
<body>
<p>test </p>
</body>
</html>
If I change index.html or app_spec.js, I can see the changes but if I change SpecHelper.js, I still see the old code! I am debugging SpecHelper.js and this is not helping!
In case of Google Chrome browser: did you try chrome's "empty cache and hard reload" option after right-clicking to the refresh button with opened dev tools window?
You should try to open the page in an incognito or private browser window too.
I created an app in plunker using Angular 4.
Link to the code
I did it at the first moment using Chrome as my browser, but when running anything was happening. After trying various solutions, I decided to open the same plunker on Safari and then worked without an issue.
Could you please tell me why on Chrome is not working my solution?
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js#2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata#0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs#0.19.31/dist/system.js"></script>
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
I found the issue in my Plunker.
After I open in incognito mode and I saw that was working. I decided to check the Chrome plugins, as was thinking that was the issue.
I discovered that was my AddBlocker plugin which was causing the issue.
Now I resolved just whitelisting in the Adblocker the site.
If anyone will have a similar issue a good thought is to check plugins conflicts or issues.
I have this snippet loading to iframe of a bigger app, having scripts declarations in the <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="my-script.js"></script>
...
But I'm getting 'Ext' is undefined error thrown from within my-script.js.
Dev tool revealed that both started to load in parallel and my-script.js has finished loaded first as it is much smaller.
So here is a question: why is that IE uses asynchronous mode by default for ordinal scripts definition?
And how could I fix the issue?
Try using defer on both script tags like
<script type="text/javascript" src="ext-all.js" defer></script>
<script type="text/javascript" src="my-script.js" defer></script>
If this won't help, try loading ext-all.js first and use
Ext.onReady(function() {
// load my-script.js
});
to load your own script.
More of "defer": http://www.w3schools.com/tags/att_script_defer.asp
I'm working on a website in HTML5 CSS3 but I can't make my processing sketch work on other browsers than firefox.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<script type="javascript" src="processing.js"></script>
</head>
<body>
<canvas data-processing-sources="accueil.pde"></canvas>
</body>
</html>
Just answering if someone have the same error than me:
Processing sketchs work only in firefox browser if you're in localhost.
If you want to try it on other browser you need to host your website.