collegeman/do-with-jquery.html

## do-with-jquery.html
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>
  </head>
  <body onload="console.log(this);">
    <script>
      // make sure our scripting is isolated
      (function() {
        // copy reference to existing onload event handler
        var onload = window.onload;
        // create our own onload event handler
        window.onload = function() {
          // call the other onload event
          if (typeof onload == 'function') {
            onload();
          }

          // our own, privately scoped copy of jQuery
          var jQuery = window.jQuery;

          // this is what we're going to do with jQuery:
          function doWithJQuery() {
            (function($) {
              // this should be the jQuery selector function
              console.log($, $ === window.jQuery);
              // this should be the prorotype selector function
              console.log(window.$, typeof window.$ == 'function', window.$ !== window.jQuery);
            })(jQuery);
          }

          // load jQuery if it is not defined
          if (!jQuery) {
            // create a new script element and load jQuery via Google AJAX library hosting
            var e = document.createElement('script');
            // I thought setting this to false would make it load synchronously, but it doesn't...
            e.async = true;
            e.src = document.location.protocol + '//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
            document.body.appendChild(e);
            // start waiting for the script to load
            var waitForJQuery = setInterval(function() {
              if (window.jQuery) {
                // stop waiting for the script to load
                clearInterval(waitForJQuery);
                // since we loaded it ourselves, let's make sure not to introduce conflicts
                jQuery = $.noConflict();
                doWithJQuery();
              }
            }, 100);
          }
          else {
            doWithJQuery();
          }
        };
      })();
    </script>
  </body>
</html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>
	</head>
	<body onload="console.log(this);">
	<script>
	// make sure our scripting is isolated
	(function() {
	// copy reference to existing onload event handler
	var onload = window.onload;
	// create our own onload event handler
	window.onload = function() {
	// call the other onload event
	if (typeof onload == 'function') {
	onload();
	}

	// our own, privately scoped copy of jQuery
	var jQuery = window.jQuery;

	// this is what we're going to do with jQuery:
	function doWithJQuery() {
	(function($) {
	// this should be the jQuery selector function
	console.log($, $ === window.jQuery);
	// this should be the prorotype selector function
	console.log(window.$, typeof window.$ == 'function', window.$ !== window.jQuery);
	})(jQuery);
	}

	// load jQuery if it is not defined
	if (!jQuery) {
	// create a new script element and load jQuery via Google AJAX library hosting
	var e = document.createElement('script');
	// I thought setting this to false would make it load synchronously, but it doesn't...
	e.async = true;
	e.src = document.location.protocol + '//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
	document.body.appendChild(e);
	// start waiting for the script to load
	var waitForJQuery = setInterval(function() {
	if (window.jQuery) {
	// stop waiting for the script to load
	clearInterval(waitForJQuery);
	// since we loaded it ourselves, let's make sure not to introduce conflicts
	jQuery = $.noConflict();
	doWithJQuery();
	}
	}, 100);
	}
	else {
	doWithJQuery();
	}
	};
	})();
	</script>
	</body>
	</html>