I am creating a piece of JavaScript to be deployed to sites that are, at the moment, unknown to me.
This piece of code is supposed to do something that would be so much easier if I could just do it with jQuery, but I can't include any external libraries in this code because:
I can't load other files, just the one JavaScript file that I write.
Any external library might conflict with the unknown client site's code (they might already have loaded that same library into their site).
I need the file to be downloaded as fast as possible.
Now my question is: Is there a tool that would help me extract just the specific code-paths my code uses from the external library (jQuery) so that I could embed them directly into my code as part of it (using namespaces, etc.)?
Or it could be that my question is even wrong to begin with.
I know it conflicts with the first caveat but you could include jquery dynamically in your code by writing out the script element to a CDN e.g.
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js
var headID = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js';
script.onload = function() { initialiseJQuerySpecificCode(); };
headID.appendChild(script);
function initialiseJQuerySpecificCode() {
jQuery.noConflict();
//more jquery code
jQuery(document.ready(function() {
//initialisetion code
}));
};
Loading from CDN means that many users will already have it in their cache. Also - the minified version is very small anyway.
Related
I had a question regarding dynamic versioning of JavaScript and CSS file references in HTML files. For example:
script src = "test.js?v=1234"
And similarly with CSS references. I have done this in the past using ASP.NET, where I can call a function from the server side to generate a random number everytime the page loads ex:
"test.js?v=<%= myrandomfunc() %>"
I basically don't want the browser to get a cached copy of the css or js reference. I wanted to know if I can do this in JavaScript or jquery without using a server side language like asp or php etc.
Any help is much appreciated.
Thanks !
This is called file revving and it depends on what build system you're using. For Grunt, there's grunt-filerev, for Gulp, there's gulp-rev and gulp-filerev-replace.
If you don't yet use a build system, you might also want to check out Yeoman which will generate just about everything you need, including file revving.
I wanted to know if I can do this in JavaScript or jquery without
using a server side language like asp or php etc.
Yes.
var script = document.createElement('script');
script.onload = function() {
//do your stuff here
};
script.src = "http://whatever.com/the/script.js?v="+(+new Date());
document.getElementsByTagName('head')[0].appendChild(script);
Another option is to send the right headers :
I am doing a web application, which is planned to allow other websites (client) to embed the following javascript on its page:
<script src="http://example.org/my.js"></script>
My web application is at http://example.org.
I cannot assume that the pages at the client websites have JQuery and other needed libraries. So it seems that the javascript my.js needs to load needed JQuery AND other javascript libraries.
From this article : How to build a web widget (using jQuery) at
http://alexmarandon.com/articles/web_widget_jquery/
I know how to load needed JQuery. What about loading other libraries? It seems its going to be complicated if I use the code in the above article to load multiple javascript libraries.
How or any Javascript library to help me load multiple javascript libraries (or even more, css files) easily?
Thanks!
to load other js files from one js file,you can include this code snippet, you can add different scripts with this method
var server_name="abc.com"
(function() {
var some_scrpt = document.createElement('script'); some_scrpt.type = 'text/javascript'; some_scrpt.async = true;
some_scrpt.src = 'http://' + server_name + '/static/js/your_script.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body'[0]).appendChild(some_scrpt);
})();
Hope it helps.
I'd like to use socket.io in a javascript file. How can I do this?
The only way I currently know of using socket.io, as a client is doing
<script src="[server?]/socket.io/socket.io.js"></script> inside an html file.
Including a javascript within a javascript file is not naturally accomplished, because it's not really needed in most scenarios (you just include them both on your html page, for example). You probably have to rethink the way you're executing javascript, but I do believe there is a library designed to this (for whatever reason that may be).
include.js I think it is called.
EDIT: and in the event you're thinking dynamically adding javascript, you can just create a script element and append it to document.head. Um, for example:
document.head = document.head || document.getElementsByTagName('head')[0];
var js = document.createElement('script');
js.setAttribute('type','text/javascript');
js.setAttribute('src','http://my/src/file');
document.head.appendChild(js);
...just off the top of my head.
In my html file I did:
<script src="http://[node server]:[port]/socket.io/socket.io.js"></script>
`
and in my .js file, I did
io.socket = io.connect('http://[node server]:[port]');
and it worked.
I suppose "a standalone javascript file" is inaccurate, because I'm building a web front-end. I meant that it was just a .js file with nothing like node.js running it.
This is probably a very simple issue, but I've been trying to use Firebase in an external javascript file that is being used with an HTML file and can't get it to work properly. I am planning to use this file for many other similar pages, so I'd rather keep it in an external document. Specifically, my code is:
$(function() {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.src= 'https://cdn.firebase.com/v0/firebase.js';
head.appendChild(script);
var Database = new Firebase('https://myfirebase.firebaseIO.com/');
...
but when I try to run it, it says that the Firebase object/keyword is undefined. I know that the script is being correctly appended to the HTML page because I've checked the HTML on the page after running the code.
I have also read somewhere that you might need to have a personal server to run Firebase, but frankly I don't really know what that means - in any case, I use Mac OSX and run all of my HTML and Javascript in Chrome.
Thank you very much!
The problem is that using document.createElement does not force the script to be loaded and rendered before your inclusive script is invoked (it's being invoked now). There are no guarantees by this method on when the script you include will get invoked.
Additionally, you are loading the script onDomReady by putting it inside $(function() {...}); you would want to insert it into the header immediately, not wait for the entire document to load.
The simplest answer is to just put Firebase into the head of the html page; you haven't really explained your limitations here, but I assume this isn't an option for you. If it is, KISS.
Another simple answer is to utilize jQuery, since you obviously have it available.
$.getScript('https://cdn.firebase.com/v0/firebase.js', function() {
// now I can use Firebase
});
You can also accomplish this with other methods (wait until Firebase is defined using a setInterval; utilize other script retrieval methods besides document.createElement--try googling "load scripts dynamically via javascript load order"), but I think this covers your needs sufficiently.
Say my javascript scripts aren't embedded in html/xml... I want to write a small library of helper functions to use in my scripts. Obviously there has to be an "#include" or "require" keyword in javascript, but I can't find any. Anything I could with Google relies on the code being part of html/xml, which doesn't help in my case.
What should I do?
I believe you mean to write some sort of dependency tracking framework for your javascript files and use a process called "Lazy-Loading" to load the required JS file only when it's needed.
Check out Using.js, it seems to do what you need.
Also you might want to check addModule from YUILoader. It allows loading non-YUI framework components on the fly.
There actually isn't a really #include or require in javascript. You're actually supposed to handle all the dependencies yourself. I've seen people do a hack where they do a document.write to include other javascript files.
in the case you care, here there is a version of include that uses the document object via it's DOM interface:
function include(aFilename) {
var script = document.createElement('script');
script.src = aFilename;
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script)
}
the problem is that you must include this function in all your source file that needs includes... :P :P
to include a js file in html:
<script type="text/javascript" src="..."></script>
it should be in the page head for correctness.