public
Last active

Loads different versions of YUI in sandboxed iframes for testing

  • Download Gist
multi-yui.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
/**
Loads different versions of YUI in sandboxed iframes and makes them available
for use in the parent frame by exposing them as properties on a `Y.Multi`
instance.
 
The included `sandbox.html` file must be present at a URL with the same origin
as the current page, or the universe will explode.
 
This is primarily intended to be used for testing. You probably shouldn't use it
for anything real.
 
@example
Load YUI 3.2.0 and make it available as `multi.YUI_320`. Load YUI 3.3.0 and
make it available as `multi.YUI_330`.
 
var multi = new Y.Multi({
sandbox: 'path/to/sandbox.html',
seeds: {
YUI_320: 'http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js',
YUI_330: 'http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js'
}
});
 
multi.on('ready', function () {
multi.YUI_320().use(function (Y) {
Y.log("OMG I'm using YUI 3.2.0!");
});
 
multi.YUI_330().use(function (Y) {
Y.log("OMG I'm using YUI 3.3.0!");
});
});
 
@example
Load YUI 3.2.0 and 3.3.0, and instantiate both of them before firing the `ready`
event. The YUI instances, complete with `use()`ed modules attached, will be made
available on the `multi` instance.
 
var multi = new Y.Multi({
sandbox: 'path/to/sandbox.html',
seeds: {
Y_320: {
url: 'http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js',
use: ['node']
},
 
Y_330: {
url: 'http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js',
use: ['node']
}
}
});
 
multi.on('ready', function () {
multi.Y_320.log("OMG I'm using YUI 3.2.0!");
multi.Y_330.log("OMG I'm using YUI 3.3.0!");
});
 
@module multi
@class Multi
@param {Object} config Config object.
@param {Object} config.seeds Mapping of seed names to either URLs or config
objects.
@param {String} [config.sandbox='sandbox.html'] URL of the MultiYUI
`sandbox.html` file. Must be served from the same origin as the current
page, or the universe will explode.
@constructor
**/
 
YUI.add('multi', function (Y) {
 
var doc = Y.config.doc;
 
function Multi(config) {
this._config = Y.merge({
sandbox: 'sandbox.html',
seeds : {}
}, config);
 
this._iframes = [];
this._seedCount = Y.Object.size(this._config.seeds);
this._seedsLoaded = 0;
 
/**
Fired when all requested seed files have been loaded (and instantiated, if
instantiation was requested). Subscribe to this event in order to be
notified when you can start using the requested YUI versions.
 
@event ready
@fireOnce
**/
this.publish('ready', {fireOnce: true});
 
Y.Object.each(this._config.seeds, this._createFrame, this);
}
 
Multi.prototype = {
_createFrame: function (seed, name) {
var iframe = doc.createElement('iframe'),
self = this,
url = seed.url || seed,
use = seed.use;
 
this._iframes.push(iframe);
 
iframe.src = this._config.sandbox;
iframe.style.display = 'none';
 
iframe.onload = function () {
// Load the YUI seed URL into the iframe.
iframe.contentWindow.LazyLoad.js(url, function () {
// If a "use" array was passed, create a YUI instance before
// indicating completion. Otherwise, just attach the YUI global.
if (use) {
self[name] = iframe.contentWindow.YUI().use(use, function () {
self._seedLoaded();
});
} else {
self[name] = iframe.contentWindow.YUI;
self._seedLoaded();
}
});
};
 
doc.body.insertBefore(iframe, doc.body.firstChild);
},
 
_seedLoaded: function () {
this._seedsLoaded += 1;
 
if (this._seedsLoaded === this._seedCount) {
this.fire('ready');
}
}
};
 
Y.augment(Multi, Y.EventTarget);
 
Y.Multi = Multi;
 
}, '3.3.0', {requires: ['event-custom']});
sandbox.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sandbox</title>
</head>
<body>
 
<script>
LazyLoad=function(j){function p(c,a){var g=j.createElement(c),b;for(b in a)a.hasOwnProperty(b)&&g.setAttribute(b,a[b]);return g}function m(c){var a=k[c],b,e;if(a)b=a.callback,e=a.urls,e.shift(),h=0,e.length||(b&&b.call(a.context,a.obj),k[c]=null,n[c].length&&i(c))}function u(){if(!b){var c=navigator.userAgent;b={async:j.createElement("script").async===!0};(b.webkit=/AppleWebKit\//.test(c))||(b.ie=/MSIE/.test(c))||(b.opera=/Opera/.test(c))||(b.gecko=/Gecko\//.test(c))||(b.unknown=!0)}}function i(c,
a,g,e,h){var i=function(){m(c)},o=c==="css",f,l,d,q;u();if(a)if(a=typeof a==="string"?[a]:a.concat(),o||b.async||b.gecko||b.opera)n[c].push({urls:a,callback:g,obj:e,context:h});else{f=0;for(l=a.length;f<l;++f)n[c].push({urls:[a[f]],callback:f===l-1?g:null,obj:e,context:h})}if(!k[c]&&(q=k[c]=n[c].shift())){r||(r=j.head||j.getElementsByTagName("head")[0]);a=q.urls;f=0;for(l=a.length;f<l;++f)g=a[f],o?d=b.gecko?p("style"):p("link",{href:g,rel:"stylesheet"}):(d=p("script",{src:g}),d.async=!1),d.className=
"lazyload",d.setAttribute("charset","utf-8"),b.ie&&!o?d.onreadystatechange=function(){if(/loaded|complete/.test(d.readyState))d.onreadystatechange=null,i()}:o&&(b.gecko||b.webkit)?b.webkit?(q.urls[f]=d.href,s()):(d.innerHTML='@import "'+g+'";',m("css")):d.onload=d.onerror=i,r.appendChild(d)}}function s(){var c=k.css,a;if(c){for(a=t.length;--a>=0;)if(t[a].href===c.urls[0]){m("css");break}h+=1;c&&(h<200?setTimeout(s,50):m("css"))}}var b,r,k={},h=0,n={css:[],js:[]},t=j.styleSheets;return{css:function(c,
a,b,e){i("css",c,a,b,e)},js:function(c,a,b,e){i("js",c,a,b,e)}}}(this.document);
</script>
 
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.