We Keep Coding

prevent third party JavaScript to insert jQuery

We have a page which conatins jQuery and third party JavaScript API. This api inserts jQuery dynamically during run-time into the page. It causes conflictions.
How can I prevent the third party API to add jQuery to the page?

My answer should be applied by the them not you, first Rule for Third-Party Javascript is:
"You Don't own the website"
so if they want to use jQuery then they have to use jQuery noConflict that is the best way to deal with a website working with multiple jQuery versions (Yours and theirs):
Completely move jQuery to a new namespace in another object.
var j = jQuery.noConflict(true);
// then you can say
j( "div p" ).hide();
if you add this line and then define a new jQuery then j will be an alias for old version and jQuery - $ will be an alias for the new version by default.
if you want to make sure; you can check the versions of jQuery present in your page:
j.fn.jquery // this should show you your jQuery version
jQuery.fn.jquery // this should show you their jQuery version
you can use it if you still need to use this third-party javascript and no way for them to change their code you can read more about jQuery noconflict
You can assign jQuery to a namespace you use as: mycode.$ and mycode.jQuery so you can later use:
mycode.$("div p")
this is always safer to use namespace to make sure no one else write in same code may override your variables.

There isn't really a way to stop a script from running that you pull in. I was dealing with something similar yesterday. There are ways to overwrite the changes it does obviously but there is no dynamic way to just stop it from running other than to just not pull it in.

Using ReqiureJS to have local instances of 3rd party libraries

My application's JavaScript uses jQuery and jQuery plugins and running in "hostile" environment I have no control over (this is PHP extension for eCommerce platform). Thus no way to determine whether my jQuery code will be executed before someone will attach his instance of jQuery/plugins (introduced by other extension) or after this or someone will load jQuery dynamically after page rendered.
Basically the problem is that other extension could use jQuery (with plugins) also and just connecting jQuery with tag will not work.
I have a strong feeling that RequireJS might help me to load needed version of jQuery as far as particular versions of jQuery plugins into the encapsulated scope without polluting global scope (so other extensions will still function properly). Then I'll wrap all my code to "require" statements and it will run using it's own set of jQuery and plugins. I tried this and it kind of works (have not tested this in production environment though) but in some weird way. Seems like this question is kind of relevant to problems I have. Also answer suggesting to use AMD-compatible version of jQuery. But what about plugins? I don't think all plugins I use have such versions.
So questions:
Could RequireJS be used to cover such use case (running jQuery+plugins in undefined environment)? If RequireJS could be used there then any example code or explanation of how to do this properly will be greatly appreciated.
If there is no way to cover this with RequireJS what do you think would be best approach to handle issue?

Yes, I believe RequireJS can help you out here. To my knowledge you'll have to do some legwork, though. Take a look at the source of the (as of 2012-08-19) latest jQuery: link. At the bottom you can see that window.jQuery is being set, defining jQuery and $. The define call for AMD loaders happens after that, so jQuery is in the global scope no matter what. What you want to do is guarantee that your own version of jQuery and plugins stay isolated from other jQuery instances and plugins, correct?
Place your custom jQuery and plugins into their own directory (let's call it "jqcustom") and use that directory when specifying dependencies in your scripts' define calls. You'll want to modify your version of jQuery by wrapping it in a define call and returning the jQuery object at the very bottom, taking out jQuery's window.jQuery and window.$ assignments as well as its default define call in the process (these are both at the bottom, remember). Then you'll need to wrap all of your plugins in define calls and specify your own version of jQuery as the dependency. Example:
define(['jqcustom/jquery'], function(jQuery) {
//inside this method 'jQuery' will override any predefined global window.jQuery
//in case any plugins use the $ variable, define that locally too
var $ = jQuery;
//... plugin code ...
});
If you use RequireJS' optimizer, it can do the wrapping of the plugins for you with its shim config options. jQuery plugins work by adding methods to jQuery's prototype object, so I believe as long as you pass the same jQuery (your custom jqcustom/jquery one) to every plugin with your define wrapping, the plugins' extensions will all be set on the same object and be accessible in subsequent define calls specifying your custom jQuery or custom plugins as dependencies. Good luck!

embedded javascript that is based on jQuery

I'm building a service that allows people to put a javascript code I gave them to their site.
The javascript code is based on jQuery.
My question is how to do this to be safe and optimized, cause I don't want to break certain users website.
The thing I'm looking for so far( you can update if you think I need to face other problems):
what happens when the user already has jquery loaded on their page? should I load my jquery library using different namespace or should I use his jquery library.
in case I can use his jquery library, I think I'll need to check to see if the versions corespond, but again is this safe?
in case I want to use his jquery library, how do I check if he has jquery loaded and if he has the right version
this is related to 3. what happen if he changes his jquery library that doesn't correspond with the library I think it will be, leading to a bad result.
Looking for your answers.
Thanks

Don't depend on the page's jQuery or try to use it. This will just turn into a support nightmare. You can't even be sure that a version is accurate, as the target page can alter its version of jQuery.
The best approach is for your code to create and load an iFrame. This gives you complete control over the iFrame's jQuery, CSS, etc. With vastly reduced chances of conflict.
If the iFrame approach is not possible for some reason, Use noConflict to minimize the chance of conflicting jQuery versions.
Something like this:
<script type="text/javascript">
if ($ || jQuery) {
var PagesLibrary = $;
var PagesjQuery = jQuery;
</script>
<!-- load your jQuery -->
<script type="text/javascript" src="http://example.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
var my_jQuery = $.noConflict (true);
if (PagesjQuery) {
$ = PagesLibrary;
jQuery = PagesjQuery;
}
</script>
Then instead of $('#selector').function();,
Use: my_jQuery('#selector').function();.

Without the context of actually what your injected code does, it's hard to say. If you're writing a general bit of functionality, you probably want to just implement it as a jQuery plugin, specify what version you target, and then leave it to your users to decide how to include it, etc.
However, it sounds more like you're writing a service of some kind. In that case, I recommend the following course:
Place all the code you depend on (jQuery, other libraries, your code, etc) in an anonymous function wrapper, and have the snippet you have people just inject a script tag pointing to your js file. This is most likely to give you reliable results. If you require special information, like an ID, have the snippet just before the injection code set those values in a global variable, or have extra code that runs just after the injection to call a function of yours with the data. Look at how Google Analytics accomplishes this for reference. Either way, you'll need to affect the global scope.
I know that may not be what you wanted to hear. You could always create an elaborate jQuery detection and injection scheme, but you'd run into exactly the problems you mention (like version collisions etc). The safe way to go is to combine all the code you require along with your own and provide it all as one file which only makes internal references.
Hope this helps!

Using Prototype JS on pages that use jQuery

I am revamping a website that now uses jQuery. The process is more than half way done but for the time being I need to setup a demo as soon as possible. For this I will copy existing ASP code as-is and these particular pages require prototype plugins. Converting all prototype plugins to jQuery is in the todo list. So I am wodering if there is a workaround that I can use in the mean time to have both libraries working on same page. The workaround is temporary, I'll port the plugins to jQuery (or use a jQuery alternate) eventually.
Edit
OK, so I prefer to stick with $ = jQuery. My revised question is: does prototype have a no conflict option? I can wrap all prototype plugin code inside wrappers, so wondering if it is possible to do a:
(function(/* what comes here? */) {
// some code that uses $ and $$
})(/* what comes here? */);

You could read about Using jQuery with Other Libraries.

Supporting multiple JavaScript libraries in one script

I'm working on a new project in JavaScript that I want to release later. Besides other functionality, this script requires a little DOM manipulation. To make this XB (Cross-Browser) and not inventing the wheel again, I need help of a existing JavaScript library. Because of the large number of great libraries I don't want to force one library for this project. That's why I want to support multiple libraries in one script.
Knowing my jQuery, but other library I don't have enough experience. So I was wondering if theres a tutorial or article that gives light on the supporting multiple JavaScript libraries in a script?
I've read somewhere that the same is possible with CSS selector engines (Sizzle, Selector.js, Peppy, NWMatcher, cssQuery), but I don't know about JS.

Well, with jQuery, you can use the $.noConflict() function to remove the '$' and 'jQuery' variables from the global namespace, preventing possible issues if other parts of the page use another version of jQuery or another library that declares the '$' variable.
Here's a simple example...
<script src="/path/to/jquery.min.js" type="text/javascript"></script>
<!-- load plugins you require here -->
<script type="text/javascript">
var myUniquelyNamedVar = {};
myUniquelyNamedVar.jQuery = $.noConflict(true); // de-aliases jQuery, but gives you a private reference (if you need it)
(function($) {
// use an anonymous function and pass in your private jQuery instance; inside this function you can use $ like normal...
})(myUniquelyNamedVar.jQuery);
</script>
I've used this approach with JSR-168 portlets and had great success. It allows me to have several portlets on a page, each of which could be using a different version of jQuery or different plugins.

I don't think there's a lot about the common frameworks that's similar enough to usefully abstract them anyway. Stick to regular DOM as much as possible.
About the only useful, reusable operation I can think of that many frameworks provide in a similar fashion would be the selector engine. So something like:
function querySelectorAll(selector) {
if ('querySelectorAll' in document)
return document.querySelectorAll(selector); // native Selectors-API is best
if ('jQuery' in window)
return jQuery(selector); // returns a wrapper object, but it's enough like an array
if ('$$' in window)
return $$(selector); // prototype
if ('YAHOO' in window && 'util' in YAHOO && 'Selector' in YAHOO.util)
return YAHOO.util.Selector.query(selector); // yui
// others?
throw 'No selector engine found';
}

The second comment on this page gives an interesting answer: Swiss – a JavaScript framework framework.