Yandex.Widget + adjustIFrameHeight + MooTools
Many people know about this cool thing Yandex.Widget.
To make your widget be easy enough to write server-side widget and connect it to Yandex.Widget via iframe.
To control the widget Yandex offers APIs in a JS object widget, particularly with the help of it you can change the height of the frame under dynamic content (adjustIFrameHeight), it allows to get rid of the vertical scroll bar. But this API has a significant drawback — it is written using jQuery, which deprives developers of widgets for MooTools to use the Widget API.
Below I will show how quite simple it is possible to bypass the Widget API to control the height of the frame using MooTools on the side of the widget.
As we know from the contents of the frame it is impossible to access the object frame itself, if they are on different domains. To bypass this limitation, a proxy Widget API uses an iframe using hash (the content after # in the src of the frame) which provides for the exchange of commands. In the end we need to side of the widget to write the functional interaction with this proxy iframe.
Just bring all the code of the widget, since he is very small:
<script type="text/javascript" src="mootools-1.2.js"></script>
<script language="JavaScript" type="text/javascript">
var lsWidgetClass = new Class({
Implements: [Options]
options: {
// Some incremental value for setting the height of the frame
delta: 30
},
initialize: function(options){
this.setOptions(options);
this.adjustIFrameHeight();
},
// Transmits the command to the parent frame window widget
cmdIFrame: function(cmd,value) {
// Delete oldest frame
if ($('wd-iframe-cmd')) {
$('wd-iframe-cmd').destroy();
}
// Extracts from the URL the widget ID wauth, it is passed automatically by Yandex
var found=location.href.match(/wauth=.+=/ig);
if(found){
// generated by SRC subject to the top-level domain(ru,ua,..)
var url=new URI().getData('.').split('|');
var src=url[0]+'/xframeproxy.html#'+url[1]+'&wauth=';
// Generated proxy iframe and add it in 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);
}
},
// Sets a given height of the frame
setIFrameHeight: function(value) {
this.cmdIFrame('Widget%3A%3AsetIFrameHeight',value);
},
// set auto height of the frame
adjustIFrameHeight: function() {
this.setIFrameHeight($('widget-yandex').getSize().y+this.options.delta);
}
});
window.addEvent('domready' function() {
new lsWidgetClass();
});
</script>
<div id="widget-yandex">
A widget is an information block that contains a fragment of the site. All widgets made using the technology of API Yandex.Widgets, designed for installation on the Yandex main page.<br><br>
You can distribute your widget using the link installation or the promotional code that you can get on the page of the widget in the study.
</div>
* This source code was highlighted with Source Code Highlighter.In this example, immediately after loading the widget's run method adjustIFrameHeight(), which adjusts the height of the frame under the contents of the widget.
I hope this topic will help beginners widget-builders, who do not exactly breathe to the side MooTools :)
MooTools working example of the widget using the above-described principle, it is possible see here (Quiz).
UPD Added a mechanism for determining the domain of the first level, because the widget didn't work on the Ukrainian Yandex yandex.ua
Комментарии
Отправить комментарий