Include jQuery from another JavaScript file - javascript

I am trying to include jQuery from a javascript file. I have tried the following, although it doesn't work.
var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>';
document.getElementsByTagName('head')[0].appendChild(script);


</script> closes the opening <script> block, even if it's in a string. I would do it this way:
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = document.location.protocol + '//code.jquery.com/jquery-1.9.1.min.js';
document.getElementsByTagName('head')[0].appendChild(script)
})();


You can't have </script> anywhere inside a script block, not even inside a string, because it will end the script block there.
Break up the ending tag in the string:
var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></scr'+'ipt>';


Just use the jQuery getScript() method to load jQuery: http://api.jquery.com/jQuery.getScript/
...Just kidding.
Try this code:
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
head.appendChild(script);
From: http://unixpapa.com/js/dyna.html
Also, if using on an https page, you will need to load the script from an https compatible CDN, like the Google Hosted Libraries (src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js")


(function() {
var script = document.createElement('script');
script.type = "text/javascript"; // keeping older browsers happy.
script.src = window.location.protocol + '//code.jquery.com/jquery-1.9.1.min.js';
// browsers prevent cross-protocol downloading.
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);// In Opera a site can get by without a <head>
})();


var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
document.getElementsByTagName('head')[0].appendChild(script);


using a tiny re-usable script adder:
function fetch(url){
var d=document, s='script';
d.getElementsByTagName(s)[0].parentNode.appendChild(d.createElement(s)).src=url;
}
fetch('//code.jquery.com/jquery-1.9.1.min.js');
not all pages have HEADs in all browsers, but if a script is running, so can a sibling script tag...


First of all, the variable script contains the sequence </script> which you can not make it appears as it is in your code, because browser will assume(and it must) that it is <script> tag close.
for example if your script code contains syntax error, which is a string variable that has no close " it will looks like
<script>var bad = "abcd ;</script>
to solve this you can break the </script> string like "</scr" + "ipt>" or you could escape it: "<\/script>"
so:
var script = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"><\/script>';
document.getElementsByTagName('head')[0].appendChild(script);
Second thing is that appendChild() function accept a Node element and not a string
so:
var script = document.createElement("script");
script.src = "http://code.jquery.com/jquery-1.9.1.min.js";
document.getElementsByTagName("head")[0].appendChild(script);
Anyway, I prefer to use a module and JavaScript loader like RequireJS.

Related

JS Asynchron script faild to execute

I want to include an adserver js script with javascript and load it async. But every try ends with an warning and the script isn't executed.
I get the following error message:
"Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
I have tried to following variants:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://example.com/test.js";
document.body.appendChild(script);
Or I used the HTML Script attribute async
<script src="http://example.com/test.js" async></script>
But nothing worked, since the external script uses document.write. Is there another way to include such scripts?
How to "explicitly open" a page ("unless it is explicitly opened" - see warning)?

One way would be to overwrite document.write temporarily until the script is executed, afterwards replace original functionality.
var tempDocWrite = document.write;
document.write = function(el){
var div = document.createElement('div');
div.innerHTML = el;
document.body.appendChild(div)
}
var script = document.createElement('script');
script.onload = function(){
document.write = tempDocWrite
}
script.type = 'text/javascript';
script.src = "http://example.com/test.js";
document.body.appendChild(script);
note: have not tested the above code

Javascript to dynamically insert plugins and code

I'm trying to provide my users with a single <script> tag that will add some plugins to the page and execute some javascript code. I'm providing my users with a code snippet like this, and asking them to add it anywhere within the body of their website:
<script type="text/javascript" src="//my-domain/code?s=1a2b3c4d&t=faq&cb=1408412749" async></script>
In the response, I have the following Javascript code:
//add jquery to page
var script = document.createElement('script');
script.src = 'http://my-domain/assets/js/jquery.min.js';
document.body.appendChild(script);
//move jquery to our own namespace
var script = document.createElement('script');
script.innerText = "var SB = {};SB.$ = jQuery.noConflict(true);";
document.body.appendChild(script);
As you can see, I'm trying to add Jquery to the page, and then namespace it in case Jquery already exists. The problem is that when the code executes, I'm receiving this error:
Uncaught ReferenceError: jQuery is not defined
So, clearly jQuery is not loaded yet when the namespacing code executes, but I don't understand why. Shouldn't jQuery be defined at this point?

The script.onload function seems to have solved the problem:
//add jquery to page
var script = document.createElement('script');
script.src = 'http://my-domain/assets/js/jquery.min.js';
script.onload = function(){
//move jquery to our own namespace
var script = document.createElement('script');
script.innerText = "var SB = {};SB.$ = jQuery.noConflict(true);";
document.body.appendChild(script);
}
document.body.appendChild(script);

Load script in html based on cookie

How can I load scripts in a html based on the cookie value. I need to switch between development and deployment mode.
I am using wro4j but I can't find where the error comes in that wro4j grouped js files.
<head>
if (getcookie(debug-mode) load the following scripts
<script type="text/javascript" src="/assets/v/{{ASSET_VERSION}}/main-core.js"></script>
<script type="text/javascript" src="/assets/v/{{ASSET_VERSION}}/angular-core.js"></script>
<script type="text/javascript" src="/assets/v/{{ASSET_VERSION}}/angular-app.js"></script>
else load this script
<script type="text/javascript">
loadIndividualJsCssFiles('config/assets.xml');
</script>
</head>
how to acheive this

document.cookie is a string in the browser that contains all of your cookie information. A quick and dirty solution might look something like this:
function injectScript(src) {
var script = document.createElement('script');
script.src = src;
script.type = 'text/javascript';
document.body.appendChild(script);
}
if ( document.cookie.indexOf('debug-mode') > -1 ) {
injectScript("/assets/v/{{ASSET_VERSION}}/main-core.js");
injectScript("/assets/v/{{ASSET_VERSION}}/angular-core.js");
injectScript("/assets/v/{{ASSET_VERSION}}/angular-app.js");
} else {
var el = document.createElement('script');
script.type = 'text/javascript';
script.text = 'loadIndividualJsCssFiles(\'config/assets.xml\');';
document.head.appendChild(el)
}
Note: I haven't tested this myself
Basically you are just looking for an occurance of the name of the cookie you are looking for within the document.cookie string.
A more robust approach might include converting your cookie string into key-value array.

Is it possible to use a variable for a javascript reference

Instead of:
<script src="/scripts/myJsFile.v1.js" type="text/javascript></script>
Have something like
<script src="/scripts/myJsFile." + versionVar + ".js" type="text/javascript></script>
This way when we update the js version files the user won't have to clear their cache.

Not in that way, because you're mixing HTML and JavaScript together. HTML does not have JavaScript variables available.
What you can do, however, is adding the <script> tag dynamically, i.e. through JavaScript. That way, you obviously are able to use variables:
<script>
var versionVar = "1.0";
window.addEventListener('load', function() { // on load
var scriptTag = document.createElement('script'); // create tag
scriptTag.src = "/scripts/myJsFile." + versionVar + ".js" // set src attribute
scriptTag.type = "text/javascript"; //set type attribute
document.getElementsByTagName('head')[0].appendChild(scriptTag); // append to <head>
}, false);
</script>

Check out how Google loads their Analytics. Then maybe try something similar like:
(function() {
var versionVar = 9;
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.src = 'http://www' + '.google-analytics.com/ga' + versionVar + '.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();

You can't do this in your HTML file directly. But still you can do this inside an script tag if versopnVar is a JavaScript variable in your window context:
<script type="text/javascript">
var script = document.createElement('script');
script.setAttribute('src', '/scripts/myJsFile.' + versionVar + '.js');
script.setAttribute('type', 'text/javascript');
document.body.appendChild(script);
</script>
At the end, it's not a good aproach doing this. Please read this article at a list apart to get informed.
Alternative Style: Working With Alternate Style Sheets

It would probably be better to do something like
<script src="/scripts/myJsFile.js?v1" type="text/javascript></script>
Then, when you make and update:
<script src="/scripts/myJsFile.js?v2" type="text/javascript></script>
Which will cause most browsers to pull the file rather than pull from cache. This means that you won't have separate JS files. But will just be forcing the user to pull the most recent.
Also, if you want it to always pull the file you can, in a similar manner, append a random int.

You cannot do that straight out.
One way is with some server side code.
For example in php:
<?php $version = "1.0"; ?>
<script src="/scripts/myJsFile.<?php echo $version ?>.js" type="text/javascript></script>

Not exactly that way, but you can create a new script node with e.g. document.createElement and add it to the page.
var s = document.createElement("script");
s.src = ...
document.body.appendChild(s);
You can also use the document.write call to do the same...

You'd have to update your page to update the variable. Also, you'd have to update your javascript file name every time you changed it.
You can use a query string to make your JS unique.
<script src="/scripts/myJsFile.js?version=2" type="text/javascript></script>
marshall & I had the same Idea.
Also, you'd have to update your HTML file every time you updated your Javascript file.

Appending JavaScript file reference after the last hard coded JavaScript file reference in the HEAD

Apologies if the following sounds a little strange. Am working in a legacy framework that allows no access to core templates so cannot alter the loading order of files.
What i am trying to do is load a JS file in the HEAD of the document after the final SCRIPt in said document HEAD.
I currently am using the following with no success:
var head = document.getElementsByTagName("head")[0];
var headScripts = head.getElementsByTagName("script");
var headScriptsLength = headScripts.length - 1;
var headScripts = headScripts[headScriptsLength];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/Global/ICIS/Scripts/global.js';
headScripts.appendChild(newScript);
It adds the reference to global.js directly after the block that creates it.

You better off appending your script simply to the head, and so it will become your last script.
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/Global/ICIS/Scripts/global.js';
head.appendChild(script);

Categories

Resources