I have external javascript files that get loaded in my master page.
Sometimes in IE8, my javascript files don't load correctly and the browser throws a bunch of javascript errors saying 'object not recognized.'
If I refresh the page then everything is fine. If I click on a link then the problem sometimes occurs again.
I have meta tags in my header for clearing out the cache on each request. I'm using the head.load library to load my js files in parallel.
The head.load library is located in my header and the external files are at the end of my body.
Please remember that this problem only occurs in IE8. So my question is..drum roll please..is there a hack that I can use to make sure my javascript files are loaded correctly each time the page loads for IE8?
Any help would be greatly appreciated.
Updated as requested
<head runat="server">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="EXPIRES" content="-1" />
<script type="text/javascript" src="scripts/js/head.load.min.js"></script>
</head>
<body>
<script type="text/javascript">
head.js("scripts/js/jquery-1.6.2.min.js");
head.js("scripts/js/jquery.cookie.js");
head.js("lib/gritter/jquery.gritter.min.js");
head.js("lib/fancybox/jquery.easing-1.3.pack.js");
head.js("lib/fancybox/jquery.fancybox-1.3.4.pack.js");
head.js("scripts/js/jquery.microaccordion.js");
head.js("scripts/js/jquery.stickyPanel.js");
head.js("scripts/js/guidely.js");
head.js("scripts/js/pto.js");
</script>
</body>
Ok, the problems appears to be how the head.load library loads my externals in IE8. If I load jquery before I load the head.load library, and then load my externals in parallel at the end of the page; then there's no javascript errors. A little lesson for myself about javascript loading and IE8.
Thank-you everyone for the input.
# frederic - I work at a company that has 188,000 employees. If a user has an add on installed in their browser that is causing my page to crash then there's nothing I can do about that. I also don't think this problem is being caused by any add ons. Its just how the head.load library is handled in IE8.
<head runat="server">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="EXPIRES" content="-1" />
<script type="text/javascript" src="scripts/js/jquery.min.js"></script>
<script type="text/javascript" src="scripts/js/head.load.min.js"></script>
</head>
<script type="text/javascript">
head.js("scripts/js/jquery.cookie.js");
head.js("lib/gritter/jquery.gritter.min.js");
head.js("lib/fancybox/jquery.easing-1.3.pack.js");
head.js("lib/fancybox/jquery.fancybox-1.3.4.pack.js");
head.js("scripts/js/jquery.microaccordion.js");
head.js("scripts/js/jquery.stickyPanel.js");
head.js("scripts/js/guidely.js");
head.js("scripts/js/pto.js");
</script>
Look at the page http://headjs.com/ in the section Usage you will see exactly what is wrong with your code:
// files are loaded in parallel and executed in order they arrive
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");
Your scripts are been loading in parallel and are executed in arrival time, that's pretty bad for the deps on jquery, if you want them to be executed in order use this:
head.js("scripts/js/jquery-1.6.2.min.js",
"scripts/js/jquery.cookie.js",
"lib/gritter/jquery.gritter.min.js"),
"lib/fancybox/jquery.easing-1.3.pack.js",
"lib/fancybox/jquery.fancybox-1.3.4.pack.js",
"scripts/js/jquery.microaccordion.js",
"scripts/js/jquery.stickyPanel.js",
"scripts/js/guidely.js",
"scripts/js/pto.js");
You need to call js with a list of resources to load, not just call js several times.
Related
In the web app I am currently debugging, the index page looks something like below.
<head>
<base href="/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel='stylesheet' href='u.css?1456217719620'></link>
<link rel='stylesheet' href='ll.css?1456217719620'></link>
<link rel='stylesheet' href='aa.css?1456217719620'></link>
<script src='c.js?NaN'></script>
<link rel="shortcut icon" href="/images/favicon.ico" />
<script src='ll1.js?1456217719620'></script>
<script src='ll2.js?1456217719620'></script>
<script src='ll3.js?1456217719620'></script>
<script src='ll4.js?1456217719620'></script>
<script src='ll5.js?1456217719620'></script>
<script src='ll6.js?1456217719620'></script>
<script src='aa.js?1456217719620'></script>
</head>
<body>
<!-- Edit: As suggested in one of the reply, could it be because there are scripts like this in body? -->
<script type="text/javascript">
(function() {
var u='//widget.uservoice.com/xxxxx.js';
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=!1; g.defer=!0; g.src=u; s.parentNode.insertBefore(g,s);
})();
UserVoice = window.UserVoice || [];
</script>
</body>
Some of the scripts appear twice from developer tools (Chrome, see image below)
Sometimes both are 200 instead of 304 for the second request.
Is this normal?
What could have causes it to sometimes appear twice and sometimes it only appear once?
[Edit 1] It is different from this question How "304 Not Modified" works? It doesn't always show 304, sometimes both are 200 response. And this could be related to how HTML and javascript is written, not off-topic as suggested by moderator.
Even nginx recorded the request twice
[23/Feb/2016:21:56:09 -0500] "GET /ll1.js?1456217719625 HTTP/1.1" 200 220276
[23/Feb/2016:21:56:09 -0500] "GET /ll1.js?1456217719625 HTTP/1.1" 200 220284
[Edit 2] I think it might has something to do with "Large" file request? because as seen in the image below, I tried to load several javascript files, and some of them are couple MB in size. I didn't do much in the javascript, most of the smaller files just contain "console.log()", the larger version is just "var xxx = ['Large Array'];"
If your Javascript code modifies DOM and add new <script> node then, browser will load new script pointed in src attribute. So it is possible. However second request may be served from browser cache if web server said that it is not modified (code 304).
tl;dr Try right clicking Tag Assistant extension icon > Options > tick "Ignore External Scripts".
Possible answer is that you are running Tag Assistant (by Google) extension. My experience today is that I'm adding a third party SEO <script> tag to our site by pasting their javascript snippet into our site, which does a fairly normal dynamic <script> tag creation and insertion into the head of the page (actually it inserts it before the first script tag found on the page, which may not be in the head, but never mind). I found that the script name appeared twice, one after the other, in the network pane.
I created an XHR breakpoint for the script name, and found it stopped in the tag_assistant_compiled.js file within the Tag Assistant extension, as it made a very deliberate XHR request to load the external script file. Looking up the stack trace showed it was acting on purpose but I couldn't really see why it needed to make the request. Checking the options for the extension I found the similarly named "Ignore external scripts" checkbox, and sure enough, ticking that and refreshing the page meant no second request was made for the script.
I'm trying to find a good way to release a new version of a single page javascript app without asking clients to refresh their page or clear caches when a new version is deployed
I'm currently revving images / css / js files in my javascript app, so it contains references like scripts/671df76d.main.js and that's great.
So in my webapp v0.1 index.html I have something like this:
<script data-main=“scripts/d7ba3e7b.main” src=“bower_components/requirejs/require.js”></script>
while in a new v0.2 version I have this:
<script data-main=“scripts/671df76d.main” src=“bower_components/requirejs/require.js”></script>
I also experimented with meta tags that might influence caching.
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
But I never found a good solution. Sometimes the updates are shown without requiring a manual refresh from the user, sometimes old content is still being shown. The only way to get the user to see the new content is to ask him to refresh the page.
As users are always visiting the webapp through the index.html, I noticed that sometimes the latest version is picked up (v0.2 with 671df76d.main), but other times after deployment the browser still loads up a previous version.
I'm just wondering how I can guarantee a browser won't have cached my index.html with an old scripts/d7ba3e7b.main.js
It makes sense that the browser can have a cached version the index.html , so it would still refer to old/stale revved javascript sources (obviously something you don't want).
In that sense the fact that you rev your resources is useless.
Am I correct in saying that simply revving up resources inside the index.html is not sufficient and that some additional stuff is needed
html meta tags
htaccess files
webserver configs
What would be a proper way to do this ? Again, the goal being to allow users to see your new version without having to ask them to refresh / clear cache.
I've tried including it in my files, and from a CDN. I followed a tutorial about it, although it's hardly a tutorial to follow since all i had to do was include the link after <head>. Still, it's not being recognized and plugins aren't being recognized and just appear as text. Does anyone have an idea what could be the problem? If it's perhaps a setting in dreamweaver that has to be changed?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="myfirststylesheet.css" rel="stylesheet" type="text/css">
<title>Hallo wereld</title>
</head>
</html>
Its worth noting that, http or https in src hinders the inclusion of the cdn files at times.Remove the protocol and try this way....this way, it would take either http or https depending on the nature of hosting server
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
EDIT
Further Read on why this helps ( if not running the file from computer but through some server, even localhost):
Can I change all my http:// links to just //?
http-and-https-with-google-cdn
I'm using phonegap to build an enyo app. My program works completely fine in chrome and it also works in the ripple emulator service for blackberry. My problem is, when I use the .ipk build for webOS and the .apk build for android, I get the same error:
Not allowed to load local resource: file:///usr/palm/enyo.js
Uncaught ReferenceError: enyo is not defined, package.js:1
Uncaught ReferenceError: enyo is not defined, tests/package.js:1
Uncaught ReferenceError: enyo is not defined, index.html:10
This leads me to think that it must be a problem in my index file, which is:
<!DOCTYPE html>
<html>
<head>
<title>Enyo Bootplate App</title>
<link rel="shortcut icon" href="assets/favicon.ico">
<!-- -->
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- look this up for blackberry ad error -->
<!-- css -->
<link href="build/enyo.css" rel="stylesheet">
<link href="build/app.css" rel="stylesheet">
<!-- js -->
<script src="enyo/enyo.js"></script>
<script src="phonegap.js"></script>
<script src="source/mobile.js" type="text/javascript" ></script>
<script type="text/javascript" src="http://www.blackberry.com/app_includes/asdk/adBanner.js"></script>
<script src="source/gameBanks.js" type="text/javascript"></script>
<script src='https://cdn.firebase.com/v0/firebase-auth-client.js' type='text/javascript'></script>
<script src="https://static.firebase.com/v0/firebase.js" ></script>
<script src="build/enyo.js" ></script>
<script src="build/app.js" onerror="alert('No application build found, redirecting to debug.html.'), location='debug.html';"></script>
</head>
<body class="enyo-unselectable">
<script>
new App().write();
</script>
</body>
</html>
The weird thing is that index.html:10 is a comment (the css comment) so I have no idea how an error could possibly be there. Anyone have any idea why I would be getting this error? Or perhaps what "file:///usr/palm/enyo.js" is? That's not a file in my package.
Also, after messing around with it a bit, adding lines at the top of index.html doesn't change where the error is (index.html:10) so is it possible that the error is referring to some other form of index.html? I went through my commits at github and at no point in time was there anything other than comments at line index.html:10.
Update:
When using any other service to package the apps such as palm-run, it updates my code properly. My builds downloaded off of phonegap are not working properly. Is there any reason why phonegap's build specifically would cause this problem?
Finally solved this problem, phonegap was somehow finding the wrong index.html files. When I downloaded the enyo bootplate, there were some index.html's deep within the api and tools folders. After I removed those, it worked properly.
Strange...not sure what is causing that, but I do see you are trying to load enyo.js twice. I doubt that that is the issue, but it is something you want to clear up.
If you start with the base bootplate project with no changes, does it work to package an ipk/apk?
We are having MVC web application. Some of the code is in JavaScript. When we deploy any changes to the JavaScript, the changes are not reflected on the client side. We have to ask clients to do CTRL+F5 to get the changes. Is there a standard way of pushing JavaScript changes to the client side?
You can refer to the files with a version, like this:
<script type="text/javascript" src="myScript.js?v=12345"></script>
The number after v represents your build number, so when a new build pushes, they grab the files again. View source on this page to see the same behavior :) This gives you the benefit of allowing the user to cache the files as long as possible (forever), yet still have them automatically grab any update.
you can try this meta tags
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
You're not saying what server-side language your site is in. A nifty trick from the Rails world is to check the "last modified" time of the file, and to add that as a GET parameter to the URL.
In PHP, it would look like this:
<script type="text/javascript"
src="script.js?time=<?php echo filemtime("script.js");">
(of course, the path you need to give in the filemtime call will probably need to be an absolute one.)