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
Related
I have an Angular 6 project that references a custom Javascript file using the angular.json file. Everything works as expected, but I need to ensure that this custom.js file gets loaded in the body of the page as opposed to the head. Angular does not show this when I right-click on the page to view source. Is it correct to assume that scripts are loaded in the body by default?
This is what view source reveals:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularJavascriptDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" type="module"></script>
<script src="scripts.js" defer></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>
</body>
</html>
I need to ensure that the page loads optimally.
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
So, I am making a website, and when changing between pages, there is a flickering.
I have searched for answers to fix this issue, but all of the results have not worked.
My pages php files, and fetch other files prior to loading the HTML elements. Could this be the issue?
Here's a look at my HTML code:
<!DOCTYPE html>
<html>
<head>
//Output meta data
<title>Page Title</title>
<link rel='stylesheet' type='text/css' href='../framework/assets/stylesheets/bla.min.css'/>
<script type='text/javascript' src='../framework/assets/javascript/jquery.min.js'></script>
<script type='text/javascript' src='../framework/assets/javascript/bla.min.js'></script>
</head>
<body lang='en'>
What could I do to prevent page flicker? How would I be able to delay the page from changing until the target page is fully loaded?
Thanks.
Set body style to
display:none;
and then use jquery:
$(document).ready(function(){$(body).css('display','block')});
This is the code to show content when fully loaded :) and if i understood correctly this is what you want
I'm facing very strange behaviour in Chrome & Mozilla from jQuery. I'm getting very generic Unexpected token ILLEGAL error on my document.ready function.
While playing with a signaturepad sample, I tried it with my own page. It is not working in Mozilla & Chrome, but is working in IE. Then I removed all references of signaturepad and put a simple one alert inside document.ready function and observed (Thanks to Chrome JavaScript Errors Notifier) Unexpected token ILLEGAL error is occurring when system try to use jQuery reference. Then I copied all the text from the sample page (a.html), where it works perfectly inside this page (b.html), and ran the page again. I'm surprised the a.html page is working fine while b.html page is throwing the error. Both pages are on the same directory and have the same content.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title> </title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link href="css/jquery.signaturepad.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
alert('hai');
})
</script>
</body>
</html>
Problem fixed now. Issue was in Encoding through which file was saved. The problematic file was saved with Unicode-1200 while it should be saved with Unicode-65001.
Thanks all for answering/comments.
Regards
I would do a few things that may sound silly --
Add a <!DOCTYPE html> tag to the top -- jquery mobile likes it
remove the indentation in front of your <html lang="en"> tag
redownload or try to use a hosted jquery library (e.g. from google) to see if that's it
add a closing ; after your })
I'm trying to understand d3 via this tutorial
So, I've downloaded script, named it d3.js and put it in the same directory with index.html
Here is code of index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3.js"></script>
<style type="text/css"></style>
</head>
<body>
<script type="text/javascript">
d3.select("body").append("p").text("New paragraph!");
</script>
</body>
</html>
However, when I load page, I don't see a new paragraph? What is wrong?
The snippet below is how jsFiddle sets up a working, d3-enabled page. I am not sure what exactly causes your problem, but maybe you could try copying the header.
I generally recommend including libs, like d3, via a CDN (e.g. cloudflare, or d3's own server, as in the fiddle), since the cached version can then be used across site domains (due to its absolute link), without being downloaded every time.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script><style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript">//<![CDATA[
window.onload=function(){
d3.select("body").append("p").text("New paragraph!");
}//]]>
</script>
</head><body></body></html>
You can keep your script tag at the bottom of the body though.