jQuery CDN timeout fallback - javascript

I have read in several places how to fallback on a local copy of the jQuery library should the link hosted by either google or microsoft or other fail.
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
document.write(unescape("%3Cscript src='/Scripts/jquery-1.3.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
My application works within an intranet environment however and occasionally the external jQuery link doesn't so much fail but takes a long time to load (due to external internet connection issues).
I'm wondering if there is a way to not only use such a fallback but set a timeout for the CDN link so that if the link takes a certain amount of time it should fail and call on the fallback.
Something like:
if(timetoloadjquery > n) {
Use fallback local jQuery library.
}
Perhaps some kind of loop that checks if the jQuery is defined and if after so many iterations it is not....do something else?
Thanks for the help.

This may help you. After 5-seconds have passed, Javascript checks if jQuery is available, if not, then loads the library from local server.
1. With a timer
<script>
setTimeout(function() {
if(window.jQuery) return;
var n = document.getElementsByTagName("script")[0];
n.parentNode.insertBefore(document.createElement("script"), n).src = "assets/jQuery/jquery-1.7.2.min.js";
}, 5000);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
2. This one doesn't have a timer, it loads a local version if the CDN version fails.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript">window.jQuery || document.write("<script type='text/javascript' src='js/jquery-1.8.3.min.js'>\x3C/script>")</script>

Related

Order of script execution when using document.write

I need to run a library called Fastclick in order to handle the 300ms click delay that's on mobiles. At the same time, I don't need to run it if I'm not running on mobiles. So I'm looking to do something like this:
<head>
<script>
var UserAgent = navigator.userAgent;
if (screen.width < 851 || UserAgent.indexOf('iPad') !== -1 || UserAgent.indexOf('iPhone') || UserAgent.indexOf('Android')) {
document.write('<script src=\"/ExternalFiles/Fastclick.js\"></script>');
}
</script>
//second script
<script>
if (FastClick) {...}
</script>
</head>
As you can see, the second script checks to see if FastClick is loaded. On my local machine, this works. However, I'm wondering if it works just because the file is loaded almost instantaneously from the file system (ie no delay) or if in fact, the document.write statement triggers the load and the script execution is on hold until that script is loaded. I'm looking for the latter behavior: do scripts that are loaded via document.write pause the JavaScript parsing until they're loaded?
Why don't you include the file always and call the function only when you need it? Then you don't have to think about any possibility your way involves:
<head>
<script src="/ExternalFiles/Fastclick.js"></script>
<script>
var UserAgent = navigator.userAgent;
if (screen.width < 851 || UserAgent.indexOf('iPad') !== -1 || UserAgent.indexOf('iPhone') || UserAgent.indexOf('Android')) {
FastClick(...)
}
</script>
</head>
When a non-mobile browser has loaded the file one time, it's in the cache and doesn't slow down page load.

Javascript stop browser advertisement add ons

Is there any way to stop browser add-ons from injecting HTML code?
I am having a website built in angularjs but because of some browser add-ons my route is getting messed up, this is the HTML snippet which is causing some errors in my angularjs:
<script async="" src="http://b.scorecardresearch.com/beacon.js"></script>
<script type="text/javascript" async="" src="http://in1.perfectnavigator.com/d.php?id=57573&eid=&vdisp=0&u=http://www.domain.com/app/#/users&r=http://www.domain.com/site/profile/view/&vdisplayEn=0&vsliderEn=1&bannerAds=1&usadservEx=Oj45JDs7PTUiNg&lrc=0&curatedSite=0"></script>
<script type="text/javascript" src="https://api.jollywallet.com/affiliate/client?dist=111&sub=1&name=Browser%20Extensions"></script>
<script type="text/javascript" src="https://colo.cachefly.net/js/min.inject.js?id=Pz8sOCA"></script>
<script type="text/javascript" src="https://colo.cachefly.net/js/min.inject.js?id=Pz8sOis"></script>
<script type="text/javascript" src="https://colo.cachefly.net/js/min.inject.js?id=Pz8sOiA"></script>
<script type="text/javascript" src="https://colo.cachefly.net/js/min.inject.js?id=Pz8sOSA"></script>
<script type="text/javascript" src="https://colo.cachefly.net/js/min.inject.js?id=Pz8sOSs"></script>
<script type="text/javascript" src="http://www.superfish.com/ws/sf_main.jsp?dlsource=hhnkdzlc&CTID=ssaddon"></script>
<script type="text/javascript" src="http://istatic.datafastguru.info/fo/min/abc1RSQC.js"></script>
<script type="text/javascript" src="http://i.swebdpjs.info/sweb/javascript.js"></script>
<script type="text/javascript" src="http://cond01.etbxml.com/conduit_bundle/web/hotels.php?mamId=G8K2&userId=2222&appId=3333&&ui=1&ns=ETB_Hotels_Widget&partner=smg"></script>
<script type="text/javascript" src="http://cdn.visadd.com/script/14567725590/preload.js"></script>
<script type="text/javascript" src="https://www.tr553.com/InterYield/bindevent.do?e=click&affiliate=harel777&subid=iy&ecpm=0&debug=false&snoozeMinutes=1&adCountIntervalHours=24&maxAdCountsPerInterval=6&endpoint=https%3A%2F%2Fwww.tr553.com"></script>
<script type="text/javascript" src="https://intext.nav-links.com/js/intext.js?afid=wolfpack&subid=def&maxlinks=4&linkcolor=006bff&wiki=1"></script>
<script type="text/javascript" src="http://www.adcash.com/script/java.php?option=rotateur&r=234715"></script>
<script type="text/javascript" id="jw_00" src="//d2cnb4m0nke2lh.cloudfront.net/jollywallet/resources/js/2/affiliate_client.js"></script>
<script src="//jsgnr.datafastguru.info/fl/blm"></script>
<script src="//jsgnr.datafastguru.info/site-classification"></script>
<script src="//jsgnr.datafastguru.info/fl/blm"></script>
<script src="//jsgnr.datafastguru.info/bwl/wl"></script>
<script src="//jsgnr.datafastguru.info/fl/blm"></script>
<script src="//pstatic.datafastguru.info/fo/ecom/lang.js?c=in"></script>
<script src="//pstatic.datafastguru.info/rss/min/fo.min.js?v=2_3_621&b=dynamic&l=right"></script>
<script src="//jsgnr.datafastguru.info/bwl/wl?v=1"></script>
<script src="//jsgnr.datafastguru.info/site-classification"></script>
<script src="//pstatic.datafastguru.info/fo/ecom/lang.js?c=in"></script>
<script src="//jsgnr.datafastguru.info/bwl/wl?v=1"></script>
<script src="//pstatic.datafastguru.info/rb/min/fo.min.js?v=1_1_63"></script>
<script src="//jsgnr.datafastguru.info/bwl/bl"></script>
<script src="//jsgnr.datafastguru.info/bwl/bl?v=1"></script>
<script src="//jsgnr.datafastguru.info/bwl/bl?v=1"></script>
<script type="text/javascript" src="http://www.superfish.com/ws/sf_preloader.jsp?dlsource=hhnkdzlc&CTID=ssaddon&ver=2014.11.25.14.48"></script>
Because of this my URL which was:
www.domain.com/app/#/users
changes to
www.domain.com/users
And I am getting URL related errors: TypeError: Cannot read property 'charAt' of undefined
If I run my website on a browser without any add-ons it works like a charm, but with the above add-ons I am getting errors.
One of our websites user's is facing this issue. Is there any solution to get rid of this?
I looked a bit into intercepting the <script> element injection into the document and prevent loading the code. Disclaimer: I'm no expert on this subject, I just wanted to share what I tried.
At first, I played a bit with MutationObserver, watching the DOM for the creation of a <script> element, and removing it. I came up with the following snippet, added at the very beginning of my HTML page, supposedly to make it load first:
// Create the observer, registering our intercepting callback
var obs = new MutationObserver(function (mutations, obs) {
// Loop over reported mutations
mutations.forEach(function (mutation) {
// childList means nodes have been added. That's the only thing
// we're interested in
if (mutation.type !== 'childList') return;
// Check the added nodes
for (var i=0; i < mutation.addedNodes.length; i++) {
var node = mutation.addedNodes[i];
// Ignore all but SCRIPT elements
if (node.nodeName !== 'SCRIPT') return;
// Remove it
node.parentNode.removeChild(node);
console.log(node.nodeName);
}
});
});
// Start observer
obs.observe(document, {subtree: true, childList: true});
Obviously, this was doomed to fail. If I need to ask a parent element to remove the node, that means it was already added to the DOM and loaded (loading, at least) when I came in to prevent it.
I tried to get there earlier, by overriding document.createElement and returning <div>s instead of <script>s:
document.createElementOriginal = document.createElement;
document.createElement = function (tagName) {
if (tagName.toLowerCase() == 'script') {
console.log('Script interception');
tagName = 'div';
}
return document.createElementOriginal(tagName);
};
But no luck. Looking at the console, no interception was reported. Still too late.
I can only conclude that the extension data is injected before any script on my page is executed, or that the element injection is made in an way independent of the scope I could access in my code.
If you have any suggestion in how I could investigate further, feel free to point me in that direction.
Tell the user to uninstall her add-ons.
OR, if you are truly intent on making your website compatible with this user's array of add-ons (perhaps she is a person of high importance, or she represents many people in an organization in which everyone has these add-ons installed?)...
Designate the line of code at which the error is thrown, and set a breakpoint there. Here are instructions on how to do that in Chrome. Walk your way up the call stack and see if you can find any clues.
If that does not work, try removing some of those scripts. Find out which ones, when removed, solve the issue. Try as many combinations as you are willing to try. Once you have found the culprit script, determine which add-on injected it. Instruct the user to uninstall this add-on, otherwise she will not be able to use your website.
If you want to work around the existence of this script, and you really think it's worth your time (it probably isn't), you can examine the culprit script and try to find out where it's screwing you up. If the script is minified, you can drop it into a deobfuscator like jsnice and scour it. Of course, that will take forever.
In a final bid to get your site to work alongside these add-ons, you could employ various hacks, like wrapping your code in try catch blocks and redirecting on errors, using setTimeout to sidestep errors, etc etc... but really, the easy and obvious solution is to uninstall the add-ons.
You can not disable addons but you can overwrite their functionality. as every javascript code runs under window context, you will get access to addons variable. You just need to do some RnD on those add ons and replace functions before your script loads.
If an addon messes with a website's URL, it's going to break the website. This is not the fault of you, the website developer, but instead the fault of the addon developer (assuming you did not install these "addons" into your website yourself). I feel like there's some sort of miscommunication or something missing if the "addon" is changing your url from a hash to an html5mode pushstate url.
Have the user figure out WHICH addon is causing the bug by one by one having her disabling every addon until the problem goes away. With the information you provided there's absolutely not enough information to go on and I would generally advocate to close this question on that basis.
Once you identify the addon in question, contact their developer asking them why they are changing the URL of random websites.
If the user has an addon that converts www.google.com to www.giggle.com would you not expect the website to "break"? You can't expect google to fix this behavior.

loading a backup copy of jQuery when CDN is down

I have this code in a script we use for initializing all of our applications, it loads the jQuery from the google CDN amongst several other things that all of our applications require. Then when we load the specific program functionality we check to make sure that jquery has loaded, in case the CDN is down. The problem I am running into is it is still loading the second one. If I add a simple alert("Test"); after the line headTag.appendChild(jqTag); it works perfectly, but if I remove the alert it uses the second one. What gives?
They are loaded like so:
<script type="text/javascript" src="i-initializer.js"></script>
<script type="text/javascript" src="i-program.js"></script>
initializer script:
if(typeof jQuery=='undefined'){
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
headTag.appendChild(jqTag);
}
Then in another script we have the following:
if(typeof jQuery=='undefined'){
var header = document.getElementsByTagName("head")[0];
var qtag = document.createElement('script');
qtag.type = 'text/javascript';
qtag.src = 'http://feedback.oursite.com/scripts/jquery-1.8.3.min.js';
qtag.onload = checkjQueryUI;
header.appendChild(qtag);
}
else
{
jQCode();
}
jQCode() {
...
}
This is the technique used by HTML5 Boilerplate. First it loads the Google CDN script, then immediately checks if the global jQuery object exists -- if it doesn't, the CDN failed and a local copy is loaded instead.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
Your fallback code loads jQuery asynchronously.
That means that the rest of your scripts run before jQuery loads.
Adding an alert() call forces the rest of your code to wait (until you click OK); by the time that happens, jQuery will have loaded.
Instead, you can emit a new <script> tag using document.write() to load it synchronously.
Alternatively, you could wrap the rest of your code in a callback and call the callback(s) after jQuery loads.
If you do it this way, you should use a script loader library, which will handle all of that for you.

Double script tags in Google Analytics tracking code

This is more a curiosity question than anything else...
Google instructs to add the analytics tracking code as follows:
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}
</script>
I'm wondering some JS guru here could tell me why they're separating it into two script tags instead of sticking it all inside one. I know that the top part could be put in the header and the bottom part just before body tag to ensure the page loaded before it's tracked, but I'm wondering if there's something more to it. Anyone who'd know that would likely know how to separate the code into two tags anyway.
I'm only asking as this is coming from the Goog and is being used by millions of sites...
Thanks
This is to be consistent cross-browser, it needs to make sure that document.write() sticks the tag it's generating in before the next script block runs, so the result looks like this:
<script src='http://www.google-analytics.com/ga.js' type='text/javascript'></script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}
</script>
If it didn't do it in 2 scripts, _gat would be undefined in the second script block because the ga.js hasn't loaded yet...however as a script block before that one, the page waits before executing the code inside the last block, making it all work when it's supposed to. Basically, the browser executes script blocks in order, google's taking advantage of this fact to load the script when it needs to be loaded...which is before it's used.
If I had to guess, I would say it's because of the document.write(unescape(...)); line where they're dynamically including another JS file. Why they're loading that one dynamically I don't know. I'd guess that has to do with whether or not you're running https or http.
If it was one file, I doubt the ga.js file would be loaded in time to run the pageTracker code. _gat wouldn't exist, and you'd get an error rather than being able to actually use Analytics.

What are the ways to minimize page wait from external javascript callouts?

What tricks can be used to stop javascript callouts to various online services from slowing down page loading?
The obvious solution is to do all the javascript calls at the bottom of the page, but some calls need to happen at the top and in the middle. Another idea that comes to mind is using iframes.
Have you ever had to untangle a site full of externally loading javascript that is so slow that it does not release apache and causes outages on high load? Any tips and tricks?
window onload is a good concept, but the better option is to use jQuery and put your code in a 'document ready' block. This has the same effect, but you don't have to worry about the onload function already having a subscriber.
http://docs.jquery.com/Core/jQuery#callback
$(function(){
// Document is ready
});
OR:
jQuery(function($) {
// Your code using failsafe $ alias here...
});
edit:
Use this pattern to call all your external services. Refactor your external script files to put their ajax calls to external services inside one of these document ready blocks instead of executing inline. Then the only load time will be the time it takes to actually download the script files.
edit2:
You can load scripts after the page has loaded or at any other dom event on the page using built in capability for jQuery.
http://docs.jquery.com/Ajax/jQuery.getScript
jQuery(function($) {
$.getScript("http://www.yourdomain.com/scripts/somescript1.js");
$.getScript("http://www.yourdomain.com/scripts/somescript2.js");
});
Not easy solution. In some cases it is possible to merge the external files into a single unit and compress it in order to minimize HTTP requests and data transfer. But with this approach you need to serve the new javascript file from your host, and that's not always possible.
I can't see iframes solving the problem... Could you please elaborate ?
See articles Serving JavaScript Fast and Faster AJAX Web Services through multiple subdomain calls for a few suggestions.
If you're using a third-party JavaScript framework/toolkit/library, it probably provides a function/method that allows you to execute code once the DOM has fully loaded. The Dojo Toolkit, for example, provides dojo.addOnLoad. Similarly, jQuery provides Events/ready (or its shorthand form, accessible by passing a function directly to the jQuery object).
If you're sticking with plain JavaScript, then the trick is to use the window.onload event handler. While this will ultimately accomplish the same thing, window.onload executes after the page--and everything on it, including images--is completely loaded, whereas the aforementioned libraries detect the first moment the DOM is ready, before images are loaded.
If you need access to the DOM from a script in the head, this would be the preferred alternative to adding scripts to the end of the document, as well.
For example (using window.onload):
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
window.onload = function () {
alert(document.getElementsByTagName("body")[0].className);
};
</script>
<style type="text/css">
.testClass { color: green; background-color: red; }
</style>
</head>
<body class="testClass">
<p>Test Content</p>
</body>
</html>
This would enable you to schedule a certain action to take place once the page has finished loading. To see this effect in action, compare the above script with the following, which blocks the page from loading until you dismiss the modal alert box:
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
alert("Are you seeing a blank page underneath this alert?");
</script>
<style type="text/css">
.testClass { color: green; background-color: red; }
</style>
</head>
<body class="testClass">
<p>Test Content</p>
</body>
</html>
If you've already defined window.onload, or if you're worried you might redefine it and break third party scripts, use this method to append to--rather than redefine--window.onload. (This is a slightly modified version of Simon Willison's addLoadEvent function.)
if (!window.addOnLoad)
{
window.addOnLoad = function (f) {
var o = window.onload;
window.onload = function () {
if (typeof o == "function") o();
f();
}
};
}
The script from the first example, modified to make use of this method:
window.addOnLoad(function () {
alert(document.getElementsByTagName("body")[0].className);
});
Modified to make use of Dojo:
dojo.addOnLoad(function () {
alert(document.getElementsByTagName("body")[0].className);
});
Modified to make use of jQuery:
$(function () {
alert(document.getElementsByTagName("body")[0].className);
});
So, now that you can execute code on page load, you're probably going to want to dynamically load external scripts. Just like the above section, most major frameworks/toolkits/libraries provide a method of doing this.
Or, you can roll your own:
if (!window.addScript)
{
window.addScript = function (src, callback) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = src;
script.type = "text/javascript";
head.appendChild(script);
if (typeof callback == "function") callback();
};
}
window.addOnLoad(function () {
window.addScript("example.js");
});
With Dojo (dojo.io.script.attach):
dojo.addOnLoad(function () {
dojo.require("dojo.io.script");
dojo.io.script.attach("exampleJsId", "example.js");
});
With jQuery (jQuery.getScript):
$(function () {
$.getScript("example.js");
});
If you don't need a particular script ad load time, you can load it later by adding another script element to your page at run time.

Categories

Resources