Embed Javascript on pages that loads other javascript libraries? - javascript

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.

Related

JavaScript and CSS dynamic versioning

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 :

How to use AngularJS to build javascript widgets for public use?

I'm trying to build a JavaScript widget that will allow webmasters to just cut and paste a few lines of code to display some functionality and UI on their site.
I've seen a good example of doing this kind of thing in JQuery, but not Angular. I'm assuming the widget will need to download the angularjs javascript file conditionally (based on whether it has already been loaded).
Has anyone had experience doing this in Angular and can recommend whether or not to do it in Angular or just stick with jQuery?
e.g. FourSquare's widget code:
Save to foursquare
<script type='text/javascript'>
(function() {
window.___fourSq = {"uid":"606"};
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://platform.foursquare.com/js/widgets.js';
s.async = true;
var ph = document.getElementsByTagName('script')[0];
ph.parentNode.insertBefore(s, ph);
})();
</script>
I believe AngularJS is a framework with is targetted towards Single Page Apps (SPA) and provides all the infrastructure around it. The use of widget within existing HTML pages is not a ideal use case for using AngularJS.
jQuery is more of a utility belt \ library and hence can be used anywhere.

Loading and Executing the jquery and javascript scripts using Java or any other language

We have a need to parse and extract the content from html files. We are thinking of using jQuery to easily navigate the DOM and extract a small piece of information. We found JavaScript library written in Java from Mozilla. Using this libary, we tried to load a file called file.js that includes jquery script as well as a few lines of jquery script code as shown below.
var content = $('<html> <body><div id="div1"><span> Hello World!</span></div></body></html>').find('div span').html();
print("content = " + content);
print("hello");
We got errors related to undefined document, navigator etc. which are in jQuery library. Can anyone please help us as to how to run jQuery scripts with Java or C# to parse html files.
Using Rhino from Java is fine, but you have to be aware of the fact that Javascript itself does not define the DOM API.
It is instead the role of the navigator that embeds the javascript engine.
You need to initialize the DOM by yourself, using for example the script found here: http://ejohn.org/blog/bringing-the-browser-to-the-server/
which allows to run jquery, according to the author, and then to load your html code in the `virtual' page that is emulated in this environment.

Partially Inlining External JavaScript Libraries

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.

Possible to use Jquery in a Js widget to be inserted on other sites

If I want to provide a widget on my website that other people can insert on their webpages, via :
Can I import and use Jquery in that file so that the user doesn't need to add it manually to his page.
How would I do this? (I'm new to Javascript too)
Thanks
You could do a simple copy and paste (i.e. copy the code in the jQuery file into your own JavaScript file).
If you wanted to keep the files separate, however, you could add the jQuery script to the DOM as follows:
var script = document.createElement("script");
script.src = "path/to/jQuery.js";
document.getElementsByTagName("head")[0].appendChild(script);
Steve
Here's a great post on that topic: http://alexmarandon.com/articles/web_widget_jquery/

Categories