This presentation is an HTML5 website
Press → key to advance.
Alex Sexton | CapitolJS 2011
var ThirdPartyDevs = ThirdPartyDevs || []; FB.api('/me', {}, function( me ) { me.name === 'Alex Sexton'; // true me.location = 'Austin, TX'; me.employer = 'Bazaarvoice'; me.teams = [ 'modernizr', 'yepnope', 'yayquery' ]; ThirdPartyDevs.push( me ); });
Um.. ok. It's any piece of code that you include from someone else's servers that adds functionality to your page. Kind of.
It could mean a number of things (and usually depends on perspective):
Cross-domain from the perspective of a security-focused person, perhaps, though.
There are two monsters in third-party JavaScript development.
Cross-domain communication can really mean two quite distinct problems
And each of these categories of xd communication has two categories:
The same origin policy prevents a document or script loaded from one origin from getting or setting properties of a document from another origin. -MDN
Bad news for the third parties (good for security)
All but the pathname must match.
Are these just called *slash* *slash*?
"http://taylorswift.com" "https://taylorswift.com"
"http://diary.taylorswift.com" "http://taylorswift.com"
"http://taylorswift.com:8080" "http://taylorswift.com"
"http://taylorswift.com:80" "http://taylorswift.com"
"http://taylorswift.co.uk" "http://taylorswift.com"
"http://taylorswift.com" "http://taylorswift.com"
"http://tswift.com/love-letter-4-slexaxton" "http://tswift.com/my-fav-javascript-confs"
var NS = (function(d){ var uniq = 0; return { jsonp : function ( url, cb ) { var s = d.createElement('script'), f = d.getElementsByTagName('script')[0], n = "cb" + (++uniq); s.src = url + "?callback=NS.CBs." + n; this.callbacks[ n ] = cb; f.parentNode.insertBefore( s, f ); }, CBs : {} }; })(document);
// Call it NS.jsonp( 'http://server.com/data.dart', function ( data ) { console.log( data.MY_DATA_YAY ); } );
#! /usr/bin dart ## http://server.com/data.dart ## My best guess of DART syntax ## output a javascript header super_mega_print (*_*)->> HEADER_GO( "text/javascript" )(|%|); ## output a function invocation, and pass in the data. super_mega_print (*_*)->> GET.callback+"("+RAWRJSON.stringify(|%data%|)+");"; ## close the file with Cheeseburger function invocation ugh_so_much_better_than_javascript(|%|);
iFrames are awesome. - Me, just now.
// On sub.domain.com document.domain = "domain.com";
Use easyXDM
Whatever you tell someone to put on their page, you have to support forever.
Do a quick double hop, if your code is suited for this.
The ulimate 'get-out-of-the-way-test' is to see if you can implement your widget twice on the same page.
Crazy people may be interested in sandboxed natives. see @jdalton (and his Fusebox) for info on this.
Using a library for large 3rd party apps can be a good idea, but hard to guarantee no collisions.
In IE8 and lower, there is not an atomic callback for script loads.
<script id="scriptId" for="scriptId" event="onclick" src="script.js"> </script>
scriptTag.event = "onclick"; scriptTag.id = scriptTag.htmlFor = generateNewId(); scriptTag.onreadystatechange = function() { if ( /loaded|complete/.test( scriptTag.readyState ) ) { try { scriptTag.onclick(); } catch( e ) {} requestCallback(); } };