Yandex.Widget + adjustIFrameHeight + MooTools

Many people know about such a cool thing as Yandex.Widget .
Make your functional widget easy, just write a server widget and connect it to Yandex.Vidget via iframe .

To control the widget, Yandex provides API in the form of a JS widget object, in particular, using it, you can change the frame height for dynamic content (adjustIFrameHeight), this allows you to get rid of the vertical scroll bar. But this API has a significant disadvantage - it is written using jQuery , which deprives the developers of widgets on MooTools to use the Widget API.

Below, I will show how it is quite simple to bypass the Widget API to manage the frame height using MooTools on the side of the widget.

')
As is known from the contents of the frame, it is impossible to access the object of the frame itself, if they are located on different domains. To bypass this restriction, the Widget API uses a proxying iframe, through the hash (content after # in the src frame) which commands are exchanged. As a result, we need to write on the side of the widget the interaction functionality with this proxying iframe.

Immediately bring all the widget code, since it is quite small:

< script type ="text/javascript" src ="mootools-1.2.js" ></ script >

<script language= "JavaScript" type= "text/javascript" >

var lsWidgetClass = new Class({

Implements: [Options],

options: {
//
delta: 30
},

initialize: function (options){
this .setOptions(options);
this .adjustIFrameHeight();
},

//
cmdIFrame: function (cmd,value) {
//
if ($( 'wd-iframe-cmd' )) {
$( 'wd-iframe-cmd' ).destroy();
}
// URL wauth,
var found=location.href.match(/wauth=.+=/ig);
if (found){
// SRC (ru,ua,..)
var url= new URI().getData( '.' ).split( '|' );
var src=url[0]+ '/xframeproxy.html#' +url[1]+ '&wauth=' ;
// iframe HTML
src=src+found[0].replace( "wauth=" , "" ).replace( "&.=" , "" )+ '&name=' +cmd+ '&value=' +value;
var iframe= new Element( 'iframe' ,{ 'style' : 'visibility: hidden; position: absolute; height: 0pt; width: 0pt; left: 0pt; top: 0pt;' , 'src' :src, 'id' : 'wd-iframe-cmd' });
iframe.inject( document .body);
}
},
//
setIFrameHeight: function (value) {
this .cmdIFrame( 'Widget%3A%3AsetIFrameHeight' ,value);
},
//
adjustIFrameHeight: function () {
this .setIFrameHeight($( 'widget-yandex' ).getSize().y+ this .options.delta);
}
});

window.addEvent( 'domready' , function () {
new lsWidgetClass();
});
</ script >

< div id ="widget-yandex" >
- , . , API ., . < br >< br >
, . < br >< br >
, , .
</ div >

* This source code was highlighted with Source Code Highlighter .

In this example, immediately after the widget is loaded, the adjustIFrameHeight () method is launched, which adjusts the height of the frame to the contents of the widget.

I hope this topic will help novice widget builders who do not breathe exactly in the direction of MooTools :)
A working example of the MooTools widget using the principle described above can be found here (Quiz) .

UPD Added a mechanism for determining the first level domain, because the widget did not work on the Ukrainian Yandex yandex.ua