Mixing of different sources in the same scripts - javascript

I'm trying to include a couple of conditions in my code excluding only android visitors. I put this code but the first script in else condition is not working.
<script type='text/javascript'>
if( /Android/.test(navigator.userAgent) ) {
// some code..
}else
{
<script type="text/javascript" src="link"></script>
<script type="text/javascript" src="link"></script>
}
</script>

You can't wrap raw html in an else
You could add them using document.write()
Something like:
if( /Android/.test(navigator.userAgent) ) {
// some code..
}else
{
document.write('<script type="text/javascript" src="link"></script>');
document.write('<script type="text/javascript" src="link"></script>');
}

You can't do that.
The easiest way to do what you want to achieve is to include all scripts and then execute its content conditionally.
If you can't control the source code of these scripts, then this is a duplicated question of How do I include a JavaScript file in another JavaScript file?

Related

How to write fall back logic in ext js?

In Java script we write
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
window.jQuery || document.write('<script
src="/Scripts/Plugins/JQuery/jquery.min.js"><\/script>')
</script>
Can any one explain how to write for ext.js?
Why use a CDN if you use ExtJs? Off course it is possible to do so, but you want to build your own app.js which contains everything (and only) what you need. Besides that you don't want to edit your index.html after building your apps with Sencha Cmd.
<script type="text/javascript" src="//url/to/the/extjs/framework/ext.js"></script>
<script>
window.Ext || document.write('<script
src="/path/to/your/framework/ext.js"><\/script>')
</script>

Can you automatically choose between two <script src=""> files?

So lets say you're implementing a website that uses jQuery HEAVILY. You could put some code like
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and import it from some repository. If you're developing it without internet you could download the source and store it somewhere locally, then access it with some script like
<script src="js/jquery-1.10.2.min.js"></script>
But is there a simple way to have both? Such as if you can reach the repository use that, but if you can't use the local copy.
Check for a variable in the first script. If it is not found, use document.write to create the second script tag. Here is an example for jQuery I found here:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
The fail-safe way of referencing scripts on a CDN is to link to the local copy only if the CDN has failed for any reason.
The way to do this is simply to check if anything within the script has executed. For jQuery this is simply checking whether jQuery exists:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
if (!window.jQuery) document.write('<script type="text/javascript" src="/path/to/jquery-ver.sion.min.js"><\/script>');
</script>
Personally I have never had a script fail due to a CDN being offline, however I have had periods of internet outage. With scripts set up with a proper fallback, I've been able to continue local development as the pages still work without needing to connect to a CDN.
You can add resources dynamically if required one is not available. for eg:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
if( typeof $ != "function")
{
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'js/jquery-1.10.2.min.js';
head.appendChild(script);
}
</script>
</head>
<body>
</body>
</html>
Though JQuery hosted on Google CDN should be safe enough, the codes below can be used as a fallback with requireJS.
requirejs.config({
enforceDefine: true,
paths: {
jquery: [
'//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js',
'js/jquery-ui.min.js'
]
}
});
require(['jquery'], function ($) {
});

Add Try Catch to Javascripts with SRC

I have these CODE#1 scripts and the first script has a source that is running on a web service. I need to have a try catch so when the web service goes to a site down, I can make an else condition like in CODE#2. How can I achieve this. Thanks
CODE #1
<script type="text/javascript" language="Javascript" src="http://gd.geobytes.com/gd?after=-1&variables=GeobytesCountry,GeobytesCity">
</script>
<script type="text/javascript" language="Javascript">
document.write("<p>Welcome to visitors from "+sGeobytesCity+", " + sGeobytesCountry);
</script>
CODE #2
TRY
{
<script type="text/javascript" language="Javascript" src="http://gd.geobytes.com/gd?after=-1&variables=GeobytesCountry,GeobytesCity">
</script>
<script type="text/javascript" language="Javascript">
document.write("<p>Welcome to visitors from "+sGeobytesCity+", " + sGeobytesCountry);
</script>
}
catch
{
window.location = "geobytes.aspx";
}
You can’t use try/catch this way. (Especially since you put it outside of the script elements, so it would be part of the HTML code, and HTML is not a programming language and knows no such thing as a try/catch construct.)
But if the first script is supposed to create the variables sGeobytesCity and sGeobytesCountry that your second script is trying to output, you could check whether they exist or not first in your second script:
if(typeof sGeobytesCity !== "undefined") {
document.write("<p>Welcome to visitors from "+sGeobytesCity+", " +
sGeobytesCountry);
}
else {
window.location.href = "geobytes.aspx";
}

Why will an object literal load when in declared in external source file but not when called in a file including an external javascript file file

The code in the external file is
var testing = {
bugtest: function() {
alert('No Bugs Here');
}
}
In the php file I am using
<script type="text/javascript" src="externalScript.js">
testing.bugtest();
</script>
But this will not work why?
if I call the function in the external fil it works
var testing = {
bugtest: function() {
alert('No Bugs Here');
}
}
testing.bugtest()
this will work but this not what I want it to do I want to be able to call the function in the main file? What would the cause of this problem be?
You can not use src attribute and the text node with script elements.
They must be exclusive, e.g. an element each.
So your HTML would look something like...
<script type="text/javascript" src="externalScript.js"></script>
<script type="text/javascript">
testing.bugtest();
</script>
This
<script type="text/javascript" src="externalScript.js">
testing.bugtest();
</script>
is wrong. You can either specify a src, or run inline code.

google.load - and message "google is not defined"

What do I need to include to do a google.load() statement?
I'm getting the error:
google is not defined
Based on this page, I thought I should add this:
<script type="text/javascript"
src="http://www.google.com/jsapi?key=ABCDEFG">
</script>
But when I did, I got this error:
"window.LoadFirebugConsole" is not a function.
I had the same problem and solved it like this:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type='text/javascript'>
function LoadGoogle()
{
if(typeof google != 'undefined' && google && google.load)
{
// Now you can use google.load() here...
}
else
{
// Retry later...
setTimeout(LoadGoogle, 30);
}
}
LoadGoogle();
</script>
The idea is to retry until google is defined.
The other solutions didn't help me, probably because this piece of code is loaded via Ajax from another page.
Did you include the google jsapi script before adding the load and callback methods? They should be in seperate script blocks.
<script src="http://www.google.com/jsapi?key=ABCDE"></script>
<script type="text/javascript">
google.load("jquery", "1");
// Define our onLoad callback
function OnLoad(){
alert("Loaded!");
}
google.setOnLoadCallback(OnLoad);
</script>
There are additional examples in the Google's 'AJAX Api's Playground'.
you should include this script -- http://www.google.com/jsapi
I had the problem, but I was using:
<script type="text/javascript" src="http://www.google.com/jsapi" />
It was solved by chanching the line to:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Categories